@2023/09/21 안녕하세요 lika-7입니다이번 시간에는 TypeScript의 구성 옵션에 대해서 설명 하겠습니다tsconfig.json란tsconfig.json는 TypeScript 프로젝트의 설정 파일 입니다.프로젝트를 생성 할 때 기본적으로 tsconfig.json를 구성하여 컴파일러에게 프로젝트를 어떻게 컴파일하고 설정할지 알려줍니다.tsconfig.json의 구성//JSON //tsconfig.json { "compilerOptions": { "target": "ES2015", //자바스크립트 2015버전으로 변환 하겠다 "module": "ESNext", //모듈은 자바스크립트의 최신버전으로 사용하겠다 "moduleResolution": "Node", //? "esModuleInterop..

@2023/09/21 안녕하세요 lika-7입니다이번 시간에는 TypeScript에서 타입, 인터페이스를 가져오고 내보내는 내용에 대해서 설명 하겠습니다모듈에서 import, export JavaScript 에서 import와 export 키워드를 통해 모듈 시스템을 이용할 수 있습니다.우리는 JavaScript에서 모듈 시스템을 이용 해 함수 기능과 변수를 재사용한 코드 블록으로 만들 수 있었습니다.💡타입스크립트의 “타입, 인터페이스” 또한 모듈 시스템을 통해 재사용 가능한 코드 블록으로 만들수 있습니다예제//TypeScript //main.ts import {getFullName, User} from './user' const heropy:User = { firstName: 'Heropy', last..

@2023/09/21 안녕하세요 lika-7입니다이번 시간에는 TypeScript에서 삼중슬래시 지시자의 설명과 참조 태그와 함께 사용하는 법에 대해서 설명 하겠습니다삼중 슬래시 지시자란💡1. 삼중 슬래시 지시자(/// Triple-slash Directives)는 TypeScript 파일에서 사용되는 특별한 주석 문법입니다. 2. 이 지시자들은 TypeScript 컴파일러에게 다른 파일을 참조하도록 하는 역할을 합니다사용법타입 정의 파일 참조주로 “.d.ts” 확장자를 가진 타입 정의 파일을 참조하기 위해 사용됩니다이러한 파일은 외부 JavaScript 라이브러리의 TypeScript 타입 정보를 제공하거나, 프로젝트 내의 커스텀 타입을 정의하는데 사용됩니다/// 삼중 슬래시 지시자는 위와 같이 정의 ..

@2023/09/21 안녕하세요 lika-7입니다이번 시간에는 TypeScript에서 자바스크립트 패키지를 이용 할 때 타입을 선언하는 방법을 정리하겠습니다TypeScript에서 JavaScript 패키지를 사용할 때 오류lodash 패키지를 main.ts 파일에 import 하면위와 같은 에러가 납니다이는 자바스크립트 파일이 타입이 지정되어 있지 않기에 생기는 문제 입니다 에러의 내용을 확인해보면 lodash 파일에 대한 선언 파일을 찾을수 없다고 합니다.lodash 는 암시적으로 any 타입을 가진다고 합니다npm i —save-dev @types/loadash 를 하거나lodash 모듈이 선언된 .d.ts 선언파일이 존재한다면 추가하세요lodash 설치 내용 확인우선 lodash 패키지가 설치된 내..

@2023/09/20 안녕하세요 lika-7입니다이번 시간에는 TypeScript의 제네릭의 제약조건(Generic Constraint)을 사용하는 방법에 대해 정리하겠습니다제네릭 제약조건 사용 상황(사용 이유)💡1. 제네릭은 여러가지 타입을 유연하게 지정하여 사용할 수 있는 문법입니다 2. 제네릭을 이용해 매개변수를 받을 때 매개변수의 타입을 필요한 타입들만 지정해서 받고 싶을 때 가 있습니다. 3. 이 때 제네릭 제약조건을 통해 사용할 수 있는 타입을 제한 할 수 있습니다.💡키워드는 제네릭 타입 변수를 선언하는 코드에 “extends” 키워드를 이용해 선언 할수 있습니다문법//TypeScript interface MyData{ name: string value: T } const dataA: MyDa..

@2023/09/20 안녕하세요 lika-7입니다이번 시간에는 TypeScript의인터페이스 문법에서 제네릭을 사용하는 방법에 대해 정리하겠습니다인터페이스에서 제네릭 선언//TypeScript interface MyData{ //제네릭 타입 별칭(제네릭 타입 매개변수)을 지정하고 name: string value: T // value는 제네릭 타입 매개변수에 할당된 타입으로 지정하겠다는 말 }✅1. 인터페이스에서 제네릭 타입(제네릭 타입 별칭) 별칭을 지정합니다. 2. value 속성은 제네릭 타입 변수에 할당된 타입으로 지정하도록 선언 하였습니다인터페이스에서 제네릭 사용//TypeScript //인터페이스에서 제네릭 선언 interface MyData{ //제네릭 타입 별칭(제네릭 타입 매개변수)을 지..

@2023/09/20 안녕하세요 lika-7입니다이번 시간에는 TypeScript의클레스 문법에서 제네릭을 사용하는 방법에 대해 정리하겠습니다일반형 함수를 축약형 함수로일반형class User{ public payload: P constructor(payload: P){ this.payload= payload } getPayload(){ return this.payload } }축약형class User{ constructor(public payload: P){ } getPayload(){ return this.payload } }일반형에서 payload가 4번이나 사용됩니다.생성자 함수를 통해서 할당하는 내용의 함수라면 위와 같은 축약형을 사용할 수 있습니다클래스에서 제네릭 문법클래스를 만들 때 제네릭 ..

@2023/09/20 안녕하세요 lika-7입니다이번 시간에는 TypeScript의 제네릭 -함수에 대해 정리하겠습니다제네릭이란💡1. 제네릭이란 타입을 함수의 파라미터 처럼 사용하는 것을 의미합니다 2. 간단하게 말하자면 “타입을 변수화” 한것이라고 할수 있습니다.💡키워드 왜 쓰는지💡변수의 타입을 직접적으로 고정된 값으로 명시하지 말고 ‘변수’를 통해 언제든지 변할 수 있는 타입을 통해 유연하게 코딩 할수 있도록 해줍니다.사용법함수의 오버로딩에서//TypeScript interface Obj { x:number } type Arr = [number, number] function toArray(a:string,b:string):string[] function toArray(a:number,b:num..