728x90
728x90
타입스크립트는 클래스 문법에 대한 추가적인 지원이 있다. 따라서, 클래스를 작성할 때 타입스크립트는 자바스크립트와는 다른 문법을 사용하므로 이에 대해서 글을 남기도록 하였다. interface & type interface Bus { custommer: string[]; driver: string; callBus: () => string; getCustomer: () => string[]; onBoardBus: (custommer: string) => void; } 위와 같은 interface는 타입스크립트에서 객체의 타입을 표현하기 위해서 사용할 수 있다. 다만, java와 같은 객체지향 언어와 마찬가지로 interface를 implements하여 말 그대로 클래스의 인터페이스로 사용할 수 있다. cl..
타입스크립트에서 고정된 값을 주기위해서 다음과 같이 union을 활용할 수 있다. type Fruit = "Apple" | "Banana" | "Cocoa"; const fruit: Fruit = "Apple"; 위에서 fruit은 자동완성도 지원되고, Apple, Banana, Cocoa 셋 중 하나의 값만 가질 수 있게 된다. 다만, 다른 언어에 익숙한 사람이라면 enum을 사용하여 위의 고정된 선택지의 값을 표현하고 싶어할 수 있다. enum Fruit { Apple, Banana, Cocoa } const fruit: Fruit = Fruit.Apple; // 0 위의 타입스크립트는 다음과 같이 자바스크립트로 변환된다. "use strict"; var Fruit; (function (Fruit) ..
타입스크립트에서 타입을 선언하는데 크게 두 가지 방법이 있다. Type Aliases와 Interfaces에 대해서 정리하고, 각각 어느 상황에서 사용하는 것이 best case일지도 생각해보았다. Type type 키워드는 타입을 정의하기 위해서 모든 유형에 사용될 수 있다. 동일한 유형이 두 번이상 반복된다면, type을 선언하여 사용할 수 있다. type 키워드는 다음과 같은 특징을 지닌다. 객체를 포함한 모든 유형에 대한 타입을 표현할 수 있다. 문자열이나 숫자 등 값을 type에 할당할 수도 있다. type Name = string | undefined; let myName: Name; myName = "John"; type User = { nickname: string; level: numbe..
오픈소스 라이브러리를 보면, 타입스크립트에서 사용되는 유틸 타입 키워드로 Record 가 있는 것을 종종 본적이 있다. 이번엔 Record에 대해서 기록하고, 사용처에 대해서 생각해보기로 하였다. interface PageInfo { title: string; } type Page = "home" | "about" | "contact"; const nav: Record = { about: { title: "about" }, contact: { title: "contact" }, home: { title: "home" }, }; 공식 문서에서 제공하는 예제는 위와 같다. 마치 반복문을 돈 것 처럼 key값을 기준으로 type값을 모두 가지게 할 수 있는 것을 확인할 수 있다. 이번엔 string이 아닌 값..
타입스크립트에서 제네릭, Mapped Types을 사용해보고, keyof 키워드는 어느 상황에서 사용할 수 있을지 사용해보았다. interface dynamic { [key: number] : string, } const keys: dynamic = {1: 'one', 2: 'two'}; 타입스크립트에서는 위처럼 동일한 타입의 key-value값들을 갖는 객체를 정의할 수 있다. 다만, 이 경우 value의 타입은 맨 처음의 선언한 것에서 바뀔 수 없는 단점이 있다. 제네릭을 사용하여 더 확장성있게 코드를 작성할 수 있다. interface dynamic { [key: number] : T, } const str: dynamic = {1: 'one', 2: 'two'}; const num: dynamic..