Typescript 템플릿 문자열 유형

템플릿 리터럴 유형이란?

Typescript 4.1 이후로 문자열의 타이핑을 크게 향상시킬 수 있습니다. 간단히 요약하자면 Typescript에서 소위 "리터럴 유형"을 정의 할 수 있습니다. 변수를 문자열로 정의하는 대신 허용되는 특정 문자열 집합으로 유형을 좁힐 수 있습니다.

// Define a mutable string as 'Literal Type'.
let key: "name" | "department" = "name";

// This works, as 'department' is part of the type.
key = "department";
// Won't work, as it's not define in the union type.
key = "company";

// Of course, the same applies for functions.
function getKey(): "name" | "department" {
  return Math.random() <= 0.5 ? "name" : "department";
}

Typescript 4.1부터이 개념이 더욱 발전되었습니다. Javascript에서 "템플릿 리터럴 문자열"을 영감으로 사용하면 Typescript의 리터럴 유형에 동일한 구문을 적용 할 수 있습니다. 주요 차이점은 "템플릿 리터럴 유형"을 사용하면 유형 자체가이 모양에 대한 매개 변수를 취할 수 있으므로 훨씬 더 많은 유연성을 얻을 수 있다는 것입니다. 개념은 제네릭과 유사하지만 특정 값이 필요하다는 점에서 약간 다릅니다.

// Define a Literal Type
type State = "ready";

// Nice, isn't it? As in Javascript's 
// 'template literal strings', we can
// reuse the same syntax for TS.
//
// The create type here is now 'Key-ready'.
type Key = `key-${State}`;

// This of course works for union types as well.
// Let's take these non-descriptive types for a 
// quick demo:
type GraphState = "sleep" | "ready" | "error";
type MachineState = "booting" | "running";

// And here's the 'template literal type':
type EntityState = `ES-${GraphState | MachineState}`;

// The possible combinations therefore 
// work out like this:
//
// type EntityState = 'ES-sleep' 
//  | 'ES-ready'
//  | 'ES-error'
//  | 'ES-booting'
//  | 'ES-running'

Typescript 4.3에는 더 많은 기능이 있습니다.

이 글을 쓰는 동안 템플릿 리터럴 유형에 대한 추가 개선 사항을 포함하는 Typescript 4.3의 릴리스 후보가 출시되었습니다.

이제 유형 시스템이 훨씬 더 동적이고 올바른 유형을 더 잘 추론 할 수 있습니다. 이러한 최신 변경 사항은 템플릿 문자열 유형을 더욱 성숙시킵니다.

// This example is taken 1:1 from 
// Typescript's 4.3 announcement.
// Please check out the link in the
// addendum to see all examples!

declare let s: string;
declare function f<T extends string>(x: T): T;

// Previously: string
// Now       : `hello-${string}`
let x2 = f(`hello ${s}`);

결론

보시다시피 Typescript는 동적 유형을 정의 할 때 매우 강력한 언어입니다. 이것은 특히 문자열 기반 유형에 해당됩니다. 버전 4.3의 최신 변경 사항으로 인해 유형 시스템은 그 어느 때보 다 올바른 유형을 더 잘 추론 할 수 있으므로 Typescript로 작업하는 것이 즐겁습니다.