\

Typescript で開発している人は watch オプションが便利

TypeScript ソースコードはそのままでは実行できません。 tsc コマンドでコンパイルし、 Javascript コードに変換する必要があります。

しかし、コードを変更するたびに tsc コマンドを実行して、内容確認して、とやるのは 本当に面倒ですよね。

今回は、tsc の watch コマンドを使用して、ソースコードが変更されるたびに 自動的にコンパイルしてくれるような設定方法を紹介します。

1. まず、tsconfig.json ファイルを準備する

tsc --init コマンドを実行して、tsconfig.json ファイルを生成します。

この中から、outDir, rootDir, include, exclude を編集します。

  • outDir : コンパイルされた Javascript ソースコードが出力されるフォルダ
  • rootDir : TypeScript ソースコードを配置するフォルダ
  • include : コンパイルする TypeScript ソースコードに含めるファイルやフォルダ
  • exclude : コンパイルする TypeScript ソースコードに含めないファイルやフォルダ

tsconfig.json 設定例

{
  "compilerOptions": {
      ...
    "outDir": "./dist/",                        /* Redirect output structure to the directory. */
    "rootDir": "./src/",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
      ...
  },"include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

package.json で npm スクリプトに登録

npm run watch で TypeScript を自動的にコンパイルするように設定します。

tsc -w コマンドを実行しているだけです。

{
  ...
  "scripts": {
    ...
    "watch": "tsc -w"
    ...
  },
  ...
}

実行例

設定は以上ですので、実行してみます。

[[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hb.afl.rakuten.co.jp/hgc/18648e8b.7d833591.18648e8c.ed1bab3c/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Frakutenkobo-ebooks%2F5456816fd8833397a6aa8b80647873ad%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Frakutenkobo-ebooks%2Fi%2F18341447%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxfQ%3D%3D)

実践TypeScript【電子書籍】[ 吉井健文 ]
価格:3726円 (2019/7/23時点)

[

楽天で購入

](https://hb.afl.rakuten.co.jp/hgc/18648e8b.7d833591.18648e8c.ed1bab3c/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Frakutenkobo-ebooks%2F5456816fd8833397a6aa8b80647873ad%2F%3Fscid%3Daf_pc_bbtn&m=http%3A%2F%2Fm.rakuten.co.jp%2Frakutenkobo-ebooks%2Fi%2F18341447%2F%3Fscid%3Daf_pc_bbtn&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxfQ==)

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱