模板字面量类型

• TypeScript 4.1 版本新功能
• 提供了连接字符串字面量的能力
• 可以把非字符串基本类型的字面量转换为对应的字符串字面量类型

// css 的 margin、padding 属性

type Direction = 'left' | 'right' | 'top' | 'bottom';
type CssPadding = `padding-${Direction}`;
type MarginPadding = `margin-${Direction}`;

// 实用例子
type EventName<T extends string> = `${T}Changed`;
type Concat<S1 extends string, S2 extends string> = `${S1}-${S2}`;
type ToString<T extends string | number | boolean | bigint> = `${T}`;
type T0 = EventName<'foo'>; // 'fooChanged'
type T1 = Concat<'Hello', 'World'>; // 'Hello-World'
type T2 = ToString<'阿宝哥' | 666 | true | -1234n>; // "阿宝哥" | "true" | "666" | "-1234"

• 当类型占位符的实际类型是联合类型（A ｜ B ｜ C）的话，就会被自动展开

type T3 = EventName<'foo' | 'bar' | 'baz'>;
// "fooChanged" | "barChanged" | "bazChanged"
type T4 = Concat<'top' | 'bottom', 'left' | 'right'>;
// "top-left" | "top-right" | "bottom-left" | "bottom-right"