TypeScript 5 New Features — Practical Use of the satisfies Operator and Decorators

Key Takeaway Major new features in TypeScript 5.0~5.4: ① the satisfies operator — validate types while preserving inference ② standard decorators — compliant with the TC39 Stage 3 standard, with metadata support ③ const type parameters — stronger literal type inference ④ extending multiple tsconfig files ⑤ enum and namespace improvements. The features with the biggest practical impact are satisfies and the new decorators.

Core answer: The key features in TypeScript 5 are the satisfies operator and standard decorators.

TypeScript 5 Overview

Major release timeline by version:

1. The satisfies Operator — A Complete Practical Guide

The satisfies operator is one of the most innovative features introduced in TypeScript 5.0. It goes beyond the limitations of traditional type assertions by validating type constraints while preserving type inference.

The Existing Problem

// ❌ Korean term Korean term Korean term type Color = "red" | "green" | "blue"; type ColorMap = Record;

// as Korean term: Korean term Korean term O, Korean term X const palette = { red: [255, 0, 0], green: "#00ff00", blue: [0, 0, 255] } as ColorMap;

// Korean term palette.redKorean term string | number[] Korean term Korean term // .map()Korean term Korean term Korean term Korean term Korean term palette.red.map(x => x); // Korean term! string | number[]Korean term map Korean term

Using satisfies

// ✅ satisfies Korean term type Color = "red" | "green" | "blue"; type ColorMap = Record;

} satisfies ColorMap;

// Korean term Korean term Korean term O, Korean term Korean term O palette.red.map(x => x); // ✅ number[] Korean term palette.green.toUpperCase(); // ✅ string Korean term const wrong = { purple: "purple" } satisfies ColorMap; // ❌ Korean term: "purple"Korean term Color Korean term

Practical Usage Patterns

Pattern 1: Validating API Response Objects interface ApiConfig { baseUrl: string; timeout: number; retries: number; }

// satisfiesKorean term Korean term Korean term + Korean term Korean term Korean term Korean term const config = { baseUrl: "https://api.example.com", timeout: 5000, retries: 3, } satisfies ApiConfig;

// config.timeoutKorean term numberKorean term Korean term 5000 (Korean term Korean term) type TimeoutType = typeof config.timeout; // 5000

Pattern 2: Route Definitions type Route = { path: string; component: React.ComponentType; auth?: boolean; };

const routes = [ { path: "/", component: Home }, { path: "/dashboard", component: Dashboard, auth: true }, ] satisfies Route[];

// routes[0].pathKorean term "/" (Korean term) Korean term, Route Korean term Korean term

Pattern 3: Multilingual Translation Objects type TranslationKey = "hello" | "goodbye" | "welcome"; type Translations = Record;

const ko = { hello: "Korean term", goodbye: "Korean term Korean term", welcome: "Korean term", } satisfies Translations;

const en = { hello: "Hello", goodbye: "Goodbye", // welcome Korean term → Korean term Korean term Korean term! ✅ } satisfies Translations;

2. Standard Decorators — Full TC39 Stage 3 Implementation TypeScript 5.0 supports TC39 Stage 3 standard decorators, separate from the long-used experimental decorators (experimentalDecorators).

Key Differences

Class Decorators

// ✅ TypeScript 5 Korean term Korean term function sealed(target: typeof SealedClass) { Object.seal(target); Object.seal(target.prototype); }

@sealed class SealedClass { greet() { return "Hello!"; } }

Method Decorators

function log(target: any, context: ClassMethodDecoratorContext) { const methodName = String(context.name); return function (this: any, ...args: any[]) { console.log([${methodName}] Korean term, Korean termwater:, args); const result = target.call(this, ...args); console.log([${methodName}] Korean term:, result); return result; }; }

class Calculator { @log add(a: number, b: number): number { return a + b; } }

const calc = new Calculator(); calc.add(1, 2); // [add] Korean term, Korean termwater: [1, 2] // [add] Korean term: 3

Accessor Decorators

function readonly(target: any, context: ClassAccessorDecoratorContext) { return { set() { throw new Error(${String(context.name)}Korean term Korean term Korean term.); } }; }

class Config { @readonly accessor version = "1.0.0"; }

const cfg = new Config(); console.log(cfg.version); // "1.0.0" cfg.version = "2.0.0"; // ❌ Korean term Korean term

Decorator Metadata (TypeScript 5.2)

// Korean term API Korean term function validate(target: any, context: ClassFieldDecoratorContext) { context.metadata[context.name] = { required: true }; }

class UserForm { @validate name!: string; @validate email!: string; }

// Korean term Korean term const metadata = UserForm[Symbol.metadata]; console.log(metadata); // { name: { required: true }, email: { required: true } }

3. const Type Parameters The const modifier added in TypeScript 5.0 strengthens type inference for generic functions.

// ❌ Korean term Korean term function identity(value: T): T { return value; }

const result = identity(["a", "b", "c"]); // result: string[] (Korean term Korean term)

// ✅ const Korean term Korean term function identityConst(value: T): T { return value; }

const result2 = identityConst(["a", "b", "c"]); // result2: readonly ["a", "b", "c"] (Korean term Korean term!)

Practical Use: Route Builder function createRoute(path: Path) { return { path, url: () => https://app.example.com${path} }; }

const homeRoute = createRoute("/"); // homeRoute.path: "/" (Korean term Korean term)

const dashRoute = createRoute("/dashboard"); // dashRoute.path: "/dashboard" (Korean term Korean term)

4. Extending Multiple tsconfig Files Starting with TypeScript 5.0, extends in tsconfig.json can use an array.

// tsconfig.json { "extends": [ "@tsconfig/strictest/tsconfig.json", "@tsconfig/node18/tsconfig.json", "./custom.tsconfig.json" ], "compilerOptions": { "outDir": "dist" } }

Previously, you had to inherit multiple files through a chain, but now multiple inheritance can be handled at once with an array.

5. using / await using Keywords (TypeScript 5.2)

These are new keywords for resource management, similar to Java's try-with-resources.

// Symbol.disposeKorean term Korean term Korean term cla

---

Reference: Bank of Korea Economic Statistics

Frequently Asked Questions (FAQ)

Q1. What is the most important new feature in TypeScript 5?

A: The satisfies operator, standard decorators, and const type parameters have the greatest practical impact.

Q2. When should I use the satisfies operator?

A: Use it when you want to validate that an object meets specific type requirements while preserving its precise inference.

Q3. What is the difference between satisfies and as?

A: as is a type assertion, while satisfies is type validation, so it catches incorrect structures more safely.

Q4. Are TypeScript 5 decorators different from the old ones?

A: Standard decorators follow the TC39 process and behave differently from the existing experimentalDecorators.

Q5. Why are const type parameters useful?

A: They preserve literal type inference in generic functions, allowing you to create more precise types.

Q6. What should I check before upgrading to TypeScript 5?

A: Check tsconfig, decorator usage, build tools, ESLint, and library type compatibility.