typescriptのmoduleインポートとtsconfig.jsonの設定について
果たして、はてなブログでうまくディレクトリ構造を表現できるか謎だが、試してみる。
下のようなディレクトリ構成でtsファイルとjsファイルがあったとする。
hoge.js tsconfig.json _src | |-- app.ts _build
app.tsは下のようなソースコードだったとする。
import hoge from "hoge" class Foo { constructor() { } } new Foo();
tsc
しかし、hogeモジュールが見当たらないというエラーが発生して、コンパイルできない。
_src/app.ts:1:18 - error TS2307: Cannot find module 'hoge'. 1 import hoge from "hoge"
ちなみに、tsconfig.jsonファイルは下のような構成である。
{ "compilerOptions": { "outDir": "./_build", "removeComments": true, "watch":true }, "include": [ "./_src/*" ] }
確かにapp.tsファイルに対してhogeモジュールは、どこにあるのか、そして何を指し示しているのかわからない。
従って、どこかで指定する必要がある。
調べた結果、tsconfig.jsonファイルにpathsプロパティーを追加すれば解決することが判明した。
さっそく指定してみた。
{ "compilerOptions": { "outDir": "./_build", "removeComments": true, "paths": { "hoge":["hoge.js"] }, "watch":true }, "include": [ "./_src/*" ] }
再度、tscコマンドを叩いても、baseUrlを指定しろとエラーが発生してしまいコンパイルできない。
tsconfig.json:5:5 - error TS5060: Option 'paths' cannot be used without specifying '--baseUrl' option. 5 "paths": {
そこで最終的に、baseUrlプロパティーを追加した。
{ "compilerOptions": { "outDir": "./_build", "removeComments": true, "baseUrl":".", "paths": { "hoge":["hoge.js"] }, "watch":true }, "include": [ "./_src/*" ] }
一件落着。