tsconfig.jsonのpathsプロパティでエイリアスを設定：TypeScriptのコードをもっと便利に

TypeScript で tsconfig.json のパスを使う方法

パスエイリアスの設定

paths プロパティを使って、パスエイリアスを設定することができます。これは、長いパスを短く分かりやすい名前で置き換えることができる便利な機能です。

例：

{
  "compilerOptions": {
    "paths": {
      "@components": ["./src/components"],
      "@utils": ["./src/utils"]
    }
  }
}

この設定の場合、@components というエイリアスは ./src/components というパスを指します。なので、コードの中で以下のように書くことができます。

import Button from "@components/Button";

これは、import Button from "./src/components/Button"; と同じ意味になります。

baseUrl プロパティを使って、プロジェクトのベースパスを設定することができます。これは、すべてのファイルパスをこのパスからの相対パスとして解決することを意味します。

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

この設定の場合、./components/Button というファイルパスは ./src/components/Button と解決されます。

Node.js モジュールの解決

paths プロパティを使って、Node.js モジュールの解決パスを設定することができます。これは、node_modules フォルダ以外にあるモジュールをimportできるようにする便利な機能です。

{
  "compilerOptions": {
    "paths": {
      "my-module": ["../my-module"]
    }
  }
}

import { MyModule } from "my-module";

ts-node は、TypeScript ファイルを直接実行するためのツールです。ts-node は tsconfig.json の設定を読み込むことができますが、いくつかの制限があります。

• baseUrl プロパティは無視されます。
• paths プロパティは、エイリアスが @ で始まらない場合のみ読み込まれます。

これらの制限を回避するには、tsconfig-paths というモジュールを使うことができます。tsconfig-paths は、ts-node が tsconfig.json の paths プロパティを読み込めるようにするモジュールです。

tsconfig.json のパス設定に関する注意点

• パス設定は、プロジェクトの規模や複雑さに応じて調整する必要があります。
• パス設定を誤ると、コードのコンパイルエラーや実行エラーが発生する可能性があります。
• パス設定は、チームメンバー間で共有して、プロジェクト内のファイルパスを統一する必要があります。

• 上記以外にも、paths プロパティを使って、複数のパスを一つのエイリアスにマップしたり、ワイルドカードを使ってパスを指定したりすることができます。
• tsconfig.json ファイルは、プロジェクトのルートディレクトリに配置するのが一般的です。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es5", "dom"],
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./src",
    "paths": {
      "@components": ["./components"],
      "@utils": ["./utils"],
      "my-module": ["../my-module"]
    }
  },
  "include": ["./src/**/*.ts"]
}

index.ts

import Button from "@components/Button";
import { MyModule } from "my-module";

const button = new Button();
button.onClick(() => {
  const myModule = new MyModule();
  myModule.doSomething();
});

このサンプルコードでは、以下の設定をしています。

• target: コンパイルするJavaScriptのバージョンを指定しています。
• module: モジュールの形式を指定しています。
• lib: 使用するライブラリを指定しています。
• outDir: コンパイルされたファイルの出力ディレクトリを指定しています。
• baseUrl: ファイルパスを解決する基準となるパスを指定しています。
• paths: パスエイリアスとモジュールの解決パスを指定しています。
• include: コンパイル対象となるファイルを指定しています。

この設定に基づいて、index.ts ファイルをコンパイルすると、./dist ディレクトリに index.js ファイルが生成されます。

実行

以下のコマンドを実行して、index.js ファイルを実行することができます。

node dist/index.js

このコマンドを実行すると、ボタンがクリックされたときに MyModule の doSomething() メソッドが呼び出されることを確認できます。

補足

このサンプルコードは、あくまでも一例です。プロジェクトの規模や複雑さに応じて、設定を調整する必要があります。

tsconfig.json のパス解決の代替方法

相対パス

最も単純な方法は、相対パスを使用することです。例えば、./components/Button というファイルをインポートしたい場合は、以下のように記述できます。

import Button from "./components/Button";

Node.js モジュールの場合は、node_modules フォルダにインストールされているモジュールであれば、モジュール名を直接インポートすることができます。例えば、my-module というモジュールをインポートしたい場合は、以下のように記述できます。

import { MyModule } from "my-module";

paths プロパティ以外にも、パスエイリアスを設定するためのファイルを用意することができます。例えば、./aliases.json というファイルに以下のような設定を記述することができます。

{
  "@components": "./components",
  "@utils": "./utils"
}

このファイルを用意した上で、tsconfig.json ファイルで以下のように設定します。

{
  "compilerOptions": {
    "paths": ["./aliases.json"]
  }
}

import Button from "@components/Button";

シンボリックリンクを使って、パスを解決することもできます。例えば、./components フォルダに対して ./src/components というシンボリックリンクを作成すると、以下のように記述できます。

import Button from "./components/Button";

モジュールバンドラー

Webpack や Rollup などのモジュールバンドラーを使用する場合は、バンドラーの設定でパス解決を行うことができます。

どの方法を使うべきかは、プロジェクトの規模や複雑さ、開発環境によって異なります。

• 小規模なプロジェクトであれば、相対パスや Node.js モジュールパスを使うのが簡単です。
• 大規模なプロジェクトであれば、パスエイリアス設定ファイルやシンボリックリンクを使うと、コードをより分かりやすく管理することができます。
• モジュールバンドラーを使用する場合は、バンドラーの設定でパス解決を行うのが一般的です。