VSCodeでTypeScriptを簡単に動かす環境構築

この記事は、TypeScript始めたいけどなにしたらいいのかわかんね、という人向けです。

前提として必要なもの

• Node.js（npmを使います）
• 好きなエディタ（VSCodeが標準でTypeScriptをサポートしてるので便利）
• Macで検証しています

TypeScriptのインストール

$ npm install -g typescript

成功したら
$ tsc --version でバージョンをチェックしてみましょう。
Version 4.2.3などと表示されたらOKです。

コンパイル環境を作る

ここからはVSCodeを使う前提で書いていきます。

package.jsonの作成

プロジェクトを作成したいディレクトリの配下に移動して下記コマンドを実行。
$ npm init
package.jsonが作成されます。プロジェクト名などが質問されるので適当に入力します。必須でない項目は空でもOKです。
そうして出来たpackage.jsonは初期状態はこんな感じになってますが…

{
  "name": "hoge",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

こう、変更します。nameとかversionは適当でいいです。

{
  "name": "hoge",
  "version": "1.0.0",
  "private": true, // モジュールを公開する必要がなければtrueにしておきます
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",　// ここにTypeScriptを指定しておく
    "watch": "tsc -w" // あとで自動コンパイルのために必要になります
  }
}

tsconfig.jsonの作成

$ tsc --init
でtsconfig.jsonを作成します。
作成されたtsconfig.jsonにはたくさん項目がありますが、最低限は以下です。

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "outDir": "./dist/js",                        /* Redirect output structure to the directory. */
    "rootDir": "./src/ts",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
   
  },
  "exclude": [
        "node_modules"
    ]
}

rootDirにはTypeScriptファイルを置く場所を指定し、outDirにはコンパイルしたJavaScriptファイルを出力する場所を指定します。このへんはプロジェクトの構造に合わせてお好みで。

以上のファイルをプロジェクトの直下に置いておきます。

自動コンパイル

ここまで出来たら適当な.tsファイルを用意します。
今回はサンプルとしてこんな風にしました。

const test: string = "world!";
console.log(`Hello ${test}`);

JavaScriptが出力されるか確認するだけなので、console.logだけでもOKですが、せっかくなのでconstを使います。

そしたらプロジェクトの階層で
$ npm run watch
を実行します。

tsc -w　が呼ばれているでしょうか。
エラーがなく成功すれば、outDirとして指定したフォルダにJavaScriptファイルが生成されていると思います。
エラーが出る場合はだいたいpackage.jsonが間違っていたりするときなので見直してみましょう。
これで.tsファイルを保存するたびに.jsファイルが更新されるようになりました。停止したいときはcontrol＋Cで。

以上で簡単にTypeScriptを作る環境が出来ました。今回はMacOS,VSCodeで検証しています。あくまで最低限です。
より詳細は下記の公式ドキュメントをご参照ください。

参考記事