답변.

질문의 역사

타입스크립트는 오랜 시간 동안 개별 문자열이나 숫자 값에 대한 리터럴 타입을 설명할 수 있었으나, 템플릿 리터럴이 등장하면서 특정 문자열 패턴에 대한 타입화의 필요성이 생겼습니다. 템플릿 리터럴 타입은 문자열의 템플릿 결합에 기반한 타입을 설명할 수 있는 기능을 추가하여 문자열 값의 구조에 대한 정적 검증을 제공합니다.

문제

문자열이 특정 형식(예: 'user_42')에 맞는지 확인하는 것은 일반적인 string 타입으로는 불가능합니다. 너무 일반적이기 때문입니다. 템플릿 타입 없이는 컴파일러가 문자열이 엄격하게 정의된 패턴에 맞는지 보장할 수 없습니다.

해결책

템플릿 리터럴 타입을 사용하면 컴파일 단계에서 복잡한 문자열 타입을 형성하고 특정 템플릿에 대한 엄격한 검증을 보장할 수 있습니다.

코드 예시:

type UserId = `user_${number}`;

function loadUser(id: UserId) {
  // ...
}

loadUser('user_123'); // 유효
loadUser('admin_123'); // 컴파일 오류

주요 특징:

리터럴 결합을 기반으로 한 문자열 타입 형성
객체 키에 대한 조합, 중첩 및 조작 지원
문자열 식별자, URL 및 기타 구조를 위한 타입 안전성 증가

의도적 오류 질문들.

템플릿 리터럴 타입은 number/literal에만 사용할 수 있습니까? 템플릿에 사용자 정의 문자열 리터럴을 사용할 수 있습니까?

모든 리터럴 타입(문자열, 숫자, 결합 등)을 사용할 수 있습니다:

type EventType = `event_${'click' | 'hover'}`; // event_click | event_hover

함수가 템플릿 리터럴 타입을 기대하는 경우 일반 문자열을 전달할 수 있습니까?

아니요, 타입이 명시적으로 템플릿 리터럴을 기대하는 경우 단순한 string은 적합하지 않습니다:

function handler(type: `btn_${string}`) {}
handler('btn_click'); // 옳음
handler('button'); // 컴파일 오류

템플릿 리터럴 타입이 매핑된 타입과 keyof와 함께 작동합니까?

네, 템플릿 리터럴 타입은 매핑된 타입 및 객체 키와 훌륭하게 결합됩니다:

const colors = {red: 1, blue: 2};
type ColorKey = keyof typeof colors;
type ColorClass = `color-${ColorKey}`; // color-red | color-blue

타입 오류 및 안티 패턴

어떤 string에 적합한 곳에서 템플릿 타입 사용
유연성을 남기지 않는 과도한 템플릿 타입
컴파일러가 제어하지 않는 런타임 값에 대한 타입 결합

실제 사례

부정적 사례

API가 'user_XXX' 형식의 식별자를 받고, 함수가 타입이 지정되지 않아 어떤 문자열도 전달할 수 있으며, 서버에서 오류가 발생할 경우 버그가 발생합니다.

장점:

값에 대한 제한이 없음

단점:

팀이 잘못된 문자열을 전달하여 오류 발생; 테스트가 표면적임

긍정적 사례

타입 UserId = user_${number}를 사용하여 컴파일 전에 함수의 인수의 올바름을 보장하고 서버에 대한 안전한 요청을 보장합니다.