TypeScript 5 Updates

TypeScript 5 Updates: Modern Features & Performance Improvements

TypeScript 5.x introduces major language improvements, standard ECMAScript decorators, const type parameters, faster build speeds, smaller package sizes, and flexible moduleResolution: "bundler" configurations.

Key TypeScript 5 Features

1. Standard ECMAScript Decorators: Aligns TypeScript decorators with Stage 3 TC39 specifications.
2. const Type Parameters: Preserves literal types in generic inference without requiring as const at call sites.
3. Multi-Target tsconfig Extends: tsconfig.json can now inherit from an array of base configs ("extends": ["./config/base", "./config/strict"]).
4. moduleResolution: "bundler": Tailored resolution for modern web bundlers like Vite, esbuild, and Webpack.

Practical Code Example

// const Type Parameters (TS 5.0+)
// Without const T: inferred as string[]
// With const T: inferred as readonly ["red", "green", "blue"]
function setPalette<const T extends readonly string[]>(colors: T): T {
  return colors;
}

const palette = setPalette(["red", "green", "blue"]);
// palette type is explicitly readonly ["red", "green", "blue"], not string[]

// Modern TS 5 Decorator Example
function LogExecution(target: any, context: ClassMethodDecoratorContext) {
  const methodName = String(context.name);
  return function (this: any, ...args: any[]) {
    console.log(`[LOG] Calling method ${methodName} with args:`, args);
    return target.apply(this, args);
  };
}

class OrderService {
  @LogExecution
  public placeOrder(orderId: string, amount: number) {
    return { success: true, orderId, amount };
  }
}

const service = new OrderService();
service.placeOrder("ORD-551", 299.99);

Best Practices & Gotchas

• Use moduleResolution: "bundler" for Vite Projects: Ensures accurate import path resolution matching bundler behavior.
• Leverage const Generic Constraints: Simplifies literal tuple and object inference without cluttering code with as const.
• Update Compiler Options: Ensure "target": "ES2022" or higher to fully leverage native TS 5 features.

Self-Check Challenge

What modifier is added to generic parameters in TypeScript 5 to infer literal types automatically? (Answer: const)