TypeScript 6.0 Beta登場——新デフォルトと破壊的変更、Next.jsプロジェクトの移行ガイド

はじめに

2026年2月11日、TypeScript 6.0 Betaが公開されました。

TypeScript 6.0は、単なる機能追加リリースではありません。JavaScript版TypeScriptの最終メジャーバージョンです。次のTypeScript 7.0はGoで書き直されたネイティブ版となり、最大10倍の高速化が見込まれています。つまり6.0は「レガシーな設定を一掃し、7.0にスムーズに移行するための橋渡し」という位置づけです。

本記事では、TypeScript 6.0の主要な変更点を整理し、実際にNext.js 16プロジェクトを移行した手順を解説します。

TypeScript 6.0の全体像

3行でまとめると

1. デフォルト値が大幅に変更——strict: true、target: es2025、types: [] などが新デフォルトに
2. レガシー機能が廃止——ES5ターゲット、moduleResolution: node、outFile などが使えなくなる
3. 新しいAPI型定義が追加——Temporal API、Map.getOrInsert、RegExp.escape など

リリーススケジュール

新しいデフォルト値——これが一番影響が大きい

TypeScript 6.0で最もインパクトがあるのは、コンパイラオプションのデフォルト値変更です。

types: [] がデフォルトになった影響

これが一番ハマりやすい変更です。

TypeScript 5.xでは、node_modules/@types/ 配下のすべてのパッケージが自動的に型解決の対象でした。6.0ではデフォルトが []（何も読み込まない）に変更されています。

// TypeScript 5.x: @types/node が自動で読み込まれる
const path = require("path"); // OK

// TypeScript 6.0: types を明示しないと型が見つからない
const path = require("path"); // Error: Cannot find module 'path'

対策： tsconfig.json に使用する型パッケージを明示します。

{
  "compilerOptions": {
    "types": ["node"]
  }
}

これにより、不要な @types/* パッケージの解決をスキップするため、ビルドが20〜50%高速化するというメリットもあります。

noUncheckedSideEffectImports: true がデフォルトに

副作用のみのインポート（CSSファイルなど）に対して、TypeScriptがソースファイルを見つけられない場合にエラーになります。

// Next.jsのlayout.tsx
import "./globals.css"; // Error: Cannot find module or type declarations

Next.jsではCSSインポートはバンドラーが処理するため、TypeScriptの型チェック対象外です。tsconfig.json で無効化する必要があります。

{
  "compilerOptions": {
    "noUncheckedSideEffectImports": false
  }
}

廃止されるレガシー機能

TypeScript 6.0では、時代遅れの機能がハードエラーになります。"ignoreDeprecations": "6.0" で一時的に回避できますが、TypeScript 7.0では完全に削除されます。

target: "es5" ——廃止

// NG: TypeScript 6.0でエラー
{
  "compilerOptions": {
    "target": "es5"
  }
}

ES2015（ES6）以降が最低ターゲットになりました。IE11は2022年にサポート終了しており、実質的な影響はほぼありません。

moduleResolution: "node" ——廃止

旧称 node10 とも呼ばれていた古い解決モード。代わりに nodenext（Node.js向け）または bundler（バンドラー利用時）を使います。

// NG
{ "moduleResolution": "node" }

// OK: バンドラー利用時（Next.js, Vite など）
{ "moduleResolution": "bundler" }

// OK: Node.js直接実行時
{ "moduleResolution": "nodenext" }

esModuleInterop: false ——廃止

常に true として扱われるようになりました。明示的に false に設定するとエラーです。

// Before: namespace import が必要だった
import * as express from "express";

// After: default import が常に正しい
import express from "express";

その他の廃止

// NG: TypeScript 6.0でハードエラー
module Foo {
  export const bar = 10;
}

// OK: namespace を使う
namespace Foo {
  export const bar = 10;
}

import ... asserts 構文も廃止

// NG
import data from "./data.json" asserts { type: "json" };

// OK: with キーワードを使う
import data from "./data.json" with { type: "json" };

新機能

es2025 ターゲット

新しいコンパイルターゲットで、以下のAPIが含まれます。

// Set の集合演算メソッド
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
const union = a.union(b);           // Set {1, 2, 3, 4}
const intersection = a.intersection(b); // Set {2, 3}
const diff = a.difference(b);       // Set {1}

// Promise.try
const result = await Promise.try(() => {
  return riskyOperation();
});

// RegExp.escape
const escaped = RegExp.escape("price: $10.00");
// "price\\:\\ \\$10\\.00"

Temporal API 型定義

Stage 3のTemporal提案の型定義が組み込まれました。Date オブジェクトの後継として設計された、より正確な日時処理APIです。

// 現在時刻から24時間前
const yesterday = Temporal.Now.instant().subtract({ hours: 24 });

// 日付の作成
const meeting = Temporal.PlainDate.from("2026-03-15");

// 期間の計算
const duration = Temporal.Duration.from({ hours: 1, minutes: 30 });

Map/WeakMap の getOrInsert メソッド

キャッシュパターンが簡潔に書けるようになります。

const cache = new Map<string, number>();

// Before: 毎回存在チェックが必要
if (!cache.has("key")) {
  cache.set("key", computeExpensiveValue());
}
const value = cache.get("key")!;

// After: 1行で完結
const value = cache.getOrInsertComputed("key", () => {
  return computeExpensiveValue();
});

DOM ライブラリの統合

dom.iterable と dom.asynciterable が dom に統合されました。

// Before
{ "lib": ["dom", "dom.iterable", "esnext"] }

// After: dom だけで十分
{ "lib": ["dom", "esnext"] }

--stableTypeOrdering フラグ

TypeScript 7.0への移行準備用フラグです。7.0の並列型チェッカーは決定論的な型順序アルゴリズムを使うため、6.0でそれをシミュレートできます。

# CI で TypeScript 7.0 互換性をチェック
npx tsc --noEmit --stableTypeOrdering

注意： 最大25%のスローダウンがあるため、日常開発ではなくCI向けです。

実践：Next.jsプロジェクトの移行手順

ここからは、実際にモリソンのNext.js 16プロジェクトをTypeScript 6.0に移行した手順を紹介します。

ステップ1：インストール

yarn add -D typescript@beta

ステップ2：tsconfig.json の更新

移行前の tsconfig.json：

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": { "@/*": ["./src/*"] }
  }
}

移行後：

{
  "compilerOptions": {
    "target": "ES2025",
    "lib": ["dom", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "types": ["node"],
    "noUncheckedSideEffectImports": false,
    "plugins": [{ "name": "next" }],
    "paths": { "@/*": ["./src/*"] }
  }
}

変更点の整理

ステップ3：ビルド確認

# 型チェック
npx tsc --noEmit

# フルビルド
yarn build

モリソンのプロジェクトでは、noUncheckedSideEffectImports の設定追加のみでエラーなく移行完了しました。

なぜスムーズだったのか

今回の移行がスムーズだった理由は、プロジェクトがすでにモダンな設定を使っていたためです。

✅ strict: true           → 5.xの時点で設定済み
✅ module: "esnext"       → CommonJSではなくESMを使用
✅ moduleResolution: "bundler" → 旧 "node" ではない
✅ esModuleInterop: true  → すでに有効化済み
✅ target: "ES2017"       → ES5ではない

もし strict: false、target: "es5"、moduleResolution: "node" を使っていた場合は、移行にかなりの修正が必要になるでしょう。

ハマりポイント

移行時に遭遇した唯一の問題がCSSインポートのエラーです。

error TS2882: Cannot find module or type declarations for
side-effect import of './globals.css'.

Next.jsでは import "./globals.css" のようなCSSの副作用インポートはバンドラーが処理します。TypeScriptの型チェックとは無関係ですが、TS 6.0では noUncheckedSideEffectImports がデフォルトtrueになったため、対応するソースファイルが見つからないとエラーになります。

解決策は2つあります：

1. tsconfig.jsonで無効化する（推奨）

{ "noUncheckedSideEffectImports": false }

1. 型宣言ファイルを作成する

// src/types/css.d.ts
declare module "*.css" {}

Next.jsプロジェクトでは、CSSインポートが多いため方法1が現実的です。

移行チェックリスト

プロジェクトをTypeScript 6.0に移行する際のチェックリストです。

□ typescript@beta をインストール
□ target が "es5" でないことを確認（es5なら "es2017" 以上に変更）
□ moduleResolution が "node" でないことを確認（"bundler" か "nodenext" に変更）
□ esModuleInterop: false がないことを確認（あれば削除）
□ types を明示的に設定（例: ["node"]）
□ lib から "dom.iterable" を削除
□ CSSインポートがある場合、noUncheckedSideEffectImports: false を追加
□ module Foo {} 構文を namespace Foo {} に変更
□ import ... asserts を import ... with に変更
□ npx tsc --noEmit でエラーチェック
□ yarn build でフルビルド確認

TypeScript 7.0への橋渡し

TypeScript 6.0は、次のTypeScript 7.0（Goネイティブ版）への移行を見据えたリリースです。

TypeScript 5.x → 6.0（レガシー清掃）→ 7.0（ネイティブ化、10倍高速）

6.0で廃止される機能は、7.0では完全に削除されます。ignoreDeprecations: "6.0" は7.0では効きません。今のうちに対応しておくことで、7.0への移行もスムーズになります。

CI環境で --stableTypeOrdering を試しておくのも良いでしょう。7.0の並列型チェッカーで問題が起きないか、事前に確認できます。

まとめ

TypeScript 6.0は「モダンな設定にしているプロジェクトほど移行が簡単」というリリースです。

今すぐやるべきこと：

1. yarn add -D typescript@beta で試す
2. npx tsc --noEmit でエラーを確認
3. 問題なければ3月の正式リリースを待ってアップデート

TypeScript 7.0のネイティブ版が来る前に、6.0でプロジェクトをクリーンにしておきましょう。

---

参考リンク：

• Announcing TypeScript 6.0 Beta — TypeScript Blog
• TypeScript 6.0 Iteration Plan — GitHub
• ts5to6 Migration Tool — GitHub
• A 10x Faster TypeScript（ネイティブ版発表）