타입스크립트

[ 목차 ] Introduction Mapped Type 사용하기 Pick 유틸타입 살펴보기 Introduction 매핑된 타입(Mapped Type)은 제네릭을 사용해서 다른 타입을 바탕으로 새로운 타입을 만드는 것을 의미합니다. 특징으로는, 1. 중복을 방지할 수 있고, 2. 다른 타입을 참조해서 사용하며, 3. 제네릭과 인덱스 시그니처를 사용한다는 것입니다. Mapped Type 사용하기 /** 예제1 **/ type StudyRoom { name: string; cost: string; availablePeople: number; startTime: Date; endTime: Date; } // StudyRoom 타입을 바탕으로 새로운 타입을 생성 type NewStudyRoom = { [K in..

[ 목차 ] Introduction 먼저 간단한 클래스 작성 생성자의 타입 표현하기 Introduction 리액트를 사용하면서 클래스를 거의 사용하지 않고, 함수 위주로 사용했었는데요. 그래서인지, 생성자 함수를 타입으로 표현하는 방식이 너무 생소하게 다가왔습니다. 몇 가지 시행착오를 통해, 알아낸 바를 정리하고자 합니다. 먼저 간단한 클래스 작성 class Person { constructor(private name: string, private age: number) {} getName() { return this.name; } getAge() { return this.age; } } const person = new Person("Rabbit", 10); person.getName(); // "Ra..

[ 목차 ] TS에서의 keyof 연산자 TS에서의 keyof 연산자 자바스크립트에서는 keyof 연산자가 존재하지 않습니다. keyof 연산자는 타입의 키 값들을 유니온 타입으로 반환해줍니다. keyof 연산자는 객체 타입에 사용할 수 있습니다. interface Rabbit { name: string; age: number; place: string; move: () => void; } type KeyofRabbit = keyof Rabbit; // 테스트 const rabbit1: KeyofRabbit = "age"; // ok const rabbit2: KeyofRabbit = "food"; // error!

[ 목차 ] JS에서의 typeof 연산자 TS에서의 typeof 연산자 JS에서의 typeof 연산자 자바스크립트에서도 typeof 연산자가 존재합니다. 어떤 값의 type을 string 형태로 반환하는 연산자입니다. const a = typeof 1; // "number" const b = typeof "str"; // "string" const c = typeof false; // "boolean" const d = typeof {}; // "object" const e = typeof []; // "object" const f = typeof function () {}; // "function" const g = typeof null; // "object" -> 주의! const h = typeo..

[ 목차 ] Introduction 제네릭 맛보기 제네릭 종류 - 함수, 인터페이스, 클래스 제네릭 제약 조건 (constraints) 제네릭 디폴트 파라미터 Introduction 타입스크립트에서 제네릭은 빠질 수 없는 개념이 되었습니다. 유틸함수도 제네릭을 사용하고 있고, API 인터페이스를 작성하거나 함수를 사용할 때도 많이 사용하고 있습니다. 제네릭에 대해서 타입을 위한 함수와 같다는 표현을 사용하는 것도 보았는데요. 제네릭은 타입에 대한 중복을 제거해줄 수 있기 때문에 이런 표현을 사용한 것 같습니다. 제네릭 맛보기 타입스크립트에서 제네릭은 함수, 인터페이스, 클래스 등에 사용할 수 있습니다. 가장 일반적인 방법은 함수에 제네릭을 사용하는 것일 겁니다. function age(value: num..

타입스크립트 컴파일러에게 컴파일 과정에 해당 모듈을 추가하도록 처리하는 문법입니다. XML 형태의 지시어를 파일의 상단에 위치시켜야 하며, 삼중 슬래시 지시어 선언 이전에 다른 코드가 있으면 주석으로 인식됩니다. 주로 타입 선언(*.d.ts)을 관리할 때 사용하는 것으로 보입니다. /// 위와 같은 형태로 선언할 수 있으며, ...위치에는 프로퍼티 이름과 값이 들어가는데 그 종류에 따라 다르게 동작합니다. // test_types.d.ts /// // test.d.ts declare let a: number; declare let b: string; declare let c: boolean; 트리플 슬래시 지시어는 ts 파일 상단에 위치해야 합니다. // test_types.d.ts declare let..