TS 에서 작성한 string 리터럴들을 type 으로 활용하기

React 앱을 작성하다보면, className 이나 id 를 고유한 파일안에 const 로 정리해놓는것이 좋다.

추후 event listener 로 id 나 classname 또는 dataset 을 확인할때 유용하기때문이다.

나는 className 과 id 를 따로 구분하지않고 그냥 AppNames 라는 ts 파일안에 다 몰아서 적었다.

어짜피 id 면 suffix 를 숫자로 추후 붙여주거나 할수있기때문이다.

/* AppNames.ts */

export const APP = 'app'
export const APP_HEADER = `${APP}-header` as const
export const APP_FOOTER = `${APP}-footer` as const

참조 : https://leestrument.tistory.com/entry/TS-에서-const-에-를-사용할시-주의사항-feat-as-const

 

위에서 ${} 를 사용한 리터럴뒤에 as const 를 붙인 이유는 위의 참조를 읽어보기를.

 

하나의 객체로 이들을 묶어서, 그 객체를 export 해버릴수도있겠지만,

각 tsx 에서 파일에서는 하나의 이름만이 주로 필요하기에 각각으로 export 하여 작성하였다.

하지만 이렇게 각각을 작성한것들을, 결과적으로 묶어서 AppName 이라는 type 으로 만들고싶을수있다.

 

이때는 AppName.ts 라는 type 을 저장해줄 파일을 생성한뒤

아래와 같이 작성한다.

이제 AppName 은 'app' 'app-header' 'app-footer' 이며, IDE 는 

내가 AppName type 이 들어가야할 자리에 잘못된 string 을 넣을경우 알려줄것이다.

import * as AppNames from './AppNames'

export type AppName = typeof AppNames[keyof typeof AppNames]