ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

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コマンドでコンパイルする。

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/*"
  ]
}

再度、tscコマンドを実行したら、コンパイルできた!

一件落着。