Node.jsでTypeScriptの環境を構築します。
構築する環境について
本記事では、以下のバージョンで構築しています。
$ node -v
v18.12.1
$ npm -v
9.1.2以降の手順で、 Node.jsのバージョンが必要となりますので、必ず確認してください。
TypeScriptをインストールする
TypeScriptをインストールしていきます。
$ npm install -D typescript @types/node@18使用しているバージョンがv18.12.1ですので、@typesパッケージも同じバージョンのものを指定します。
インストールできたらインストールされているバージョンを確認します。
$ npx tsc --version
Version 4.9.4上記のようにtscコマンドを使ってバージョンが表示できればインストールは完了しています。
tsconfig.jsonを作成する
次にTypeScriptの設定ファイルのtsconfig.jsonを作成します。まずは、以下のコマンドを実行してファイルを作成します。
$ npx tsc --initこのままでも動作しますが、一部設定を変更しておきます。
{
"compilerOptions": {
- // "outDir": "./", /* Specify an output folder for all emitted files. */
+ "outDir": "./dist", /* Specify an output folder for all emitted files. */
- }
+ },
+ "include": [
+ "src/**/*"
+ ]
}
ここでは、TypeScriptファイルの格納先（include）とコンパイルして作成されるJavaScriptファイルの出力先（outDir）を追加・変更しています。
環境の構築時期やTypeScriptのバージョン、プロジェクトの都合によっては他の設定も変更することがありますが、ここでは省略します。
動作確認
実際に動作確認をしてみましょう。まずはsrc/index.tsを作成し、ファイルの中身は以下のようにします。
function greet(name: string): string {
return `Hello, ${name}!`;
}
console.log(greet("John"));以下のコマンドを実行し、src/index.tsをコンパイルします。
$ npx tscファイルはdist/index.jsにされ、設定の違いで多少異なるかもしれませんが、以下のように出力されます。
"use strict";
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("John"));
実行にはJavaScriptファイルを使用します。
$ node dist/index.js
Hello, John!エラーなくメッセージが表示されれば正しくコンパイルされています。
package.jsonにスクリプトを追加する
package.jsonにスクリプトを追加してnpmコマンドでビルドできるようにします。
{
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "build": "tsc",
+ "watch": "tsc --watch"
},
}ここでは2つのスクリプトを追加しています。ひとつはビルドを行うスクリプト（build）で、もう一つは変更を監視して変更があればビルドを行うスクリプトです（watch）。
追加したコマンドは以下のように実行します。
$ npm run build
$ npm run watch
