题目

Github: BemStyleString

块、元素、修饰符方法（BEM）是CSS中一种流行的类命名规范。

例如，块组件可以表示为btn，依赖于该块的元素可以表示为btn__price，改变块样式的修饰符可以表示为btn--big或btn__price--warning。

实现BEM<B, E, M>，从这三个参数生成字符串联合类型。其中B是字符串字面量，E和M是字符串数组（可以为空）。

解题思路

略。

答案

type BEM<B extends string, E extends string[], M extends string[]> =
  `${B}${E extends [] ? '' : `__${E[number]}`}${M extends [] ? '' : `--${M[number]}`}`

验证

type 
cases
 = [
  
Expect
<
Equal
<
BEM
<'btn', ['price'], []>, 'btn__price'>>,
  
Expect
<
Equal
<
BEM
<'btn', ['price'], ['warning', 'success']>, 'btn__price--warning' | 'btn__price--success'>>,
  
Expect
<
Equal
<
BEM
<'btn', [], ['small', 'medium', 'large']>, 'btn--small' | 'btn--medium' | 'btn--large'>>,
]

参考

• 条件类型 Conditional Types
• 模板字面量类型 Template Literal Types