정중식의 개발공부로그

조건문으로 타입만들기, infer

26 Apr 2023 | typeScript

코딩애플강의를 보고 정리했습니다.

조건부로 타입만들기

자바스크립트 삼항연산자처럼 타입스크립트도 똑같이 할 수있다.
extends 키워드와 삼항연산자를 이용하면된다.
extends는 왼쪽이 오른쪽의 성질을 가지고 있냐 라는 뜻이다.

Ex)

type Age<T> = T extends string ? string : unknown;
let age : Age<string> //age는 string 타입
let age2 : Age<number> //age는 unknown 타입

좀 더 심화로 이런식으로 array를 활용해서 타입에 조건문을 걸어줄 수 도있다.

type FirstItem<T> = T extends any[] ? T[0] : any

let age1 :FirstItem<string[]>; // string 타입이 됨
let age2 :FirstItem<number>;  // any 타입이됨

infer 키워드

  • 지금 입력한 타입을 변수로 만들어주는 키워드이다.

Ex)

type Person<T> = T extends infer R ? R : unknown;
type 새타입 = Person<string> // 새타입은 string 타입이다.
  1. infer 키워드는 조건문 안에서만 사용이 가능하다.
  2. infer 우측에 자유롭게 작명해주면 타입을 T에서 유추해서 R이라는 변수에 집어넣으라는 뜻이다.
  3. R을 조건식 안에서 마음대로 사용 가능하다.

등등, 이런식으로 타입파라미터에서 타입을 추출해서쓰고 싶을 때 쓰는 키워드이다.

infer 키워드를 활용하는 예시를 더 알아보자.

  1. array 안에 있던 타입이 어떤 타입인지 뽑아서 변수로 만들어줄 수 있다.
type 타입추출<T> = T extends (infer R)[] ? R : unknown;
type NewType = 타입추출< boolean[] > // NewType 은 boolean 타입이다.
  1. 함수의 return 타입이 어떤 타입인지 뽑아서 변수로 만들어줄 수 있다.
type 타입추출<T> = T extends ( ()=> infer R ) ? R : unknown;
type NewType = 타입추출< () => number > // NewType은 number 타입이다.

Related Posts