TypeScript 5.5新機能 - 推論改善とパフォーマンス向上

TypeScript 5.5の概要

TypeScript 5.5は、開発者体験とパフォーマンスを大幅に向上させるアップデートです。型推論の改善、正規表現の構文チェック、エディタの高速化など、実用的な機能が多数追加されました。

flowchart TB
    subgraph TS55["TypeScript 5.5 主要な新機能"]
        subgraph TypeSystem["型システムの改善"]
            TS1["推論されたType Predicates"]
            TS2["定数インデックスアクセスの絞り込み"]
            TS3["typeof演算子の型絞り込み改善"]
        end

        subgraph Regex["正規表現サポート"]
            R1["正規表現リテラルの構文チェック"]
            R2["グループ名の補完"]
            R3["無効なフラグの検出"]
        end

        subgraph Perf["パフォーマンス"]
            P1["エディタ応答速度 10-20%向上"]
            P2["ビルド時間の短縮"]
            P3["メモリ使用量の削減"]
        end
    end

推論されたType Predicates

TypeScript 5.5では、関数がType Predicate（型述語）を返すことを自動的に推論できるようになりました。

// TypeScript 5.4以前: 明示的なType Predicateが必要
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

// TypeScript 5.5: 自動推論
function isString(value: unknown) {
  return typeof value === 'string';
}

// 使用例
const values: (string | number)[] = ['hello', 42, 'world'];

// 5.5では自動的に型が絞り込まれる
const strings = values.filter(isString);
// strings の型: string[]

// 配列メソッドでの活用
const mixedArray = [1, 'two', null, 3, undefined, 'four'];

const numbers = mixedArray.filter(
  (item): item is number => typeof item === 'number'
);

// 5.5ではこれもOK（自動推論）
const validItems = mixedArray.filter(item => item != null);
// validItems の型: (string | number)[]

より複雑な例

interface User {
  id: string;
  name: string;
  email: string;
}

interface Admin extends User {
  role: 'admin';
  permissions: string[];
}

interface Guest {
  role: 'guest';
  sessionId: string;
}

type Person = User | Admin | Guest;

// 自動推論されるType Predicate
function isAdmin(person: Person) {
  return 'role' in person && person.role === 'admin';
}

function isUser(person: Person) {
  return 'email' in person;
}

const people: Person[] = [
  { id: '1', name: 'Alice', email: 'alice@example.com' },
  { id: '2', name: 'Bob', email: 'bob@example.com', role: 'admin', permissions: ['read', 'write'] },
  { role: 'guest', sessionId: 'abc123' },
];

// 自動的に型が絞り込まれる
const admins = people.filter(isAdmin);
// admins の型: Admin[]

const users = people.filter(isUser);
// users の型: (User | Admin)[]

定数インデックスアクセスの絞り込み

// TypeScript 5.5: 定数インデックスでの型絞り込みが改善

interface Config {
  database?: {
    host: string;
    port: number;
  };
  cache?: {
    enabled: boolean;
    ttl: number;
  };
}

function processConfig(config: Config) {
  // 5.4以前: 絞り込まれない
  // 5.5: 正しく絞り込まれる
  if (config['database'] !== undefined) {
    console.log(config['database'].host); // OK in 5.5
    console.log(config['database'].port); // OK in 5.5
  }

  // 配列での例
  const items: (string | undefined)[] = ['a', undefined, 'b'];

  if (items[0] !== undefined) {
    console.log(items[0].toUpperCase()); // OK in 5.5
  }
}

// タプルでの改善
type Tuple = [string, number, boolean?];

function processTuple(tuple: Tuple) {
  if (tuple[2] !== undefined) {
    const flag: boolean = tuple[2]; // OK in 5.5
  }
}

正規表現の構文チェック

// TypeScript 5.5: 正規表現リテラルの構文チェック

// エラー: 無効なエスケープシーケンス
const invalid1 = /\p/; // Error: Invalid escape sequence

// エラー: 閉じられていないグループ
const invalid2 = /hello(/; // Error: Unterminated group

// エラー: 無効なフラグ
const invalid3 = /test/xyz; // Error: Unknown flag 'x', 'y', 'z'

// エラー: 無効な後方参照
const invalid4 = /(\w+) \2/; // Error: Reference to non-existent group

// 正しい正規表現
const valid1 = /\d+/g;
const valid2 = /(?<name>\w+)/;
const valid3 = /hello world/i;

// 名前付きキャプチャグループの補完
const emailRegex = /(?<user>\w+)@(?<domain>\w+\.\w+)/;
const match = 'test@example.com'.match(emailRegex);

if (match?.groups) {
  console.log(match.groups.user);   // 補完が効く
  console.log(match.groups.domain); // 補完が効く
}

// Unicode プロパティエスケープ
const unicodeRegex = /\p{Script=Hiragana}+/u;
const japaneseText = 'こんにちは'.match(unicodeRegex);

jsxImportSourceの自動検出

// TypeScript 5.5: JSX importソースの自動検出

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    // jsxImportSourceを明示的に指定不要になるケースが増加
  }
}

// package.jsonのdependenciesから自動検出
// - react → "react"
// - preact → "preact"
// - @emotion/react → "@emotion/react"

// 手動オーバーライドも可能
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const style = css`
  color: blue;
`;

パフォーマンス改善

最適化の詳細

// 1. 型のキャッシュ改善
// 同じ型の再計算を削減

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

// 5.5では再帰型のキャッシュが改善され、
// 大きなオブジェクト型でも高速に処理

// 2. 条件型の遅延評価
type ConditionalType<T> = T extends string
  ? { type: 'string'; value: string }
  : T extends number
  ? { type: 'number'; value: number }
  : never;

// 必要になるまで評価を遅延

// 3. インポート解決の最適化
// 未使用のインポートの型チェックをスキップ

isolatedDeclarationsモード

// tsconfig.json
{
  "compilerOptions": {
    "isolatedDeclarations": true,
    "declaration": true
  }
}

// このモードでは、エクスポートに明示的な型注釈が必要

// OK: 明示的な戻り値型
export function add(a: number, b: number): number {
  return a + b;
}

// Error: 戻り値型が必要
export function multiply(a: number, b: number) {
  return a * b;
}

// OK: 明示的な型
export const config: { port: number; host: string } = {
  port: 3000,
  host: 'localhost',
};

// Error: 型注釈が必要
export const settings = {
  debug: true,
};

メリット

isolatedDeclarationsのメリット:

新しいSet メソッドの型サポート

// ECMAScript 2025のSet メソッドの型定義

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);

// 和集合
const union = setA.union(setB);
// Set { 1, 2, 3, 4 }

// 積集合
const intersection = setA.intersection(setB);
// Set { 2, 3 }

// 差集合
const difference = setA.difference(setB);
// Set { 1 }

// 対称差
const symmetricDifference = setA.symmetricDifference(setB);
// Set { 1, 4 }

// 部分集合の判定
const isSubset = setA.isSubsetOf(setB); // false
const isSuperset = setA.isSupersetOf(setB); // false
const isDisjoint = setA.isDisjointFrom(setB); // false

アップグレード方法

# npmでアップデート
npm install -D typescript@5.5

# yarnでアップデート
yarn add -D typescript@5.5

# pnpmでアップデート
pnpm add -D typescript@5.5

破壊的変更の確認

// 1. Type Predicateの推論による影響
// 既存のコードで予期しない型の絞り込みが発生する可能性

// 2. 正規表現のチェック
// 以前は通っていた無効な正規表現がエラーになる

// 対策: まずstrict: falseでビルドし、警告を確認

まとめ

参考リンク

• TypeScript 5.5 Release Notes
• TypeScript Handbook
• TypeScript GitHub
• TypeScript Playground