【初心者向け】TypeScriptの環境構築 #JavaScript

はじめに

Node.js上でTypeScriptを動かす環境を構築する際に必要な手順をまとめました。今回はMacOSでの環境構築になるので、WindowsOSを利用している場合はコマンドを適宜読み替えてください。

Node.jsのインストール

TypeScriptは実行する際にTypeScriptコンパイラが必要となり、Node.jsはそれを動作させる際に必要となります。

以下のNode.js公式サイトからインストーラーをダウンロードして、それを実行する事でNode.jsのインストールが完了します。

基本的には最新バージョンをインストールすれば問題はありませんが、偶数のメジャーバージョンが安定版とされているため、偶数バージョンをインストールすることが望ましいです。

TypesScriptプロジェクト用のディレクトリ作成

まずは適当な名前でTypeScriptプロジェクト用のディレクトリを作成し、その中にpackage.jsonを作成します。

$ mkdir practice
$ cd practice
$ npm init --yes #package.jsonの作成コマンド

package.jsonはNode.jsプロジェクトに必ず存在するファイルで、プロジェクトの依存関係やバージョン番号、プロジェクトの設定を記述する機能があります。

次にpackage.jsonをテキストエディタで開き、"type": "module",を追記します。

package.json

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

これでpacjage.jsonの準備は終わりです。

TypeScriptのインストール

続いてTypeScriptのインストールを行います。下記のコマンドを実行してください。

$ npm install --save-dev typescript @types/node

npm installコマンドは指定したパッケージをプロジェクトにインストールするコマンドで、今回はtypescriptと@types/nodeの2つのパッケージをインストールします。また--save-devオプションはインストールするパッケージが、「ビルドやその他開発時にのみ必要なパッケージ」であることを意味します。

TypeScriptをインストールした後のディレクトリの中身は下記のようになります。

*
|--node_modules
|    |--@types
|    |　　　　　　　　　|--node
|　　　　　　　　|--typescript
|--package-lock.json
|--package.json

node_modulesというディレクトリとpackage-lock.jsonというファイルが作成されたことが確認出来ます。node_module配下にはnpm installによってインストールされたパッケージが格納され、先ほどインストールした2つのパッケージが確認出来ます。

またpackage-lock.jsonには現在インストールされているパッケージ情報を記述したファイルで、npmによって自動的に書き換えられます。

tsconfig.jsonの準備

続いてtsconfig.jsonの準備を行います。tsconfig.jsonとはTypeScriptコンパイラに対する設定を記述したファイルです。下記のコマンドを実行してください。

$ npx tsc --init

生成されたtsconfig.jsonをテキストエディタで開き、下記の部分を修正・加筆します。

tsconfig.json

{
    "compilerOptions":{
        "target": "es2020", *修正
        "module": "esnext", *修正
        "moduleResolution": "node", *コメントアウトを解除
        "outDir": "./dist", *コメントアウトを解除し、修正
    },
    "include": ["./src/**/*.ts"] *追記
}

重要なのがoutDirとincludeで、これはsrcディレクトリ以下の全ての.tsファイルがコンパイルの対象となり、TypeScriptコンパイラによるコンパイル結果はdistディレクトリ配下のJavaScriptファイルとして出力されるようになります。

TypeScriptプログラムをコンパイルしてみる

practiceディレクトリ配下にsrcディレクトリを作成し、srcディレクトリ内にindex.tsを下記のように作成します。

practice/src/index.ts

const message: string = "Hello, World!";
console.log(message);

続いてpracticeディレクトリに入り、下記のコマンドを実行してコンパイルを行います。

$ npx tsc

すると、tsconfig.jsonの設定に従ってsrc内の全ての.tsファイルがコンパイルされ、distディレクトリが生成され、その配下にコンパイル結果としてJavaScriptファイルが出力されます。

*
|--dist
|　　　　　　　　|--index.js *これが出力された！
|--node_modules
|    |--@types
|    |　　　　　　　　　|--node
|　　　　　　　　|--typescript
|--package-lock.json
|--package.json
|--src
|　　　　　　　|--index.ts *これがコンパイルされた！
|--tsconfig.json

最後に出力されたJavaScriptファイルをNode.jsで実行することでプログラムを実行することができます。

$ node dist/index.js

>>Hello, World!

以上となります。お疲れ様でした！

参考文献

・プロを目指す人のためのTypeScript入門