코딩애플 Typescript - 조건문으로 타입만들기 & infer

김원종·2024년 5월 31일
1

TypeScript 학습

목록 보기
28/28
post-thumbnail

타입만들 때 초보처럼 type Age = string 이렇게 하드코딩하는 법만 배워봤다.
근데 if 조건문처럼 " 조건에 따라서 이럴 경우 string , 저럴 경우 number " 이런 식으로 타입지정도 가능하다.
하지만 자주 쓰는 내용은 아니기 때문에 이런게 있다고 기억해두고 나중에 필요하면 찾아서 사용하는게 좋은 방법이다.

삼항연산자

js 기본 문법 중에 삼항연산자 라는게 있다.
if문 대용품인데 평소에 if가 들어갈 수 없는 곳들에 간략하게 if문을 넣을 수 있는 방법이다.

조건문 ? 참일때실행할코드 : 거짓일때실행할코드
3 > 1 ? console.log('맞아요') : console.log('아님')

이렇게 if문처럼 사용한다. 타입조건식을 한번 만들어보자.

이렇게 타입파라미터를 입력하면 타입파라미터를 그 자리에 남겨주는 코드를 구성해봣다. 그럼 Age라는 타입을 가져다 사용할때 파라미터에 있는 타입으로 설정되는데 삼항 연산자를 사용해서 T가 string이면 그대로 string을 남기고 아니면 unknown을 남기게 된다.
비교연산자는 extends를 사용한다.


조건문에서 쓸수있는 infer키워드를 배워보자 infer키워드는 타입을 왼쪽에서 추출해준다.

이렇게 array내부의 타입만 뽑아서 사용할수도 있다. T는 string 배열 타입이 될텐데 infer R 에서는 배열표시 앞에 즉 같은 위치에 있는것만 뽑아서 사용하기에 R은 string이 된다.
약간 유용해 보인다 array에서 그 array가 가진 타입을 뽑아서 사용할수있으니 말이다.

함수를 넣으면 함수의 return타입만 뽑아서 사용할수도 있다. 사실 크게 사용할일은 없을것이다. ReturnType이라는 기본 함수를 사용하면 알아서 해준다.

결론은 <>을 이용해서 타입을 집어넣으면 이걸 맘대로 바꾸고 조종하는 기능들을 몇개 배웠는데 사실 쓸 일은 별로 없다. 평소에 코드 짤 땐 변수,함수,클래스에 타입넣는 법이랑 narrowing 정도만 알면 된다.


숙제1) 타입 파라미터로

  1. array 타입을 <> 안에 입력하면

  2. array 타입의 0번째 타입이 string이면 string 타입을 그대로 남겨주고

  3. array 타입의 0번째 타입이 string이 아니면 unknown 을 남겨주려면 어떻게 타입을 만들어놔야할까요?

(동작예시)

let age1 :Age<[string, number]>;
let age2 :Age<[boolean, number]>;
이러면 age1에 마우스 올렸을 때 타입은 string, age2는 타입이 unknown이 되어야합니다.

이걸 만족하는 type Age를 만들어봅시다.

나의 답안

type Infe <T>= T extends (infer R)[] ?R :unknown;
let age1 :Infe<[string, number]>;
let age2 :Infe<[boolean, number]>;

센세 풀이

type Age<T> = T extends [string, ...any] ? T[0] : unknown;
let age1 :Age<[string, number]>;
let age2 :Age<[boolean, number]>;
이러면 정말 age1은 string, age2는 unknown이 됩니다.

숙제2) 함수 타입을 입력하면 함수 파라미터 부분의 타입을 뽑아주는 기계를 만들어보십시오.

타입뽑기<(x :number) => void> //이러면 number가 이 자리에 남음
타입뽑기<(x :string) => void> //이러면 string이 이 자리에 남음
타입뽑기<> 에다가 () => {} 타입을 넣었는데

소괄호 파라미터 타입이 number인 경우 number를 그 자리에 뱉어줘야합니다.

type 타입뽑기<> 라는 타입을 어떻게 만들어야할까요?

나의 답안

type 타입뽑기<T> = T extends infer R ? R : unknown;

type zxc = 타입뽑기<(x :number) => void>;

센세 답안

type 타입뽑기<T> = T extends (x: infer R) => any ? R : any;
type a = 타입뽑기<(x :number) => void> 
이러면 a라는 타입이 number로 잘 남습니다.

참고로 함수만 들어올 수 있게 제한을 두고 싶으면

언제나 T 라는 함수 파라미터 만들 때 extends로 제한을 두면 됩니다. 

profile
개린이

0개의 댓글