typescript-devdependencies

TypeScript と @types は devDependencies に入れる

概要

TypeScript は開発ツールであり、実行時には存在しません。同様に、@types パッケージに含まれるのは型宣言のみで、実行時のコードはありません。どちらも dependencies ではなく、devDependencies としてインストールする必要があります。これにより、本番環境向けビルドを軽量に保ち、バージョンの競合を防げます。

dependencies と devDependencies の違いを理解することは、ライブラリの作者とアプリケーション開発者のどちらにとっても重要です。

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

• 新しい TypeScript プロジェクトをセットアップするとき
• @types パッケージをインストールするとき
• package.json の依存関係を設定するとき
• TypeScript ライブラリを公開するとき
• プロジェクトの依存関係を管理するとき

鉄則

TypeScript と @types パッケージは devDependencies に入れます。開発時のみ使うツールであり、実行時には存在しません。

検出

次のような package.json の問題に注意してください。

{
  "dependencies": {
    "typescript": "^5.0.0",      // WRONG: Should be devDependency
    "@types/node": "^20.0.0",    // WRONG: Should be devDependency
    "@types/react": "^18.0.0"    // WRONG: Should be devDependency
  }
}

正しい設定

{
  "devDependencies": {
    "typescript": "^5.2.2",
    "@types/node": "^20.0.0",
    "@types/react": "^18.2.0"
  },
  "dependencies": {
    "react": "^18.2.0"  // Runtime dependency
  }
}

インストールコマンド

# TypeScript itself - dev dependency
npm install --save-dev typescript

# @types for runtime dependencies - also dev dependency
npm install react                    # Runtime dependency
npm install --save-dev @types/react  # Type definitions

# @types for Node.js built-ins
npm install --save-dev @types/node

なぜ devDependencies なのか？

// TypeScript compiles away - not in output
const greeting: string = "Hello";  // Type annotation
// Compiles to:
const greeting = "Hello";  // No types in JS output

// @types packages contain only .d.ts files
// No runtime code - safe to exclude from production

ライブラリの公開

{
  "name": "my-library",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "dependencies": {
    "lodash": "^4.17.0"  // Runtime dependency
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "@types/lodash": "^4.14.0"
  },
  "peerDependencies": {
    "react": "^18.0.0"  // User provides this
  },
  "peerDependenciesMeta": {
    "react": {
      "optional": true
    }
  }
}

設定の確認

# See what's in dependencies vs devDependencies
npm list --prod        # Production dependencies only
npm list --dev         # Dev dependencies only

# Check for misplaced TypeScript dependencies
npm ls typescript @types/*

プレッシャーに負けないための手順

依存関係を設定するときは、次の点を確認してください。

1. 本番環境で実行されますか？ TypeScript と @types は実行されません。
2. 型定義には --save-dev を使う：@types パッケージには必ず使います。
3. 公開前に確認する：npm pack で公開される内容を確認できます。
4. package.json を見直す：正しく分類されていることを確認します。

注意すべき点

アンチパターン	問題	解決策
dependencies に typescript がある	本番環境向けビルドが肥大化します	devDependencies に移します
dependencies に @types/* がある	本番環境では不要です	devDependencies に移します
依存パッケージ用の @types がない	型安全性がありません	@types を devDependency として追加します

よくある正当化

「TypeScript をグローバルに使えるようにしたい」

実際には：プロジェクトの TypeScript バージョンを実行するには、npx tsc を使います。グローバルにインストールすると、バージョンの不一致が発生します。

「@types は実行時のパッケージと同じ場所に置くべき」

実際には：実行時のパッケージは dependencies に、@types は devDependencies に入れます。両者は連携しますが、役割は異なります。

「アプリケーションなら関係ない」

実際には：node_modules を小さく保ち、意図を明確にできます。どのような場合にも適切な方法です。

クイックリファレンス

パッケージの種類	インストール時の指定	例
TypeScript	--save-dev	npm i -D typescript
@types/*	--save-dev	npm i -D @types/node
実行時ライブラリ	--save	npm i lodash
ライブラリ用の型定義	--save-dev	npm i -D @types/lodash

要点

TypeScript と @types は開発ツールです。本番環境向けビルドを軽量に保ち、実行時に何が動作するのかを混同しないよう、devDependencies としてインストールしてください。

参考資料

• Dan Vanderkam 著『Effective TypeScript, 2nd Edition』
• 項目 65：TypeScript と @types は devDependencies に入れる