TypeScript/한 입 크기로 잘라먹는 타입스크립트

[타입 조작하기] 템플릿 리터럴 타입

해갈 2023. 7. 20. 20:58

해당 게시글은

강의 사이트, 인프런에서 이정환님이 진행하시는

'한 입 크기로 잘라먹는 타입스크립트' 

들어보며 블로그를 작성하려고 합니다.

다음 게시글 내용은 해당 강의에 핸드북의 내용으로

출처는 다음과 같습니다.

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

 

타입스크립트를 소개합니다 - 타입스크립트 개론

한 입 크기로 잘라먹는 타입스크립트

ts.winterlood.com

 

section8/chapter4.ts 에서 실습을 진행했습니다.

 

템플릿 리터럴 타입

템플릿 리터럴 타입은 타입 조작 기능들 중 가장 단순한 기능으로

템플릿 리터럴을 이용해 특정 패턴을 갖는 String 타입을 만드는 기능입니다.

 

다음과 같은 코드가 있다고 가정합니다.

type Color = "red" | "black" | "green"; ①
type Animal = "dog" | "cat" | "chicken"; ②

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

 

①, ② Color 와 Animal 은 각각 3개의 String Literal 타입으로 이루어진 Union 타입입니다.
③ ColoredAnimal 은 Color 와 Animal 을 조합해 만들 수 있는 모든 가지수의 String Literal 타입으로 이루어진 Union 타입입니다.

 

Color 나 Animal 타입에 String Literal 타입이 추가되어 

경우의 수가 많아질 수록 ColoredAnimal 타입에 추가해야 하는 타입이 점점 많아지게 됩니다.

이럴 때 바로 템플릿 리터럴 타입을 이용하면 좋습니다.

type ColoredAnimal = `${Color}-${Animal}`;