TypeScript 5.x: Mastering the New Type System Features

TypeScript 5.x is not just an incremental update — it is a maturation of the type system that makes previously awkward patterns clean, and previously impossible patterns possible. If you are still writing TypeScript the same way you did in 4.x, you are leaving a lot of expressiveness on the table.

This guide covers the features that actually matter in day-to-day development.

"TypeScript is not about adding types to JavaScript. It's about making the implicit explicit — and catching entire categories of bugs before they reach production."

1. Decorators: Finally Standardized

Decorators have been in TypeScript for years as an experimental feature. TypeScript 5.0 implements the TC39 Stage 3 decorator proposal — a completely redesigned, standards-compliant version.

Class Decorators

// A decorator that logs class instantiation
function logged<T extends { new(...args: any[]): {} }>(Base: T, ctx: ClassDecoratorContext) {
  return class extends Base {
    constructor(...args: any[]) {
      super(...args);
      console.log(`[${ctx.name}] Instance created at ${new Date().toISOString()}`);
    }
  };
}

@logged
class UserService {
  constructor(private db: Database) {}

  async findUser(id: string) {
    return this.db.users.findUnique({ where: { id } });
  }
}

// new UserService(db) → logs: [UserService] Instance created at 2026-04-29T...

Method Decorators

// Memoization decorator
function memoize(target: any, ctx: ClassMethodDecoratorContext) {
  const cache = new Map<string, any>();

  return function(this: any, ...args: any[]) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log(`[${String(ctx.name)}] Cache hit for`, key);
      return cache.get(key);
    }
    const result = target.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

class MathService {
  @memoize
  fibonacci(n: number): number {
    if (n <= 1) return n;
    return this.fibonacci(n - 1) + this.fibonacci(n - 2);
  }
}

// Accessor decorators for validation
function minLength(min: number) {
  return function(target: any, ctx: ClassAccessorDecoratorContext) {
    return {
      set(value: string) {
        if (value.length < min) {
          throw new Error(`${String(ctx.name)} must be at least ${min} characters`);
        }
        target.set.call(this, value);
      },
    };
  };
}

class User {
  @minLength(3)
  accessor username: string = '';
}

2. Const Type Parameters

This is one of the most practically useful additions. It lets you tell TypeScript to infer the most specific (literal) type for a generic parameter.

// Without const — TypeScript widens the type
function createConfig<T>(config: T): T {
  return config;
}

const config1 = createConfig({ theme: 'dark', lang: 'en' });
// Inferred as: { theme: string; lang: string }
// We lose the literal types!

// With const — TypeScript preserves literal types
function createConfig<const T>(config: T): T {
  return config;
}

const config2 = createConfig({ theme: 'dark', lang: 'en' });
// Inferred as: { theme: "dark"; lang: "en" }
// Literal types preserved!

Real-World Use Case: Type-Safe Route Definitions

function defineRoutes<const T extends Record<string, string>>(routes: T): T {
  return routes;
}

const ROUTES = defineRoutes({
  home: '/',
  blog: '/blog',
  contact: '/contact',
  project: '/projects/:slug',
});

// TypeScript knows the exact string values
type RouteName = keyof typeof ROUTES;
// "home" | "blog" | "contact" | "project"

function navigate(route: RouteName) {
  window.location.href = ROUTES[route];
}

navigate('blog');    // ✓ Valid
navigate('about');  // ✗ Error: Argument of type '"about"' is not assignable

3. Variadic Tuple Types and Template Literal Improvements

TypeScript 5.x significantly improved how template literal types interact with generics:

// Build type-safe event systems
type EventName<T extends string> = `on${Capitalize<T>}`;

type ButtonEvents = EventName<'click' | 'hover' | 'focus'>;
// "onClick" | "onHover" | "onFocus"

// Type-safe CSS class builder
type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
type TailwindResponsive<T extends string> = T | `${Breakpoint}:${T}`;

type FlexClass = TailwindResponsive<'flex' | 'hidden' | 'block'>;
// "flex" | "hidden" | "block" | "sm:flex" | "sm:hidden" | ... etc

// Deep path types for nested objects
type DeepKeys<T, Prefix extends string = ''> = {
  [K in keyof T]: T[K] extends object
    ? DeepKeys<T[K], `${Prefix}${K & string}.`>
    : `${Prefix}${K & string}`;
}[keyof T];

type Config = {
  database: { host: string; port: number };
  auth: { secret: string; expiry: number };
};

type ConfigPath = DeepKeys<Config>;
// "database.host" | "database.port" | "auth.secret" | "auth.expiry"

function getConfig(path: ConfigPath): string | number {
  // Type-safe deep access
  return path.split('.').reduce((obj: any, key) => obj[key], globalConfig);
}

getConfig('database.host');  // ✓
getConfig('database.name');  // ✗ Error: not a valid path

4. satisfies Operator: Validate Without Widening

type Color = 'red' | 'green' | 'blue';
type ColorMap = Record<string, Color | [number, number, number]>;

// With 'as' — you lose specific type info
const palette1 = {
  red: [255, 0, 0],
  green: '#00ff00',
} as ColorMap;

palette1.red.toUpperCase(); // ✗ Error — TypeScript thinks it could be Color | [number, number, number]

// With 'satisfies' — validates AND keeps specific types
const palette2 = {
  red: [255, 0, 0],
  green: '#00ff00',
} satisfies ColorMap;

palette2.red.toUpperCase();  // ✗ Error — it's an array, not a string (correct!)
palette2.red[0].toFixed(2);  // ✓ TypeScript knows it's [number, number, number]
palette2.green.toUpperCase(); // ✓ TypeScript knows it's a string

Practical: Type-Safe Config Objects

interface AppConfig {
  port: number;
  database: { url: string; poolSize: number };
  features: Record<string, boolean>;
}

// satisfies validates the shape AND preserves literal types
const config = {
  port: 3000,
  database: {
    url: process.env.DATABASE_URL!,
    poolSize: 10,
  },
  features: {
    darkMode: true,
    betaFeatures: false,
  },
} satisfies AppConfig;

// TypeScript knows config.port is specifically 3000, not just number
// TypeScript knows config.features.darkMode is boolean

5. Improved Type Narrowing

TypeScript 5.x is smarter about narrowing types in complex control flow:

// Discriminated unions with exhaustive checking
type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'rectangle'; width: number; height: number }
  | { kind: 'triangle'; base: number; height: number };

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'rectangle':
      return shape.width * shape.height;
    case 'triangle':
      return 0.5 * shape.base * shape.height;
    default:
      // TypeScript 5.x: this is now a compile error if you add a new shape
      // and forget to handle it here
      const _exhaustive: never = shape;
      throw new Error(`Unhandled shape: ${_exhaustive}`);
  }
}

// Type narrowing with type predicates
function isError(value: unknown): value is Error {
  return value instanceof Error;
}

async function fetchData(url: string) {
  try {
    const response = await fetch(url);
    return await response.json();
  } catch (error) {
    if (isError(error)) {
      // TypeScript knows error is Error here
      console.error(error.message);
    }
    throw error;
  }
}

6. Using Declarations (TypeScript 5.2)

// Define a disposable resource
class DatabaseConnection implements Disposable {
  private connection: Connection;

  constructor(url: string) {
    this.connection = createConnection(url);
    console.log('Connection opened');
  }

  query(sql: string) {
    return this.connection.execute(sql);
  }

  [Symbol.dispose]() {
    this.connection.close();
    console.log('Connection closed automatically');
  }
}

// 'using' automatically calls [Symbol.dispose] when the block exits
async function getUserCount() {
  using db = new DatabaseConnection(process.env.DATABASE_URL!);
  // Connection is open here
  const result = await db.query('SELECT COUNT(*) FROM users');
  return result.rows[0].count;
  // Connection is automatically closed here — even if an error is thrown
}

// Async version with 'await using'
class FileHandle implements AsyncDisposable {
  async [Symbol.asyncDispose]() {
    await this.file.close();
  }
}

async function processFile(path: string) {
  await using handle = await openFile(path);
  // File is automatically closed when this function returns
}

7. TypeScript 5.x Performance Improvements

// tsconfig.json — recommended settings for Next.js 15 + TS 5.x
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": { "@/*": ["./*"] }
  }
}

Watch: TypeScript 5.x Full Walkthrough

Watch on YouTube

The Takeaway