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

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

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

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

https://nodejs.org/en

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

## 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入門](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AETypeScript%E5%85%A5%E9%96%80-%E5%AE%89%E5%85%A8%E3%81%AA%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3%81%8B%E3%82%89%E9%AB%98%E5%BA%A6%E3%81%AA%E5%9E%8B%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%BE%E3%81%A7-Software-Design-plus/dp/4297127474/ref=sr_1_1?adgrpid=125850700702&gclid=CjwKCAiAp5qsBhAPEiwAP0qeJppr7hJLWIlco8u-zQ0wOmR3q96VLtemoeVAWEJciANnxo_CGOdmaRoCricQAvD_BwE&hvadid=679023192451&hvdev=c&hvlocphy=1009304&hvnetw=g&hvqmt=e&hvrand=14466672727342044787&hvtargid=kwd-1647563795496&hydadcr=27297_14738603&jp-ad-ap=0&keywords=%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEtypescript%E5%85%A5%E9%96%80&qid=1703335273&sr=8-1)