프런트엔드 및 백엔드 개발의 절대적인 표준으로서 TypeScript는 계속 발전하고 있습니다.

TypeScript 5.x 릴리스는 DX(개발자 경험)를 획기적으로 향상시키는 컴파일러 속도, 번들 감소 및 구문 개선에 중점을 두고 있습니다. 이 문서에서는 일상적인 작업 흐름에 채택해야 하는 실용적인 TypeScript 5 기능을 다룹니다.

1. const 유형 매개변수

이전에는 TypeScript가 객체 리터럴 인수를 좁은 읽기 전용 리터럴 유형으로 추론하도록 하려면 호출자가 인수에 as const을 추가해야 했습니다.

TypeScript 5.0 이상을 사용하면 일반 유형 매개변수에서 직접 const 수정자를 선언할 수 있습니다. 컴파일러는 호출 사이트에서 가장 좁은 유형을 자동으로 유추합니다.

// Define 'const' before the generic parameter T
function getNames<const T extends { names: readonly string[] }>(obj: T) {
    return obj.names;
}

// No 'as const' required from the caller; the array is inferred as readonly ["Alice", "Bob"]
const names = getNames({ names: ["Alice", "Bob"] });
// Inferred Type: readonly ["Alice", "Bob"]

이는 정적 구성이나 함수에 전달된 상수를 처리할 때 런타임 입력 버그를 방지합니다.

2. 표준 ECMAScript 호환 데코레이터

실험적인 데코레이터(experimentalDecorators 플래그)는 수년간 TypeScript에 사용되었습니다. TypeScript 5에는 ECMAScript stage 3 표준 데코레이터에 대한 기본 지원이 도입되어 플래그 없이 데코레이터를 작성할 수 있습니다.

function logMethod(originalMethod: any, context: ClassMethodDecoratorContext) {
    const methodName = String(context.name);

    function replacementMethod(this: any, ...args: any[]) {
        console.log(`[LOG] Calling ${methodName} with`, args);
        return originalMethod.apply(this, args);
    }
    return replacementMethod;
}

class UserService {
    @logMethod
    greet(name: string) {
        return `Hello, ${name}!`;
    }
}

3. 다중 구성 상속(extends 배열)

TS 5 이전에는 tsconfig.json이 단일 기본 구성에서만 설정을 상속받을 수 있었습니다. 이제 파일 배열을 extends 필드에 전달할 수 있습니다.

이를 통해 더 깔끔한 모듈화가 가능합니다. 즉, 경로 매핑, 빌드 설정 및 대상 환경을 재사용 가능한 스니펫으로 분할합니다.

{
  "extends": ["./tsconfig.base.json", "./tsconfig.paths.json"],
  "compilerOptions": {
    "strict": true
  }
}

4. 요약: 내부 성능 향상

구문 외에도 TypeScript 5의 컴파일러 구조는 완전히 리팩터링되어 무거운 네임스페이스를 제거하고 데이터 유형을 재구성했습니다. 그 결과 중대형 코드베이스의 컴파일 시간이 20~40% 단축되었습니다. 더 빠른 빌드 루프를 위해서는 종속성을 업그레이드하는 것이 좋습니다.