TypeScript - if else in types

TypeScript 대표이미지

 

if else in types

if 조건문 처럼 "조건에 따라서 이럴 경우 string, 저럴 경우 number" 와 같이 타입지정이 가능하다.

 

조건부로 타입만들기

type Age<T> = T;

 

위 코드에서 Age<number>라고 쓰면 number가 된다.

 

이걸 "타입 파라미터 자리에 string 타입을 집어넣으면 string을 부여하고 그게 아니면 전부 unknow 부여한다" 에 조건문으로 바꿔 볼 것이다.

 

타입 조건식은 주로 extends 키워드와 삼항연산자를 이용한다. extends는 왼쪽이 오른쪽의 성질을 가지고 있냐 라는 뜻으로 사용할 수 있기 때문에 조건식 용도로 사용가능하다. 

 

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

 

위 코드와 같이 extends와 삼항연산자를 이용한 방법이다.

 

let age1 :FirstItem<string[]>;
let age2 :FirstItem<number>;

 

위 코드를 파라미터로 array 자료를 입력하면 array의 첫 자료의 타입을 그대로 남겨주고, array 자료가 아니라 다른걸 입력하면 any 타입을 남겨주는 타입을 남겨주는 타입을 만들면 되나?

 

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

let age1 :FirstItem<string[]>;
let age2 :FirstItem<number>;

 

위 방법처럼 하면 age1의 타입은 string, age2의 타입은 any가 된다.

 

infer 키워드

조건문에 사용할 수 있는 infer 키워드가 있다. infer 키워드는 지금 입력한 타입을 변수로 만들어주는 키워드이다.

 

type Person<T> = T extends infer R ? R : unknown; 
type 새타입 = Person<string> // 새타입은 string 타입입니다

 

1. infer 키워드는 조건문 안에서만 사용이 가능하다.
2. infer 우측에 자유롭게 작명해주면 타입을 T에서 유추해서 R이라는 변수에 집어넣는다는 뜻이다.
3. R을 조건식 안에서 맘대로 사용가능하다.

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

 

자주 사용하는 예제를 알아보자.

 

1. array 안에 있던 타입이 어떤 타입인지 뽑아서 변수로 만들어줄 수 있다.

type 타입추출<T> = T extends (infer R)[] ? R : unknown; 
type NewType = 타입추출< boolean[] > // NewType 은 boolean 타입입니다

 

2. 함수의 return 타입이 어떤 타입인지 뽑아서 변수로 만들어줄 수 있다.

type 타입추출<T> = T extends ( ()=> infer R ) ? R : unknown; 
type NewType = 타입추출< () => number > // NewType은 number 타입입니다

 

타입파라미터에 <함수>를 집어넣었다. 그 타입파라미터에 있는 return 타입을 쏙 뽑아서 R이라는 변수에 담는 코드이다. 일정한 규칙이 있다기 보다 그냥 타입을 추출하는 식으로 이해하면 된다.