TypeScript 5.x 新機能完全ガイド｜デコレータ・const型引数・unique types【2026年版】

TypeScript 5.x 系列では、型システムの強化と JavaScript 新機能への対応が大きく進みました。この記事では、TypeScript 5.0 から 5.4 までの主要な新機能を、実務での使い方とともに解説します。

TypeScript 5.0: デコレータ正式対応

TypeScript 5.0 で、ECMAScript Stage 3 のデコレータが正式にサポートされました。以前の experimentalDecorators とは異なる新仕様です。

function logged<T, A extends any[], R>(
  target: (this: T, ...args: A) => R,
  context: ClassMethodDecoratorContext<T, (this: T, ...args: A) => R>
) {
  const methodName = String(context.name);
  return function (this: T, ...args: A): R {
    console.log(`Calling ${methodName} with`, args);
    const result = target.call(this, ...args);
    console.log(`${methodName} returned`, result);
    return result;
  };
}

class UserService {
  @logged
  getUser(id: number) {
    return { id, name: 'Alice' };
  }
}

const svc = new UserService();
svc.getUser(1);
// Calling getUser with [1]
// getUser returned { id: 1, name: 'Alice' }

重要な変更点:

• experimentalDecorators: true 不要
• emitDecoratorMetadata は非対応
• 型安全性が大幅に改善

TypeScript 5.0: const 型引数

ジェネリクスで const 修飾子が使えるようになりました。リテラル型を保持できます。

従来

function first<T>(arr: T[]): T {
  return arr[0];
}

const result = first(['a', 'b', 'c']);
// result: string （リテラル型が失われる）

const 型引数を使う

function first<const T>(arr: readonly T[]): T {
  return arr[0];
}

const result = first(['a', 'b', 'c']);
// result: 'a' | 'b' | 'c' （リテラル型が保持される）

as const を手動で書かなくて済むため、ライブラリ側で制御できるのが大きなメリットです。

TypeScript 5.0: enum の改善

TypeScript の enum は以前から批判の多い機能でしたが、5.0 で大幅に改善されました。

enum Status {
  Active = 'ACTIVE',
  Inactive = 'INACTIVE',
}

function setStatus(status: Status) { /* ... */ }

// 従来は NG だったが、5.0 では OK
setStatus('ACTIVE');

文字列リテラルがそのまま enum に代入できるようになり、API との整合性が取りやすくなりました。

TypeScript 5.1: undefined 返り値の柔軟化

void を返す関数に、何も書かない return だけでなく、undefined を返す式も許容されるようになりました。

function doSomething(callback: () => void) { /* ... */ }

// 従来: エラー
doSomething(() => alert('hello')); // alert は undefined を返す

// 5.1: OK

React の useEffect での return 処理がより書きやすくなりました。

TypeScript 5.1: HTMLElement 属性の型推論

JSX 要素の属性型が改善され、カスタム要素との相性が向上しました。

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'my-button': {
        label: string;
        variant?: 'primary' | 'secondary';
      };
    }
  }
}

// 型安全に使える
<my-button label="Click" variant="primary" />;

TypeScript 5.2: using 宣言

JavaScript の Explicit Resource Management 提案に対応しました。using で宣言した変数は、スコープを抜ける時に自動的にリソース解放されます。

class FileHandle implements Disposable {
  [Symbol.dispose]() {
    console.log('File closed');
  }
}

function processFile() {
  using file = new FileHandle();
  // ファイル処理
  // スコープを抜けると自動的に [Symbol.dispose]() が呼ばれる
}

C# の using 文や Python の with 文と同様の機能です。データベース接続、ファイルハンドル、ロック管理等で活躍します。

TypeScript 5.2: copy, move, copy2 関数の引数名

Named and Anonymous Tuple Elements の改善により、タプル型でパラメータ名を使えるようになりました。

type Coord = [x: number, y: number];

function move([x, y]: Coord) {
  return `(${x}, ${y})`;
}

エディタ上でパラメータヒントが表示されるようになります。

TypeScript 5.3: import attributes

ES モジュールの import attributes に対応しました。

import data from './data.json' with { type: 'json' };

JSON モジュール、CSS モジュール等の型安全なインポートが可能になります。

TypeScript 5.3: switch (true) 型の絞り込み

function process(x: unknown) {
  switch (true) {
    case typeof x === 'string':
      x.toUpperCase(); // x: string に絞り込まれる
      break;
    case typeof x === 'number':
      x.toFixed(2); // x: number に絞り込まれる
      break;
  }
}

TypeScript 5.3 以前は switch (true) で型が絞り込まれませんでしたが、5.3 以降は可能になりました。

TypeScript 5.4: NoInfer ユーティリティ型

ジェネリクスの推論を一部だけ抑制する NoInfer<T> が追加されました。

function pick<T>(obj: T, key: keyof T): unknown {
  return obj[key];
}

// 従来: T の推論が第2引数にも使われてしまう
// 5.4: NoInfer で第1引数からだけ推論

function pick<T>(obj: T, key: NoInfer<keyof T>): unknown {
  return obj[key];
}

ライブラリ作者にとって型推論を細かくコントロールできる便利な機能です。

TypeScript 5.4: Object.groupBy の型定義

JavaScript の Object.groupBy が TypeScript でも使えるようになりました。

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 },
];

const grouped = Object.groupBy(users, user => user.age);
// grouped: { 30: [{ name: 'Alice' }, { name: 'Charlie' }], 25: [{ name: 'Bob' }] }

実務で使えるテクニック

1. satisfies 演算子（TypeScript 4.9+、5.xで安定）

type Theme = 'light' | 'dark';
type Colors = Record<Theme, { bg: string; text: string }>;

const colors = {
  light: { bg: '#ffffff', text: '#000000' },
  dark: { bg: '#000000', text: '#ffffff' },
} satisfies Colors;

// colors.light.bg の型が推論される（Record より狭い型）

as より型安全で、リテラル型を保持したまま制約を満たすことを保証します。

2. Template Literal Types で柔軟なユニオン

type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type APIPath = `/api/${string}`;
type Endpoint = `${HTTPMethod} ${APIPath}`;

const endpoint: Endpoint = 'GET /api/users'; // OK

3. const アサーションの多用

const routes = {
  home: '/',
  about: '/about',
  blog: '/blog',
} as const;

type Route = typeof routes[keyof typeof routes];
// '/' | '/about' | '/blog'

tsconfig.json の推奨設定

TypeScript 5.x 向けの推奨設定:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noFallthroughCasesInSwitch": true,
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

特に重要な設定:

• noUncheckedIndexedAccess: 配列/オブジェクトのインデックスアクセスで undefined を含む
• verbatimModuleSyntax: import/export 文の厳密化
• moduleResolution: "bundler": Vite/esbuild 向けの現代的解決

移行時の注意点

TypeScript 4.x → 5.x

• experimentalDecorators を使っている場合は継続使用可能（警告あり）
• lib の最小バージョンが ES2018 に
• emitDecoratorMetadata は新デコレータと非互換

自動移行ツール

npx tsc --init  # 新しい tsconfig のテンプレート
npx typescript-language-server --version  # エディタ側も更新

まとめ

TypeScript 5.x での主要な進化:

• 5.0: デコレータ正式対応、const 型引数
• 5.1: void 型の柔軟化、属性型改善
• 5.2: using 宣言、Disposable パターン
• 5.3: import attributes、switch 絞り込み
• 5.4: NoInfer、Object.groupBy

これらの機能は、既存コードの型安全性を高めつつ、ボイラープレートを削減します。まずは satisfies と const 型引数から導入するのがおすすめです。

参考リンク

• TypeScript 5.0 Release Notes
• TypeScript 5.4 Release Notes
• TypeScript Handbook
• TypeScript GitHub Repository