마지막 str에만 에러가 발생합니다. template 문자열 뒤에 띄어쓰기가 없기 때문입니다. 이렇듯 템플릿 리터럴 타입을 사용하면 문자열 변수를 엄격하게 관리할 수 있습니다.

특히 문자열의 조합을 표현할 때 편리합니다. 다음과 같은 상황을 가정해봅시다. 지역으로는 서울(seoul), 수원(suwon), 부산(busan)이 있고, 이동수단으로는 차(car), 자전거(bike), 도보(walk)가 있는 상황입니다. 이들의 조합을 '지역:이동수단'으로 표현하고 싶습니다. 조합은 9가지(3X3)가 나오는데, 템플릿 리터럴이 없다면 'seoul:car' | 'seoul:bike' | 'seoul:walk' | 'suwon:car' | 'suwon:bike' | 'suwon:walk' | 'busan:car' | 'busan:bike' | 'busan:walk'라고 일일이 타이핑해야겠죠? 여기서 지역이나 이동수단의 수가 더 늘어난다면 상상만으로도 끔찍합니다.

템플릿 리터럴 타입을 사용하면 다음과 같이 할 수 있습니다.

type City = 'seoul' | 'suwon' | 'busan';
type Vehicle = 'car' | 'bike' | 'walk';
type ID = `${City}:${Vehicle}`;
const id = 'seoul:walk';