문제
Block,Element,Modifier 방법론은 css 클래스에 있어 유명한 네이밍 컨벤션이다
예를 들어, btn같은 컴포넌트는 block으로, btn__price같이 블록에 의존하는 것은 element로, btn--big나 btn__price--warning같이 block의 스타일을 바꾸는 것은 Modifier으로 나타낸다.
세 파라미터를 받아 string 유니온 타입을 생성하는 BEM<B, E, M>를 구현해라, B는 string 리터럴이며, E와 M은 string 배열이다(비어있을 수 있음)
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 btnprice, modifier that changes the style of the block would be represented as btn--big or btnprice--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['length'] extends 0?'':`__${E[number]}`}${M['length'] extends 0?'':`--${M[number]}`}`
array[number] 를 통한 union 타입을 통해 구현했다.
각각이 빈 배열이면 prefix를 붙이지 않는 방식을 사용했다.
다른 사람의 풀이
대부분 비슷한 방식으로 문제를 해결하였다.
