문서

Template Literal Types로 타입 안전하게 코딩하기

박서진 토스 · 토스 기술 블로그

AI 핵심 요약

TypeScript 4.1의 Template Literal Type은 문자열 리터럴 타입을 조합해 이벤트 핸들러 이름이나 정렬 방향 조합처럼 반복되는 타입 정의를 자동으로 만들 수 있습니다. 글은 Union 타입, Capitalize와 매핑 타입을 활용해 이벤트 이름 한 곳만 수정해도 관련 핸들러 타입이 함께 바뀌도록 구성하는 방법을 보여줍니다. Conditional Type과 infer, 재귀 타입을 결합하면 문자열의 접두사·공백을 처리하거나 점으로 연결된 경로를 튜플로 나눌 수 있습니다. 이를 객체 경로의 값 타입을 찾는 ValueOf와 조합하면 lodash.set()의 입력값까지 타입 안전하게 검사할 수 있으며, JSON 파싱이나 DOM 선택자 타입 추론 같은 응용 가능성도 소개합니다.

Template Literal Type은 문자열 리터럴 타입을 조합해 새로운 타입을 만들며, Union 타입과 결합하면 가능한 조합을 자동으로 생성합니다.
Capitalize 같은 내장 타입과 매핑 타입을 함께 쓰면 이벤트 이름에서 핸들러 이름을 파생해 중복 정의를 줄일 수 있습니다.
Conditional Type의 infer로 타입 일부를 추출하고, 재귀 타입으로 문자열을 자르거나 튜플을 변환할 수 있습니다.
경로 문자열을 Split으로 나누고 ValueOf로 객체를 따라가면 깊은 프로퍼티를 다루는 함수의 값 타입을 추론할 수 있습니다.

소개

TypeScript 코드베이스의 타입 안전성을 한 단계 올려줄 수 있는 Template Literal Type의 뜻과 응용에 대해 알아봅니다.

비슷한 학습 자료

컨퍼런스 엔지니어링데이 2025

infer, never만 보면 두려워지는 당신을 위한 고급 TypeScript

컨퍼런스 엔지니어링데이 2025

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2024(5월)에서 발표되었던 세션을 공개합니다. [발표 내용] TypeScript의 타입 추론 원리를 타입 이론과 순서론에 근거하여 학습 실전 라이브러리 개발에서 풀 법한 문제 풀이 [대상] TypeScript 고급 사용자 라이브러리 개발 / 오픈소스 참여 등을 생각하시는 분 [기초 / 고급 / 응용] 00:00 ~ 31:09 기초타입이론 32:29 ~ 46:05 고급타입추론 46:06 ~ 1:12:03 응용문제

웹 개발 프로그래밍 언어

문서 허민

ts-pattern은 더 멋진 if문이 아니다

문서 허민

ts-pattern 라이브러리는 패턴 매칭을 기반으로 하고 있으며, 복잡한 조건부 분기를 간결하게 작성할 수 있게 도와줘요. 하지만 성능이 비교적 떨어지기 때문에 실제로 ts-pattern을 어떻게 사용하고 있는지 확인할 필요가 있습니다.

프론트엔드 프로그래밍 언어

문서 강현구

Transpiler, “사용”말고 “활용”하기

문서 강현구

매일 “사용”만 하는 transpiler, 토스뱅크에서는 한 단계 더 잘 “활용”해 보기로 했어요. 오늘은 transpiler로 로깅 과정을 개선한 사례를 소개 드릴게요.

프론트엔드 프로그래밍 언어

문서 박서진

선언적인 코드 작성하기

문서 박서진

선언적인 코드, 토스 프론트엔드 챕터는 어떻게 생각을 하고 있을까요?

프론트엔드

문서 김병묵

TypeScript 타입 시스템 뜯어보기: 타입 호환성

문서 김병묵

타입호환성은 무엇이며 왜 필요할까요? 타입호환이 지원되지 않는 경우가 존재한다는 것을 아셨나요? 평소 익숙했던 개념들에 대해 질문을 던져가며 TypeScript 타입 시스템에 관해 심도있게 알아보고자 합니다.

프로그래밍 언어

컨퍼런스 INFCON 2024

멀티패러다임 프로그래밍 언어의 시대: 객체지향과 함수형을 섞어야할 때!│인프콘2024