TypeScript 2.0で型定義ファイルをマスターしよう！tsconfig.jsonの「types」フィールド徹底解説

TypeScript 2.0における「tsconfig.json」の「types」フィールド：詳細解説

TypeScript 2.0では、tsconfig.jsonファイル内の「types」フィールドを使用して、プロジェクトで使用される型定義ファイルを指定することができます。これは、型チェックの精度を向上させ、コンパイルエラーを減らすのに役立ちます。

「types」フィールドの役割

「types」フィールドには、以下の2つの役割があります。

1. 特定のライブラリまたはフレームワークの型定義ファイルを指定する
   

   • 例えば、nodeライブラリの型定義ファイルを指定するには、以下のように記述します。

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

2. 型定義ファイルの検索パスを指定する
   

   • 型定義ファイルの場所を明示的に指定することで、TypeScriptコンパイラが型定義ファイルを効率的に見つけられるようにします。
   • 例えば、node_modulesディレクトリ内の型定義ファイルをすべて検索するには、以下のように記述します。

   {
     "compilerOptions": {
       "typeRoots": ["node_modules"]
     }
   }
   

「types」フィールドと「typeRoots」フィールドの違い

「types」フィールドと「typeRoots」フィールドは、型定義ファイルを指定する方法としてそれぞれ異なる役割を果たします。

• 「typeRoots」フィールド
  
• 「types」フィールド
  

「types」フィールドと「package.json」の「types」フィールドの関係

package.jsonファイル内の「types」フィールドは、プロジェクトで使用される型定義ファイルの場所を指定するものであり、tsconfig.jsonファイル内の「types」フィールドとは異なります。

以下の例は、tsconfig.jsonファイルを使用して、特定のライブラリとフレームワークの型定義ファイルを指定する方法を示しています。

{
  "compilerOptions": {
    "types": [
      "node",
      "@types/express",
      "@types/react",
      "@types/react-dom"
    ]
  }
}

この例では、TypeScriptコンパイラは、以下の型定義ファイルを検索します。

• node_modules/@types/react-dom
• node_modules/node

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "types": [
      "node",
      "@types/express",
      "@types/react",
      "@types/react-dom"
    ]
  }
}

コードの説明

このコードは、以下の設定を行っています。

• 以下の型定義ファイルを検索します。
• コンパイル結果を出力するディレクトリを「dist」に設定します。(outDir: "./dist")
• CommonJS形式のモジュールとしてコンパイルします。(module: "commonjs")
• コンパイル対象のJavaScriptのバージョンをES5に設定します。(target: "es5")

使い方

このコードを「tsconfig.json」ファイルに保存し、プロジェクトのルートディレクトリに配置します。

実行例

以下のコマンドを実行して、TypeScriptファイルをコンパイルします。

tsc

コンパイルが成功すると、distディレクトリにJavaScriptファイルが生成されます。

• このコードはあくまで一例です。プロジェクトの要件に合わせて、必要な型定義ファイルを指定してください。

以下の3つの方法があります。

1. 「/// <reference path="...">」コメントを使用する
   

   • 型定義ファイルのパスを指定するコメントを、TypeScriptファイルの先頭に記述します。
   • 例:

   /// <reference path="node_modules/@types/express/index.d.ts" />
   
   import { Request, Response } from 'express';
   
   function hello(req: Request, res: Response): void {
     res.send('Hello, World!');
   }
   

2. 「baseUrl」と「paths」プロパティを使用する
   

   • 型定義ファイルの場所を相対パスで指定できるプロパティを使用します。

   {
     "compilerOptions": {
       "baseUrl": "./",
       "paths": {
         "@types/*": ["node_modules/@types/*"]
       }
     }
   }
   

   • 上記の例では、@typesプレフィックスが付いたすべての型定義ファイルが、node_modules/@typesディレクトリ下にあるとみなされます。

3. 「typeRoots」プロパティを使用する
   

   • 型定義ファイルを検索するディレクトリを指定するプロパティを使用します。

   {
     "compilerOptions": {
       "typeRoots": [
         "node_modules/@types"
       ]
     }
   }
   

   • 上記の例では、TypeScriptコンパイラは、node_modules/@typesディレクトリ内のすべての型定義ファイルを検索します。

各方法の比較