Typescript类型体操 - BEM style string

题目

中文

Block，Element，Modifier 方法（BEM）是 CSS 中类的流行命名约定。

例如，块组件用 btn 表示，依赖于块的元素用 btn__price 表示，更改块样式的修饰符将用 btn--big 或者 btn__price--warning表示。

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

English

The Block, Element, Modifier methodology (BEM) is a popular naming convention for classes in CSS.

For example, the block component would be represented as btn, element that depends upon the block would be represented as btn__price, modifier that changes the style of the block would be represented as btn--big or btn__price--warning.

Implement BEM<B, E, M> which generate string union from these three parameters. Where B is a string literal, E and M are string arrays (can be empty).

答案

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

在线演示