TypeScript 5.0: Standard-Decorators und const-Typparameter

Überblick über TypeScript 5.0

// TS 5.0 release: March 2023
// npm install typescript@5

Dekoratoren der Stufe 3

// New standard decorator — no experimentalDecorators flag needed
function logged(target: Function, ctx: ClassDecoratorContext) {
  return class extends (target as any) {
    constructor(...args: any[]) {
      console.log("Creating", target.name);
      super(...args);
    }
  };
}

@logged
class User { constructor(public name: string) {} }

Kontextobjekt für Dekoratoren

function sealed(_: Function, ctx: ClassDecoratorContext) {
  ctx.addInitializer(function(this: any) {
    Object.seal(this);
  });
}

Methodendekoratoren in TS 5.0

function measure(_: Function, ctx: ClassMethodDecoratorContext) {
  return function(this: any, ...args: any[]) {
    const start = performance.now();
    const result = (_.apply as any)(this, args);
    console.log(ctx.name, performance.now() - start, "ms");
    return result;
  };
}

const-Typparameter

function identity<const T>(val: T): T { return val; }
const a = identity("hello");      // type: "hello" (not string)
const b = identity([1, 2, 3]);    // type: readonly [1, 2, 3]

const-Generics im Vergleich zu as const

// Without const param: callers need as const
function makeRoute<T extends string>(path: T) { return path; }
const r1 = makeRoute("/home" as const); // "/home"

// With const param: automatic
function makeRoute2<const T extends string>(path: T) { return path; }
const r2 = makeRoute2("/home"); // "/home" — no as const needed

Modulauflösung für Bundler

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler"
  }
}

verbatimModuleSyntax

// tsconfig.json
{ "compilerOptions": { "verbatimModuleSyntax": true } }

// Now this errors: must be import type
import { User } from "./types"; // Error if User is only a type
import type { User } from "./types"; // OK

Leistungsverbesserungen

# TS 5.0 compile benchmarks: ~10-15% faster on large projects

Migration von Legacy-Dekoratoren

// Legacy: requires experimentalDecorators: true
@Component({ selector: "app-root" })
class AppComponent {}

// New TC39 decorator: no flag needed (but Angular/NestJS need updates)

Zusammenfassung: TypeScript 5.0

Schnelltest

Das haben Sie gelernt