[Type Challenge] BEM style string

문제

https://github.com/type-challenges/type-challenges/blob/main/questions/03326-medium-bem-style-string/README.md

GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge

문제 의도 및 개념정리

• template literal type을 이용할 줄 아는가?
  • 템플릿 리터럴 안에 유니온 타입이 있으면 표현할 수 있는 모든 경우의 수를 다 보여준다.
  • 몰라도 풀 수는 있다.. (알면 굉장히 편하다)

 

내가 생각한 풀이 방법

 

• 템플릿 리터럴 활용, E가 있으면 __, 없으면 --, M은 순회하면서 —
• 빈 배열의 값을 E[0]로 접근했을때 비어있는가? 를 보려면 E[0] extends undefined 로 해야한다.
  • 나는 처음에 never로 하다가 디버깅 해보니 undefined로 나와서 알았다.
  • E[number] extends never 도 됨.

 

실행하지 못했던 이유 및 해결 방법

​

해답

• 얼핏 보면 이게 될까 싶지만, Modifier에서 'blue' | 'red' 를 리턴해 줄 경우 아래처럼 변환된다.
  • '${Block<B>}${Element<E>}blue' | '${Block<B>}${Element<E>}red'

 

• 처음부터 저렇게 우아하게 풀었던것은 아니다. 알아보기는 힘들지만, 내가 처음에 통과했던 코드이다.

• 접근을 굉장히 단순하게 했다. 아래 처럼 생각했었는데, 테스트케이스가 빈약해서 통과가 된 것 같다.
• E에 값이 여러개라면 통과되지 않을 코드였다.

Reference

• https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

 

Medium을 풀면서 느끼는것은, easy를 풀지 못하면 아예 손도 대지 못하겠다 라고 생각이 들었습니다.

1개의 타입을 정의하기 위해 새로운 커스텀 타입들을 만들기도 해야 합니다. 훨씬 익숙해져서 좋습니다.

 

혼자서 Medium을 풀 것이라고는 생각도 못했는데 그래도 처음의 막막함에서는 많이 벗어난것 같습니다!

 

고통을 긍정적으로!! 화이팅!!