[TS] 타입스크립트 제약 조건과 조건부 타입

식별자 영역 / 타입 구현 영역

---

type, interface 키워드를 사용한 타입 선언은 = 등호와 {} 중괄호를 기준으로 식별자(좌), 타입 구현(우) 영역으로 구분할 수 있다.

// type 식별자 = 타입 구현
type MyType = string | number;

// interface 식별자 { 타입 구현 }
interface User {
  name: string;
  age: number;
}

 

제약 조건 | Constraints

---

식별자 영역에서 사용하는 extends는 제약 조건을 추가할 수 있다. 기본적으로 제네릭엔 모든 타입이 올 수 있지만 제약 조건을 이용해 특정 타입으로 제한할 수 있다.

기본 문법 : T extends U — T는 U의 부분 집합(T ⊆ U)으로 볼 수 있음

ex) 64 extends number : O — 64는 number의 부분 집합이므로
ex) number extends 64 : X — 64보다 number가 더 큰 개념이므로

 

// string, number만 받도록 제네릭(T) 타입 제약
interface User<T extends string | number> {
  name: string;
  age: T;
}

const userA: User<number> = { name: 'Smith', age: 32 }; // OK
const userA: User<string> = { name: 'Smith', age: '32' }; // OK

 

제약 조건을 이용해 제네릭 타입이 배열임을 알려줄 수 있다. 제약 조건을 사용하지 않으면 제네릭 타입(T)이 배열인지 타입스크립트는 알지 못하기 때문에 ...T 같은 Rest 문법을 사용하면 에러가 발생한다.

// 타입 시스템에 Array.push를 구현한 예시
type Push1<T, U> = [...T, U]; // Error! A rest element type must be an array type

type Push2<T extends unknown[], U> = [...T, U];
type Result = Push2<[1, 2], '3'>; // [1, 2, '3']

 

제네릭 타입에 length 같은 특정 프로퍼티가 있다는 걸 알려줄 때도 제약 조건을 사용한다. 제약 조건 없이 사용하면 제네릭 타입에 length 프로퍼티가 있는지 타입스크립트가 알지 못하기 때문에 에러가 발생한다.

// 주어진 배열의 길이를 반환하는 제네릭 Length
type Length1<T> = T['length']; // Error! Type ‘length’ cannot be used to index type ‘T’

type Length2<T extends { length: number }> = T['length'];
type T0 = Length2<[1, 2, 3]>; // 3

// T를 배열로 지정해도 length 프로퍼티를 사용할 수 있다
type Length3<T extends unknown[]> = T['length'];
type T1 = Length3<[1, 2]>; // 2

 

💡 타입 매개변수에도 = 등호를 사용해 기본값을 지정할 수 있다. 제네릭을 선택적으로 받는 상황에서 사용한다. 아래는 K가 주어지지 않은 경우를 대비해 K의 기본값을 keyof T로 지정한 예시(참고).

type MyType<T, K extends keyof T = keyof T> = T & { ... }

 

조건부 타입 | Conditional Types

---

타입 구현 영역에서 사용하는 extends는 삼항 연산자를 이용해 조건부 타입을 추가할 수 있다. 제네릭이 가지는 타입 종류에 따라(조건에 따라) 다른 값을 지정할 때 유용하다.

기본 문법 : T extends U ? X : Y — T가 U에 할당 가능하면(부분 집합이면) X, 아니면 Y 리턴

 

💡 T가 유니온일 때 T extends U 구조를 사용하면, 유니온 T의 각 요소들을 순회하면서 조건 적용

// 식별자 영역(좌)에서 C 타입은 boolean으로 제한(제약 조건)
// 타입 구현 영역(우)에서 C 타입이 true면 T 반환, false면 F 반환(조건부 타입)
type If<C extends boolean, T, F> = C extends true ? T : F;
type A = If<true, 'a', 'b'>; // 'a'
type B = If<false, 'a', 'b'>; // 'b'

// Exclude 내장 유틸 타입을 구현한 예시. T가 U에 할당될 수 없는 요소만 반환
// (T0) T의 'a'는 U의 'a'에 할당할 수 있으므로 제외(never)
// (T1) T의 'a','b'는 U의 'a','b'에 할당할 수 있으므로 제외(never)
type MyExclude<T, U> = T extends U ? never : T;
type T0 = Exclude<'a' | 'b' | 'c', 'a'>; // "b" | "c"
type T1 = Exclude<'a' | 'b' | 'c', 'a' | 'b'>; // "c"

 

배열로된 제네릭 타입을 T[number] 로 접근하면(인덱스 타입) T 배열에 있는 모든 요소들의 유니온을 반환한다. T가 [1, 2, 3] 이라면 T[number]는 1 | 2 | 3을 반환한다. 인덱스 타입이 반환한 유니온에 조건부 타입을 사용하면 특정 값이 배열 요소에 포함됐는지 확인할 수 있다. ex) U extends T[number]

// 타입 시스템에 Array.includes를 구현한 예시
// 식별자 영역(좌)에서 T 타입을 배열로 제한(제약 조건)
// 타입 구현 영역(우)에서 U 타입이 T 배열 요소에 포함된다면 true 반환, 아니면 false 반환(조건부 타입)
type Includes<T extends unknown[], U> = U extends T[number] ? true : false;
type HasD = Includes<['A', 'B', 'C'], 'D'>; // false

 

T[number] 인덱스 타입과 조건부 타입을 이용해 배열의 첫번째 요소를 반환하는 유틸리티를 구현할 수 있다. 빈 배열이 온다면 T[0]은 동작하지 않기 때문에 조건부 타입으로 빈 배열인지 확인하고 분기를 나눠야 한다.

type First<T extends any[]> = T extends [] ? never : T[0];
type T0 = First<[1, 2, 3]> // 1
type T1 = First<[]> // never

 

💡 never 타입은 어떠한 값도 가질 수 없기 때문에(빈 타입) [] 와 never[]는 동일하다고 간주한다.

 

조건부 타입을 지정할 때 아래처럼 삼항 연산자를 연속해서 사용할 수 있다

type MyType<T> =
  T extends string ? 'Str' :
    T extends number ? 'Num' :
      T extends boolean ? 'Boo' :
        T extends undefined ? 'Und' :
          T extends null ? 'Nul' :
            'Obj';

 

타입 추론 | Infer

---

infer 키워드를 사용해 타입 추론 여부를 확인할 수 있다. TS 엔진이 타입을 추론할 수 있도록 하고 그 값은 제네릭 타입(U 등)에 할당한다. infer 키워드는 제약 조건 extends가 아닌, 조건부 타입 extends 절에서만 사용할 수 있고, 추론한 변수는(제네릭 타입) true 분기에서만 사용할 수 있다.

기본 문법 : T extends infer U ? U : T — U가 추론 가능한 타입이면 U 리턴, 아니면 T 리턴

 

// R은 제네릭으로 받은 number가 되고, number 타입은 추론할 수 있으므로 R을 반환한다.
// 즉 MyType<number>는 number를 반환하므로, 변수 a에 number 타입인 888을 할당할 수 있다.
type MyType<T> = T extends infer R ? R : null;
const a: MyType<number> = 888; // OK

// 함수 파라미터를 타입으로 반환하는 Paramters 내장 유틸리티 구현 예시
// T가 함수의 형태가 아니라면 false 분기를 타서 never 반환(무시)
// T가 함수의 형태라면 파라미터 타입을 매개변수 R에 할당하고 true 분기에서 R 반환
type Parameters<T> = T extends (...args: infer R) => any ? R : never;

type T0 = Parameters<() => string>; // []
type T1 = Parameters<(s: string) => void>; // [string]

declare function f1(arg: { a: number; b: string }): void;
type T2 = Parameters<typeof f1>; // [{a: number, b: string}]
type T3 = Parameters<string>; // Error! Type 'string' does not satisfy the constraint '(...args: any) => any'

 

Promise<Type>은 Type을 Promise로 래핑한 타입이다. 반대로 Promise 등으로 래핑한 타입을 얻어내는 것을 언래핑이라고 한다(타입 내부에 있는 타입을 얻어내는 것). 타입스크립트는 조건부 타입에 대한 타입 추론을 제공한다. 따라서 Promise로 감싼 타입을 추론할 수 있다면 R 매개변수에 할당되도록 할 수 있다. R 매개변수는 true 분기(... ? true : false)에서 사용할 수 있다.

// TS 4.5에 새로 추가된 Awaited 유틸리티 타입 구현 예시
// Promise 내부에 어떤 타입이 올지 모르므로 infer 키워드를 이용해 타입 추론
// T가 Promise가 아니라면 T를 반환하고(false 분기),
// T가 Promise고 Promise로 감싼 타입을 추론할 수 있다면 R 매개변수에 추론한 타입 할당
// Promise<Promise<string>> 처럼 다중 래핑했을 수 있으므로 true 분기에서 재귀적으로 언래핑
type Awaited<T> = T extends Promise<infer R> ? Awaited<R> : T;

type UnWrap1 = Awaited<string>; // string
type UnWrap2 = Awaited<Promise<number>>; // number

 

T가 배열이라면 Rest 문법과 infer 키워드를 함께 사용할 수도 있다.

// A, B 제네릭을 받아 동일한 타입인지 확인하는 유틸리티 함수
type Equal<A, B> = A extends B ? (B extends A ? true : false) : false;

type Includes<T extends unknown[], U> = T extends [infer F, ...infer R]
  ? Equal<F, U> extends true // F와 U가 같다면 true 반환, 아니면 R과 U를 넘겨서 재귀호출
    ? true
    : Includes<R, U>
  : false; // T가 빈배열이라면 false 반환

type T0 = Includes<['a', 1, 2, 3], 'a'>; // true

 

레퍼런스

---

• 한눈에 보는 타입스크립트(updated)
• Type Challenges Solutions
• Typescript 유틸리티 클래스 파헤치기
• TypeScript 타입 정의 읽기 - 몇 가지만 알면 쉬워요

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요