模板字面量类型

作用：减少 ts 重复代码

type CssPadding = "padding-left" | "padding-right" | "padding-top" | "padding-bottom"

type MarginPadding = "margin-left" | "margin-right" | "margin-top" | "margin-bottom"

上面两个 type 里面的 left right top bottom 都是重复代码

简化

type Direction = 'left | 'right' | 'top' | 'bottom'

type CssPadding = `padding-${Direction}`
type MarginPadding = `margin-${Direction}`

语法

`${T}`T 是类型变量可以是 string number boolean bigint

传入基本类型

type EvenName<T extends string> = `${T}Changed`
type Concat<S1 extends string, S2 extends string> = `${S1}-${S2}`

type T0 = EvenName<'foo'> // 'fooChanged'
type T1 = Concat<'hello', 'world'> // 'hello-world'

传入联合类型

type T3 = EvenName<'foo' | 'bar' | 'baz'> 
// 'fooChanged' | 'barChanged' | 'bazChanged'

type T4 = Concat<'top' | 'bottom', 'left' | 'right'>
// 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'

对于模板字面量类型来说如果传入的类型占位符的实际类型是联合类型
1). 单个占位符的联合类型自动展开

`[${T}]` 如果 T 是 A | B | C
那么就会变成 `[${A}]` | `[${B}]` | `[${C}]`

2). 多个占位符的联合类型解析为交叉

// S1 => A | B  S2 => C | D
`${S1}-${S2}`
结果为 `${A}-${C}` | `${A}-${D}` | `${B}-${C}` | `${B}-${D}`