Typescript: 조건부 유형

조건부 유형


lucaspaganini.com에서 이 기사 및 다른 많은 기사를 참조하십시오.

TypeScript의 조건부 유형은 매우 강력하여 유형 함수를 만들 수 있습니다. 보여드리겠습니다.
A , B 및 C 의 3가지 유형이 있다고 가정해 보겠습니다.

type A
type B
type C

그들은 무엇이든 될 수 있지만 A는 string이고 B는 number이고 C는 A와 B의 합집합입니다.

type A = string;
type B = number;
type C = A | B;

이제 string 및 number를 리터럴 숫자 표현으로 변환하려고 합니다.
string는 1이어야 합니다.

type NumberA = 1;
type NumberB = number;
type NumberC = 1 | number;

number 는 2 이어야 하고 다른 항목은 0 이어야 합니다.

type NumberA = 1;
type NumberB = 2;
type NumberC = 1 | 2;

이것이 함수라면 단순히 조건문을 사용하여 코드를 구동할 것입니다. 다음과 같이 표시됩니다.

const ToNumber = (T) => (T === string ? 1 : T === number ? 2 : 0);

이 구문은 유형에는 작동하지 않지만 매우 가깝습니다.

type ToNumber = (T) =>
  T === string
  ? 1
  : T === number
  ? 2
  : 0

화살표 대신 등호를 사용합니다.

type ToNumber(T) =
  T === string
  ? 1
  : T === number
  ? 2
  : 0

괄호 대신 꺾쇠 괄호를 사용합니다.

type ToNumber<T> =
  T === string
  ? 1
  : T === number
  ? 2
  : 0

그리고 triple equals 대신에 extends를 사용합니다.

type ToNumber<T> = T extends string ? 1 : T extends number ? 2 : 0;

우리는 TypeScript에 T가 string와 같은지 묻는 것이 아니라 T가 string의 하위 집합인지 묻는 것입니다.

여기에는 "abc" 와 같은 리터럴 문자열 유형도 포함됩니다.

type A = string
type B = number
type C = A | B

ToNumber<A> // -> 1
ToNumber<B> // -> 2
ToNumber<C> // -> 1 | 2
ToNumber<boolean> // -> 0
ToNumber<"abc"> // -> 1

결론

참조는 아래에 있습니다.

이 기사는 TypeScript 축소 시리즈의 일부입니다. 내 블로그에서 전체 시리즈를 무료로 읽을 수 있습니다.

좋아요 남겨주시고, 좋은 하루 보내시고, 곧 뵙겠습니다!

참조

Conditional Types TypeScript Documentation