[TypeScript] 타입 조작 - 템플릿 리터럴 타입

🐾 타입 조작

 

 

 

 

---

🐾 템플릿 리터럴 타입

string literal 타입을 기반으로 특정 패턴을 갖는 문자열 타입을 만드는 기능

 

type Color = 'red' | 'black' | 'green';

type Animal = 'dog' | 'cat' | 'chicken';

위 두 코드를 혼합하여 색과 동물을 만들어 내는 타입을 만든다고 가정하자.

type ColoredAnimal = `red-dog` | 'red-cat' | 'red-chicken' | 'black-dog' ... ;

ColoredAnimal은 Color와 Animal을 조합해 만들 수 있는 모든 가지수의 string literal 타입으로 이루어진 union 타입이다.

여기서 Color나 Animal 타입에 string literal 타입이 추가되어 경우의  수가 많아질 수록 ColoredAnimal 타입에 추가되는 타입 또한 많아진다.

이러한 경우를 해결하기 위해 템플릿 리터럴 타입을 이용한다.

 

 

 

 

 

🐾 템플릿 리터럴 타입 사용하기

// Color나 Animal 타입에 string literal 타입이 추가되어 경우의 수가 많아질수록 
// ColoredAnimal 타입에 추가해야하는 타입이 점점 많아짐
// -> 템플릿 리터럴 타입 이용
type ColoredAnimal = `${Color}-${Animal}`;

ColoredAnimal 타입을 따르는 변수를 만들어보면 자동으로 조합이 완성되어 있다.

 

 

 

 

 

 

 

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 인프런 | 강의