TS 에서 const 에 '${}' 를 사용할시 주의사항 (feat. as const)

Node 에서 string 과 string 을 연결할때 ${} 기호를 자주 사용하곤한다.

export const APP = 'app'

export const APP_HEADER = `${APP}-header` // app-header

하지만 일반적으로 const 로 작성된 string 은 리터럴 type 으로 지정이 되는 반면,

${} 가 들어가버리면 string type 으로 지정이 된다.

대부분의 경우 상관이 없겠지만,

APP 과 APP_HEADER 를 하나의 type 으로 사용하고자할때 문제가 된다.

우리가 기대하는건 'app' | 'app-header' 일텐데, 일괄적으로 string 으로 잡혀버린다.

이를 고치기위해서는 ${} 를 사용한 변수뒤에 as const 를 붙여야한다.

export const APP_HEADER = `${APP}-header` as const

${} 를 사용하지않는 경우에는 as const 를 뒤에 안붙여도 자동으로 해당 리터털 type 으로 인식한다.