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}`;