안녕하세요. 코딩하는 Jay입니다.
모던 웹 개발에서 타입스크립트(TypeScript)는 이제 선택이 아닌 필수가 되었습니다. 하지만 많은 개발팀이 여전히 과거 4.x 시절의 문법과 관성에 머물러 있는 경우가 많은데요.
TypeScript 5.x 메이저 릴리즈 이후, 컴파일러 속도가 비약적으로 빨라졌을 뿐만 아니라 타입 추론을 획기적으로 단순화하고 코드 보일러플레이트를 줄여주는 강력한 실무 기능들이 대거 추가되었습니다.
오늘은 수많은 신기능 중에서도 실무 개발에서 생산성을 가장 크게 끌어올려 준 핵심 기능 4가지와 실전 코드 예시를 정리해 보았습니다.
한눈에 보는 TS 5.x 핵심 기능 요약
| 기능명 | 주요 용도 및 혜택 | 실무 체감 포인트 |
|---|---|---|
const Type Parameters |
함수 인자의 리터럴 타입을 as const 없이 추론 |
객체나 배열을 넘길 때 타입 단언 불필요 |
| Stage 3 표준 데코레이터 | TC39 정식 표준 사양 데코레이터 지원 | experimentalDecorators 플래그 제거 |
All enums are Union Enums |
이넘(enum) 멤버별 고유 타입 보장 | 런타임 버그 방지 및 타입 좁히기 강화 |
| Inferred Type Predicates | 배열 filter(Boolean) 시 자동 타입 좁히기 |
(x): x is T 수동 가드 작성 불필요 |
1. `const` Type Parameters: 지긋지긋한 `as const` 안녕!
과거에는 제네릭 함수에 객체나 배열 리터럴을 넘길 때, 구체적인 리터럴 타입을 유지하려면 호출부마다 as const를 덕지덕지 붙여야 했습니다. TS 5.0부터는 타입 매개변수 앞에 const 키워드를 붙일 수 있습니다.
// TS 5.0 이전: as const를 붙이지 않으면 string[]으로 넓혀짐
function getRoutes<T extends readonly string[]>(routes: T) {
return routes;
}
const r1 = getRoutes(['/home', '/about'] as const);
// TS 5.0+: 타입 선언부에 const 지정
function getRoutesNew<const T extends readonly string[]>(routes: T) {
return routes;
}
// 호출부에서 자동으로 readonly ["/home", "/about"] 리터럴로 정확히 추론!
const r2 = getRoutesNew(['/home', '/about']);설정 객체나 라우트 정의, 디자인 시스템 토큰을 다룰 때 호출자 코드의 가독성이 비약적으로 깔끔해집니다.
2. 표준 데코레이터 (Stage 3 Decorators) 지원
그동안 NestJS나 MobX 등에서 쓰이던 데코레이터는 TS 자체의 레거시 실험적 구현(experimentalDecorators)이었습니다. TS 5.0부터는 자바스크립트 공식 표준(TC39 Stage 3) 데코레이터가 정식 도입되었습니다.
// 로깅 및 실행 시간 측정 데코레이터
function logged(target: any, context: ClassMethodDecoratorContext) {
const methodName = String(context.name);
return function (this: any, ...args: any[]) {
console.log(`[CALL] ${methodName} with args:`, args);
const start = performance.now();
const result = target.call(this, ...args);
console.log(`[END] ${methodName} took ${(performance.now() - start).toFixed(2)}ms`);
return result;
};
}
class ApiService {
@logged
fetchUserData(userId: string) {
// API 통신 로직
return { id: userId, name: 'Jay' };
}
}이제 번들러와의 호환성 충돌 걱정 없이, 표준 기반의 안전한 AOP(관점 지향 프로그래밍)를 구축할 수 있습니다.
3. 배열 `filter(Boolean)` 시 자동 타입 좁히기 (TS 5.5+)
배열에서 null이나 undefined를 걸러내기 위해 arr.filter(Boolean)을 쓸 때, 이전에는 반환 타입이 (string | null)[]로 유지되어 어쩔 수 없이 수동 타입 가드 filter((x): x is string => ...)를 작성해야 했습니다.
const items: (string | null | undefined)[] = ['apple', null, 'banana', undefined];
// TS 5.5 이전: string[]이 아니라 (string | null | undefined)[]로 추론됨
// TS 5.5+: 컴파일러가 Boolean 필터링을 분석하여 자동으로 string[]으로 정확히 좁힘!
const validItems = items.filter(Boolean);이 사소하지만 강력한 개선 덕분에 실무 코드에서 수백 줄의 불필요한 타입 단언과 가드 함수를 걷어낼 수 있었습니다.
💡 정리하며
TypeScript 5.x는 단순한 문법 추가를 넘어, 컴파일러를 네임스페이스 모듈에서 ECMAScript 모듈로 전면 재작성하여 패키지 크기가 80% 줄어들고 빌드 속도가 20% 이상 향상되었습니다.
아직 tsconfig나 프로젝트 버전을 4.x에 두고 계시다면, 이번 기회에 5.x로 판올림하여 훨씬 가볍고 스마트해진 타입 시스템의 혜택을 누려보시길 권장합니다!