題目
中文
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]}`}`;