TypeScriptの開発環境をVSCodeで準備する

VSCodeを使うとTypeScriptの開発環境を簡単に構築できます。
ここではVisual Studio CodeでTypeScriptの開発環境を準備するための手順を説明します。

前提

Visual Studio CodeとNode.jsがインストール済みであること。

開発環境の構築手順

Node.jsのプロジェクトを作成
TypeScriptのインストール
設定ファイルの作成
VSCodeからのTypeScriptの実行

1. Node.jsのプロジェクトを作成

アプリケーションを管理するためのディレクトリを作成し内部で以下コマンド実行する。
実行が完了すると中にpackage.jsonが作成されます。

npm init -y

2. TypeScriptのインストール

TypeScriptを以下のコマンドでインストールします。

npm install typescript --save-dev

3. 設定ファイルの作成

以下のコマンドを実施し、TypeScript用の設定ファイルを作成します。
実行が完了するとtsconfig.jsonが作成されます。

npx tsc --init

4. VSCodeからのTypeScriptの実行

作成したディレクトリをVScodeで開きます。
サンプルのコードとしてsrcディレクトリを作って中に以下内容のファイルを作成します。

src/main.ts

function hello(word: string): string {
  return `Hello ${word}!`;
}
let message: string = hello("World");
console.log(message);

ターミナルからtscコマンドでtsファイルをjsファイルにコンパイル(トランスパイル)します。成功すると/src/main.jsファイルが作成されます。

tsc ./src/main.ts

nodeコマンドでビルドしたjsファイルを実行します。

$ node ./src/main.js
Hello World!

開発環境の改善

ここまででTypeScriptをJavaScriptに変換し実行できるようになりましたが、変換の自動化(監視)や出力先フォルダの変更など、開発環境の改善のための設定を行います。

TypeScriptの設定(tsconfig.json)

src以下のパスにあるTypeScriptのファイルをコンパイルして、ディレクトリdist以下に出力できるように設定します。また、バックエンドかフロントエンドを対象にするのかに応じて値を変更しておきます。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2020", //コンパイルしたいJavaScriptバージョン
    "module": "commonjs", //モジュールの読み込み方法を指定する [バックエンド(require)]:"commonjs" [フロントエンド(import)]:"esnext"
    "lib": ["es2020"], //参照する型定義 [バックエンド]:"es2020" [フロントエンド]:["es2020", "dom"]
    "jsx": "react", //.tsxファイルの変換方法 [フロントエンド]:"react"
    "sourceMap": true, //ソースマップファイルの生成を有効化する
    "outDir": "./dist", //.jsファイルの出力先パス
    "rootDir": "./src", //型定義ファイルでない入力ファイルの共通パス
    "strict": true, //厳密な型チェックを行う
    "baseUrl": "src", //相対パスの起点となるディレクトリを指定
    "esModuleInterop": true, //インポート相互運用のコードを出力を行う
    "experimentalDecorators": true, //デコレータの実験的なサポートを有効にする
    "emitDecoratorMetadata": true, //デコレータのメタ情報を出力する
    "skipLibCheck": true, //型定義ファイルのチェックをスキップ
    "forceConsistentCasingInFileNames": true //ファイル名の大文字小文字を区別する
  },
  "include": ["src/**/*"], //プログラムに含めるファイルのパス
  "exclude": ["dist", "node_modules"] //プログラムから除外するファイルのパス
}

型情報のインストール

必要な型情報をインストールしておきます。例えばNode.jsの型情報は以下コマンドで導入できます。

npm install @types/node --save-dev

@types/nodeをインストールしない場合、 tsconfig.jsonのオプションで"lib":["es2020", "dom"]が必要になることがあります。

.tsファイルの変更監視

以下コマンドを実行すると、tsファイルの変更を検知して自動的にjsファイルの作成が行われるようになります。

tsc --watch

TypeScriptを直接実行

ts-nodeをインストールすると、直接TypeScriptのファイルが実行できるようになります。

$ npm install ts-node --save-dev
$ npx ts-node ./src/main.ts
> starttypescript@1.0.0 start-ts
> ts-node src/main.ts
Hello World!

npm run コマンド設定

コンパイルや実行・監視などをnpm runのコマンドから手軽に行えるようにするため、 package.jsonのscriptsに実行したいコマンドを記載します。

package.json

{
  "scripts": {
    "start": "node dist/main.js",
    "start-ts": "ts-node src/main.ts",
    "build": "tsc",
    "watch": "tsc --watch"
  }
}

これで以下のように実行できるようになります。

npm run # => main.jsの実行(npm run startと同様)
npm run start-ts # => main.tsの実行
npm run build # => tsファイルからjsファイルへのコンパイル
npm run watch # => tsファイルの変更を検知して自動的にjsファイルを出力

参考

作成日 : 2023年01月28日