사용자 정의 타입 안전장치(user-defined type guard) 불(boolean)을 반환하는 함수 중 단순히 "이 함수는 boolean을 반환한다"라고 하고 끝내기엔 아쉬운 게 있을 수 있습니다. 예를 들어 전달한 인수가 string인지 아닌지를 판단하는 함수를 구현한다고 가정하겠습니다. function isString(a: unknown): boolean { return typeof a === "string"; } isString("a"); // true isString([4]); // false 지금까진 아무런 문제가 없습니다. 하지만 isString 실제로 호출하면 어떤 일이 일어날까요? function isString(a: unknown): boolean { return typeof a ..
튜플의 타입 추론 개선 TypeScript는 튜플을 선언할 때 튜플의 타입에 관대한 편입니다. 튜플의 길이, 그리고 어떤 위치에 어떤 타입이 들어있는지는 무시하고 주어진 상황에서 제공할 수 있는 가장 일반적인 타입으로 튜플의 타입을 추론합니다. let a = [4, false] // let a: (number | boolean)[] 하지만 때로는 조금 더 엄격한 추론이 필요한데, 예를 들어 앞 예에서 a를 배열이 아니라 고정된 길이의 튜플로 취급하고 싶을 수 있습니다. 물론 타입 어서션을 이용해 튜플을 튜플 타입으로 형변환할 수 있습니다. 또는 as const 어서션을 이용해 튜플의 타입을 가능한 한 좁게 추론하는 동시에 읽기 전용으로 만들 수 있습니다. 타입 어서션을 사용하지 않고 추론 범위도 좁히지도..
컴패니언 객체 패턴 컴패니언 객체 패턴(companion object pattern)은 스칼라에서 유래한 기능으로, 같은 이름을 공유하는 객체와 클래스를 쌍으로 연결합니다. TypeScript에는 타입과 객체를 쌍으로 묶는 비슷한 기능의 비슷한 패턴이 존재하는데 이 역시도 컴패니언 객체 패턴이라 부르기로 하겠습니다. 다음은 컴패니언 객체 패턴의 예입니다. type Currency = { unit: 'EUR' | 'GBP' | 'JPY' | 'USD' value: number } let Currency = { DEFAULT: 'EUR', from(value: number, unit = Currency.DEFAULT): Currency { return {unit, value} } } TypeScript에서 ..
매핑된 타입 TypeScript는 더 안전한 nextDay 타입을 선언할 수 있는 더 강력한 두 번째 방법도 제공합니다. 바로 매핑된 타입(mapped type)입니다. 매핑된 타입을 이용해 nextDay가 DayOfTheWeek를 키로, Day를 값으로 갖는 객체라고 선언해 보겠습니다. type DayOfTheWeek = 'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri' type Day = DayOfTheWeek | 'Sat' | 'Sun' let nextDay: {[K in DayOfTheWeek]} = { } 다음과 같은 유용한 에러 메시지를 바로 얻을 수 있습니다. '{}' 형식에 '{ Mon: any; Tue: any; Wed: any; Thu: any; Fri: any; }'..
Record 타입 TypeScript의 내장 Record 타입을 이용하면 무언가를 매핑하는 용도로 객체를 활용할 수 있습니다. 객체가 특정 키 집합을 정의하도록 강제하는 방법이 두 가지 있는데, 바로 Record 타입이 그 첫 번째 방법입니다. Record를 이용해 한 주의 각 요일을 다음 요일로 매핑하도록 만들어보겠습니다. Record를 이용하면 nextDay의 키와 값에 제한을 추가할 수 있습니다. type DayOfTheWeek = 'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri' type Day = DayOfTheWeek | 'Sat' | 'Sun' let nextDay: Record = { Mon: 'Tue' } 위의 코드를 작성하면 다음과 같은 유용한 에러 메시지가 바로 나타..
keyof 연산자 keyof를 이용하면 객체의 모든 키를 문자열 리터럴 타입 유니온으로 얻을 수 있습니다. 다음은 APIResponse에 적용한 예입니다. type APIResponse = { user: { userId: string; friendList: { count: number; friends: { firstName: string; lastName: string; }; }; }; }; type ResponseKeys = keyof APIResponse // type ResponseKeys = "user" type UserKeys = keyof APIResponse['user'] // type UserKeys = "friendList" | "userId" type FriendListKeys = ke..
객체 타입의 타입 연산자 TypeScript는 유니온(|)과 인터섹션(&) 두 연산자 이외에 다른 타입 연산자도 제공합니다. 형태 관련 연산을 수행하는 데 도움을 주는 다양한 연산자를 알아보겠습니다. 키인 연산자 선택한 소셜 미디어 API에서 받은 GraphQL API 응답을 모델링하는 복잡한 중첩 타입이 있다고 가정해 보겠습니다. type APIResponse = { user: { userId: string friendList: { count: number friends: { firstName: string lastName: string } } } } 이 API에서 응답을 받아와 보여줘야 합니다. type APIResponse = { user: { userId: string friendList: { c..
종합성(Totality) 철저 검사라고도 불리는 종합성은 필요한 모든 상황을 제대로 처리했는지 타입 검사기가 검사하는 기능입니다. 종합성은 하스켈, 오캐멀 등 패턴 매칭을 사용하는 언어에서 차용한 기능입니다. TypeScript는 다양한 상황의 모든 가능성을 확인하며, 빠진 상황이 있다면 이를 경고합니다. 실제로 일어날 버그를 방지하는 데 아주 도움 되는 기능입니다. 아래 예를 살펴보겠습니다. type DayOfTheWeek = 'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri' type Day = DayOfTheWeek | 'Sat' | 'Sun' function getNextDay(d: DayOfTheWeek): Day { // 함수에 끝 return 문이 없으며 반환 형식에 'und..
차별된 유니온 타입 TypeScript는 JavaScript가 어떻게 동작하는지 잘 이해하며, 마치 프로그래머가 머리로 프로그램을 추적하듯이 코드로부터 타입을 정제해 낼 수 있습니다. 예를 들어 응용 프로그램의 커스텀 이벤트 시스템을 만든다고 가정합니다. 먼저 몇 가지 이벤트 타입과 이벤트들을 처리할 함수를 정의합니다. KeyBoardEvent는 키보드 이벤트를, MouseControlEvent는 마우스 이벤트를 가리킵니다. type KeyBoardEvent = {value: string} type MouseControlEvent = {value: [number, number]} type FirstEvent = KeyBoardEvent | MouseControlEvent function handle(ev..
