728x90
728x90
타입스크립트에서 고정된 값을 주기위해서 다음과 같이 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..
타입스크립트를 사용하는 사람이라면, 어느 라이브러리 내부에서 다음과 같은 코드들을 본 적이 있을 것이다. /// /// /// 이는 삼중 슬래시 지시문이라고 한다. 삼중 슬래시 지시문은 단일 XML 태그를 포함하는 단 한 줄짜리 주석으로, 주석의 내용은 타입스크립트 컴파일러 지시문으로 사용된다. 삼중 슬래시 지시문의 내용은 단일 파일에서만 유효하며, 이는 파일의 최상단에 위치해야 한다. 그렇지 않으면, 일반 주석으로 인식된다. /// 가장 일반적인 삼중 슬래시 지시문으로, 파일간의 의존성을 나타낸다. 컴파일러에 해당 파일을 포함하도록 지시한다. 입력 파일 전처리 (Preprocessing input files) 과정으로 추가한 파일이 컴파일에 포함된다. /// 이는 패키지 의존성을 설정하는데, impor..