TypeScriptの新機能をざっくり整理する
TypeScript 5.x シリーズでは、型システムの強化や開発体験を向上させる多くの機能が追加されています。本記事では、特に日常のコーディングで役立つ機能を厳選して紹介します。
const 型パラメータ（5.0）
関数の型パラメータに const 修飾子を付けることで、リテラル型を維持したまま受け渡しができるようになりました。
function getConfig<T extends readonly string[]>(keys: T): T {
return keys
}
// 従来: string[] と推論される
const config1 = getConfig(['dev', 'staging', 'prod'])
// const 型パラメータ使用: リテラル型のタプルとして推論される
const config2 = getConfig<const>(['dev', 'staging', 'prod'])
// type: readonly ["dev", "staging", "prod"]
オブジェクトのプロパティをリテラル型で扱いたい場合に便利です。as const を呼び出し側で書かなくて済むので、コードがすっきりします。
デコレータの安定化（5.0）
TypeScript 5.0 から、Stage 3 の ECMAScript デコレータが標準サポートされました。従来の実験的デコレータと異なり、コンパイルオプションで experimentalDecorators を有効にする必要はありません。
function log(target: any, context: ClassMethodDecoratorContext) {
const methodName = String(context.name)
return function (this: any, ...args: any[]) {
console.log(`${methodName} called with`, args)
return target.call(this, ...args)
}
}
class Calculator {
@log
add(a: number, b: number) {
return a + b
}
}
Angular や NestJS を使っている開発者にはおなじみの構文ですが、標準仕様に準拠した形に変わっている点に注意が必要です。
satisfies 演算子（4.9 / 5.x で定着）
satisfies を使うと、変数の型を推論させつつ、特定の型を満たしているかを検証できます。
type Color = 'red' | 'green' | 'blue'
type Palette = Record<string, Color>
const palette = {
primary: 'blue',
secondary: 'green',
// 間違えて 'yellow' を指定するとエラーになる
} satisfies Palette
// palette.primary は string ではなく "blue" と推論される
従来の型アノテーション（: Palette）では推論がリテラル型ではなく string になってしまいましたが、satisfies は推論を維持したまま型チェックを行えるのが利点です。
改善されたモジュール解決（5.x シリーズ）
TypeScript 5.x では、moduleResolution に bundler オプションが追加されました。Vite や esbuild などのモダンバンドラーの解決ルールに合わせた設定が可能です。
{
"compilerOptions": {
"moduleResolution": "bundler",
"module": "ESNext",
"target": "ES2022"
}
}
これにより、package.json の exports フィールドや .ts 拡張子なしのインポートなど、モダンなエコシステムとの互換性が向上しました。
テンプレートリテラル型の実用的な使い方
テンプレートリテラル型は 4.1 で導入されましたが、5.x での結合型（Union）の展開と組み合わせることで、より強力になっています。
type Size = 'sm' | 'md' | 'lg'
type Variant = 'primary' | 'secondary'
// "btn-sm-primary" | "btn-sm-secondary" | "btn-md-primary" ...
type ButtonClass = `btn-${Size}-${Variant}`
function getButtonClass(size: Size, variant: Variant): ButtonClass {
return `btn-${size}-${variant}`
}
UI コンポーネントのクラス名や、API のエンドポイントパスを型安全に構築したい場合に重宝します。
まとめ
TypeScript 5.x の機能は、どれも「型の安全性を高めつつ、開発者の記述量を減らす」方向に進化しています。特に satisfies と const 型パラメータは、既存のコードベースに導入しやすく、すぐに効果を実感できるのでおすすめです。バージョンアップの際には、これらの新機能をぜひ活用してみてください。