Front-End(Web)/Typescript

<작성중>[Typescript] Utility Type(유틸리티 타입)

ttaeng_99 2022. 7. 25. 03:50
반응형

이전, 타입스크립트 입문 강의를 들으며 기본적인 개념들을 정리하는 시간을 가졌다.

시리즈로 고급 강의도 존재하며, 잘 알지 못했던 고급 타입들까지 공부해보고자 다시 수강을 시작하게 되었다.

 

먼저, Typescript에서 공통 타입 변환을 용이하게 해주는 유틸리티 타입들에 대해 정리해보고자 한다!

* 이 포스팅은, 인프런 캡틴판교 님의 '타입스크립트 실전' 강의를 듣고 정리한 내용을 바탕으로 작성하는 시리즈입니다. (링크)

 

실전 프로젝트로 배우는 타입스크립트 - 인프런 | 강의

"타입스크립트 입문 - 기초부터 실전까지"의 실전 활용편입니다. 입문 편을 수강하지 않으신 분들은 입문 편부터 수강해주세요 😄, - 강의 소개 | 인프런...

www.inflearn.com

 


 

💙 Utility Type(유틸리티 타입)

유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다. Generic Type(제네릭 타입)으로도 불린다.

기존의 인터페이스, 제네릭 등 문법으로 충분히 타입변환이 가능하나, 유틸리티 타입을 쓰면 훨씬 더 간결한 타이핑이 가능하다.

 

1. Partial<T>

Partial은 T의 모든 프로퍼티를 선택적으로 타입을 생성한다. 이 유틸리티는 T의 모든 하위 타입집합을 나타내는 타입을 반환한다.

interface Address {
  email: string;
  address: string;
}

type MayHaveEmail = Partial<Address>;
const me: MayHaveEmail = {}; // 가능
const you: MayHaveEmail = { email: 'test@abc.com' }; // 가능
const all: MayHaveEmail = { email: 'capt@hero.com', address: 'Pangyo' }; // 가능

 

 

반응형