TypeScriptでaliasなパスでmoduleをimportできるように

前回、WebpackとFlowのaliasなパスで読み込むのを書いた（webpack.resolve.aliasを設定しているプロジェクトでの.flowconfig設定）けど、そのTypeScript版。

設定

例えば、設定前は、../../components/buttonとしていたのをcomponents/buttonとしたい時、tsconfig.jsonのbaseUrlとrootDirsをこんな感じで設定します。

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "components/*": ["src/scripts/components/*"],
      "components": ["src/scripts/components"],
    }
  }
}

/*と書くことでマッチしたパスをそのまま後ろに付けて読み込んでくれるようになります。つまり、components/buttonは./src/components/buttonとなってファイルを読み込みます。
また上記のcomponentsの方ですが、これがあると./src/components/index.tsなファイルをcomponentsでインポートできるようになります。

ちなみに面倒くさかったらこれで両方いけます。

"components*": ["src/scripts/components*"]

Webpack+awesome-typescript-loaderと一緒に

Readmeを見ると、{TsConfigPathsPlugin}を使えば解決してくれそうですが、解決してくれませんでした。

ビルド時間増えたみたいなイシューもあったので、ひとまずWebpack.resolve.aliasに同じようなエイリアスを設定して回避することにしました。

webpack.config.js

{
  // ...
  resolve: {
    alias: {
      components: path.resolve(__dirname, '../src/components')
    }
  }
  // ...
}

😇