Typescript類型體操 - BEM style string

題目

中文

Block,Element,Modifier 方法(BEM)是 CSS 中類的流行命名約定。

例如,塊組件用 btn 表示,依賴於塊的元素用 btn__price 表示,更改塊樣式的修飾符將用 btn--big 或者 btn__price--warning表示。

實現從這三個參數生成字符串聯合的 BEM<B, E, M>。其中 B 是字符串字面量,EM 是字符串數組(可以爲空)。

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]}`}`;

在線演示

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章