전체 글

개발자 린다씨
👶 TypeScript

조건부 타입 - 분배적 조건부

분배적 조건부 TypeScript에선 지금까지 살펴본 예에서처럼 간단한 조건을 다양한 방식으로 표현할 수 있습니다. 이는 분배 법칙(distributive law)을 따르기 때문입니다. 즉 왼쪽의 표현식은 오른쪽의 표현식과 동일합니다. 아래의 표현식은 다음과 같습니다. string extends T ? A : B string extends T ? A : B (string | number) extends T ? A : B (string extends T ? A : B) | (number extends T ? A : B) (string | number | boolean) extends T ? A : B (string extends T ? A : B) | (number extends T ? A : B) | (..

👶 TypeScript

조건부 타입

조건부 타입 조건부 타입은 TypeScript가 제공하는 기능 중에서도 가장 독특하다고 할 수 있습니다. 조건부 타입의 의미를 말로 풀어보자면 "U와 V 타입에 의존하는 T 타입을 선언하라. U

👶 TypeScript

고급 함수 타입들 - 사용자 정의 타입 안전 장치

사용자 정의 타입 안전장치(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

고급 함수 타입들 - 튜플의 타입 추론 개선

튜플의 타입 추론 개선 TypeScript는 튜플을 선언할 때 튜플의 타입에 관대한 편입니다. 튜플의 길이, 그리고 어떤 위치에 어떤 타입이 들어있는지는 무시하고 주어진 상황에서 제공할 수 있는 가장 일반적인 타입으로 튜플의 타입을 추론합니다. let a = [4, false] // let a: (number | boolean)[] 하지만 때로는 조금 더 엄격한 추론이 필요한데, 예를 들어 앞 예에서 a를 배열이 아니라 고정된 길이의 튜플로 취급하고 싶을 수 있습니다. 물론 타입 어서션을 이용해 튜플을 튜플 타입으로 형변환할 수 있습니다. 또는 as const 어서션을 이용해 튜플의 타입을 가능한 한 좁게 추론하는 동시에 읽기 전용으로 만들 수 있습니다. 타입 어서션을 사용하지 않고 추론 범위도 좁히지도..

👶 TypeScript

컴패니언 객체 패턴(companion object pattern)

컴패니언 객체 패턴 컴패니언 객체 패턴(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

매핑된 타입(mapped type)

매핑된 타입 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; }'..

👶 TypeScript

Record 타입

Record 타입 TypeScript의 내장 Record 타입을 이용하면 무언가를 매핑하는 용도로 객체를 활용할 수 있습니다. 객체가 특정 키 집합을 정의하도록 강제하는 방법이 두 가지 있는데, 바로 Record 타입이 그 첫 번째 방법입니다. Record를 이용해 한 주의 각 요일을 다음 요일로 매핑하도록 만들어보겠습니다. Record를 이용하면 nextDay의 키와 값에 제한을 추가할 수 있습니다. type DayOfTheWeek = 'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri' type Day = DayOfTheWeek | 'Sat' | 'Sun' let nextDay: Record = { Mon: 'Tue' } 위의 코드를 작성하면 다음과 같은 유용한 에러 메시지가 바로 나타..

👶 TypeScript

객체 타입의 타입 연산자 - keyof 연산자

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

객체 타입의 타입 연산자 - 키인 연산자

객체 타입의 타입 연산자 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..

개발자 린다씨
Cozy_Linda