three-versions-types

型宣言に関わる3つのバージョンを理解する

概要

TypeScript の型を扱うときは、使用しているパッケージのバージョン、その型宣言（@types）のバージョン、そして TypeScript 自体のバージョンの3つを揃える必要があります。これらのバージョンが一致していないと、実行時にはコードが動作する場合でも、わかりにくい型エラーが発生することがあります。

この3つのバージョンを理解しておくと、型の互換性に関する問題の診断と予防に役立ちます。

3つのバージョン

1. パッケージのバージョン - 実行時ライブラリ（例：[email protected]）
2. @types のバージョン - 型宣言（例：@types/[email protected]）
3. TypeScript のバージョン - TypeScript コンパイラー（例：[email protected]）

このスキルを使用する場面

• 型宣言の公開
• バージョンの競合のデバッグ
• @types パッケージの使用
• ライブラリ依存関係の管理
• 実行時の動作と一致しない型エラー

鉄則

パッケージ、@types、TypeScript のバージョンに互換性を持たせてください。原因のわかりにくい型エラーを避けるため、これらは一緒に更新してください。

よくあるバージョンの問題

// Package updated but @types not updated
import { newFeature } from 'library';  // Runtime works
// Error: Module 'library' has no exported member 'newFeature'

// TypeScript too old for new type features
// Error: Type instantiation is excessively deep
// (Newer @types use features old TS doesn't support)

// @types too new for package version
// Types reference features not in actual package

ベストプラクティス

// package.json
{
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.191",
    "typescript": "^5.2.2"
  }
}

バージョンの確認

# Check all three versions
npm ls lodash @types/lodash typescript

# Check for outdated packages
npm outdated

# Update together
npm update lodash @types/lodash typescript

参考資料

• Dan Vanderkam 著『Effective TypeScript』第2版
• 項目66：型宣言に関わる3つのバージョンを理解する