안녕하세요!
오늘은 TS 4.1 부터 사용할 수 있게된 Template Literal Types에 대해 말씀드리려고 합니다.
2020년 11월에 나온 기능이지만 아직 개발자들 사이에서 크게 공유된 것 같지 않아서
함게 공유해보려고 합니다!
해당 내용은 타입스트립트 핸드북 - Template Literal-types 을 참고 하였습니다!
1. Template Literal 이란?
템플릿 리터럴은 ' ` ' (grave accent) 로 감싸진 문자열 리터럴로서 여러 줄로 이뤄진 문자열과 문자 보간기능을 표현할 수 있습니다.
일반적으로 JS에서 스트링을 표현하고자 한다면 주로 ( ' ) 문자나 ( " ) 문자를 사용합니다.
Single/Double quotation 이라고 부르죠!
하지만 템플릿 리터럴은 똑같이 스트링을 표현하지만 grave accent 라고 부르는 ( ` ) 문자로 감싸진 스트링을 사용합니다.
그럼 어떤점이 다를까요?
1-1. 줄 바꿈 표현
첫 번째로는 줄 바꿈을 좀 더 편하게 표현할 수 있습니다.
일반적으로 스트링에서 줄 바꿈을 표현할 때 이런식으로 '\n' 문자를 친히 삽입해드려야 했었죠!
하지만 템플릿 리터럴을 사용한다면?
이렇게 개발자가 따로 표시를 하지 않고
직관적으로 ENTER만 입력하더라도, 개행문자를 표현할 수 있습니다.
하지만 C++을 개발하던 저로서는 '\n' 따로 삽입해주는 편이 더 명시적으로 보이기는 하네요...ㅋ
그래서 이 기능보다는 이 다음에 올 특성을 저는 더 자주 활용합니다!
1-2. Expression Interpolation
두 번째로 interpolation이 가능합니다!
주로 '보간' 이라는 말로 해석돼서 사전만 찾아봐서는 잘 와닿지 않으실 거에요
(저 역시...)
뭔가를 끼워넣는다는 표현인데 문자열 사이에 표현식(코드)을 끼워넣을 수 있다는 이야기입니다.
바로 이렇게 말이죠!
"원래도 가능했잖아요?" ?
네, 맞습니다.
조금만 더 손가락이 부지런하면 가능했죠.
하지만 Template Literal을 사용했을 때 코드 길이가 훨씬 짧고
간결해보이는 경우가 있으니, 사용가능한 부분에는 사용하는 것을 추천드리고 싶습니다!
1-3. Tagged String
마지막으로 tagged string이라는 기능이 있습니다.
이것을 사용하면
템플릿 리터럴을 함수로 파싱할 수 있습니다.
코드 단에서 직접 보면
과 같은 형태로 사용할 수 있네요.
좀 더 실무적으로 도움이 될만한 예시를 같이 들면 좋지만
오늘은 Template Literal Types에 대해 소개하는 글이기 때문에
" 템플릿 리터럴을 함수로 파싱할 수도 있다~ "
라는 정보만 알고 가시고,
Tagged String에 관한 추가적인 내용은 다음에 함께 다루도록 하겠습니다.
2. Template Literal Types란?
네! 그래서 Template Literal Types가 뭐냐면
String Literal 을 기반으로 새로운 타입을 만드는 문법입니다.
String Literal이 타입이 된다구요?
네, 가능합니다.
다음 사용 예시를 함께 보시죠!
3. 사용 예시
3-1. String Unions in Types
string을 type으로 사용 가능하다는 것은 아셨죠?
Template Literal 문법으로 타입을 정의할 때, string 형태로 정의된 다른 타입을 가져와서
새로운 타입을 만들어 내는 것!
이것이 바로 기본적인 Template Literal Types의 기능입니다.
이렇게 여러 문자열의 조합으로 타입이 이루어질 때,
타입을 선언하는 코드를 대폭 줄일 수 있겠네요!
3-2. Inference with Template Literals
두 번째 소개해드릴 예시는 입력하는 스트링의 타입추론을 가능하게 하는 것이에요!
만약 특정 객체에 대한 이벤트 핸들러를 정의해보고 싶다고 하겠습니다.
원래대로라면
type eventHandlerType = 'firstNameChanged' | 'lastNameChanged' | 'ageChanged';이러한 형식이 되겠죠?
하지만 좀 더 전문적인 뉘앙스를 풍기고 싶다면?
이런식의 표현도 가능합니다!
그럼 결과적으로
IDE에서 이런식의 정적 타입 체크가 가능하면서,
특히 객체의 프로퍼티가 많아졌을 경우 훨씬 가독성이 높아지겠죠!
저도 타입스트립트 기반의 에디터를 이벤트 핸들러 프레임웤을 만들어
사내에 제공해야하는 경우가 있었는데
이런 문법을 사용했으면 훨씬 더 관리해야하는 코드의 양을 줄일 수 있었을 거라는 생각이 드네요!
3-3. Intrinsic String Manipulation
마지막으로는 String Manipulation도 적용이 가능하다는 이야기 입니다!
Intrinsic String Manipulation은 string.toUpperCase()와 같은 기능을
간편하게 사용하기 위해 도입된 기능으로
UpperCase LowerCase Caplitalize Uncapitalize 네 가지 형태로 사용 가능합니다.
중요한 점은 이 기능을 타입을 정의할 때 사용이 가능하다는 것이죠!
이것처럼요!
저는 무조건 대문자 스트링을 사용해야하는 경우를 만나보지 못했지만,
(코드 내에서는 이런 경우 ENUM으로 관리했음)
혹시 유용하게 사용 될 수 있는 부분이 있다면 댓글로 알려주세요!
4. 정리
자 이렇게 오늘은 Template Literal Types와 그 사용 예시에 대해 알아봤습니다.
단순한 문법적인 설탕에 가까운 기능이라 기능에 드라마틱한 변화를 가져다 줄 수는 없지만
이런 문법들로 인해 생산성이 올라가고, 유지보수에 대한 시간을 줄이는 역할은
충분히 가능하다고 생각해요!
앞으로도 TypeScript의 발전을 지켜보면서 새로운 기능이 업데이트 된다면 또
포스팅 해드리도록 하겠습니다!
