TypeScriptを初めて触ってみた

# 概要
今までJavaScriptは多少触ってきましたが、近年のTypeScriptの勢いを見て、そろそろ触らないといけないなぁ、と思ったエンジニアの備忘録です。

# 目的
何事もまずは動かしてみる、の精神で、まずは最低限TypeScriptが実行できる環境をvscode上で整え、簡単なコードを実行するまでを目的とします。

# 想定読者
・JavaScriptを触ったことがあり、TypeScriptはなんとなく聞いたことがあるがよくわからない方
・コマンド実行に苦手意識が無い方

# 全体の流れ
環境構築
・Node.js、npmインストール
↓
JSONファイルの作成
├package.json
└tsconfig.json
↓
サンプルコード作成
↓
実行
↓
デバッグ
└ブレイクポイントの設定
↓
ESLint設定
↓
感想

# 環境
・Windows 11
・Visual Studio Code(以下、「vscode」)
・Node.js v20.16.00
・Node Package Manager(以下、npm) 10.8.2 

# 環境構築
### Node.jsのインストール
何はともあれ、まずはNode.jsをインストールします。
これがないと始まりません。
下記公式サイトからダウンロード(v20.16.00)して、インストーラーに従って進めていきます。

https://nodejs.org/en/

最後に正常にインストールが完了したか、下記コマンドで確認します。
※npmはNode.jsインストーラーに同梱されています。
```
> node -v
v20.16.0

> npm -v
10.8.1
```

npmの最新バージョンは10.8.2なので、下記コマンドでアップデートしておきます。
```
> npm install -g npm@10.8.2
> npm -v
10.8.2
```

### TypeSriptのインストール
無事npmがインストールされたので、下記コマンドを実行し、TypeScriptをインストールし、結果を確認します。
```
> npm install -g typescript
> tsc -v
Version 5.5.4
```

# JSONファイルの作成
環境構築が完了したので、続いてTypeScriptを実行するために必要な下記2つのJSONファイルを作成していきます。
```
// 「package.json」プロジェクトのパッケージ依存関係やビルドスクリプトのためのファイル
> npm init -y

// 「tsconfig.json」TypeScript 用のビルド設定ファイル
> tsc --init
```

生成された「tsconfig.jsonファイル」に下記を追記します。
```:tsconfig.json
// Visuao Studio Codeコンパイラに必要
"sourceMap": true,

// コンパイラがトランスパイルしたファイルの保存場所
// デフォルトはプロジェクトのルートフォルダだが、ビルドファイルでいっぱいになるのを避けるため、別フォルダを指定
"outDir": "./build"
```

# サンプルコード作成
今回は、下記のサンプルコードを実行してみようと思います。
```ts:index.ts
const message: string = "Hello, World!"
console.log(message)
```

# 実行
### トランスパイル

下記コマンドで、プロジェクト内の全てのTypeScriptファイルがJavaScriptにトランスパイルされます。
```
> tsc -p .
```
```-p .```がカレントディレクトリにあるtsconfig.jsonファイルを使用するようコンパイラに指示する役割を果たします。
トランスパイルされた結果(出力ファイル: index.js、index.js.map)は、./buildディレクトリに配置されます。

### 実行
下記コマンドで、トランスパイルされたjsファイルを実行できます。
```
> node ./build/index.js
Hello, World!
```

# デバッグ
折角なので、vscode上でデバッグをしてみたいと思います。

vscodeサイドバーの「Run and Debug」→「create a launch.json file.」→「Node.js」とクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694199/86d1f6de-9c8a-522b-c028-3edbe3b1d10d.png)

すると、.vscodeフォルダ内に、「launch.json」ファイルが作成されるので、下記のように変更します。

```json:launch.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],

            // 今回は変更しませんが、vscodeでデバッグボタン押下時に実行するtsファイルを指定します。
            "program": "${workspaceFolder}\\index.ts",

            // アプリケーションを起動する前に実行するvscodeのビルドタスクの名前を指定します。
            "preLaunchTask": "tsc: build - tsconfig.json",

            // トランスパイルによって生成されるjsファイルのパスを指定します。
            // "sourceMap": trueにより生成されたソースマップファイルを使用して、TypeScriptソースコードと生成されたJavaScriptコードのマッピングが行われます。
            // この仕組みによりTypeScriptのコードを直接デバッグできるようになります。
            "outFiles": [
                "${workspaceFolder}/build/**/*.js"
            ]
        }
    ]
}
```

上記設定が完了後、vscode上でブレークポイントを設定し、「F5」で実行すると、
下記画像のように、ブレークポイントを設定した行でプログラムが一時停止するので、使い慣れたいつものデバッグが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694199/e59d4406-65d4-1f00-b760-28b0c3d74d37.png)

# ESLint設定
折角なのでESLintも設定してみます。

### ESLint拡張機能インストール
vscodeにESLint拡張機能をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694199/18e33e19-db51-f275-979e-4ec5b6c8ebcc.png)

### eslint.config.mjs作成
以下コマンドでプロジェクトのESLintを初期化します。
```
> npm init @eslint/config
```

いくつか質問されるので、以下のように回答しました。
```
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · typescript
√ Where does your code run? · browser
√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · npm
```

すると、「eslint.config.mjs」ファイルが作成されるので、このファイルにルールを記述できます。
※以前は「esling.config」だったようですが、2024年5月に「ESLing version 9.0.0」がリリースされ、「flat config」が正式サポートされた影響で変わったようです。

では試しに怒られるコードを書いてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694199/21c0f3ba-225c-ead1-8ffb-04b24dc00683.png)

しっかり仕事してくれていますね！

# まとめ
触り始める前は、「トランスパイル」を実行しないといけないのは面倒くさそうだなぁ、と思ってたのですが、環境構築も詰まることなく、vscodeでのデバッグ設定もかなり簡単でした。
今後、ちょっとしたJavaScriptのコードを書く際は、一旦TypeScriptで書くようにしてみても良いかなと思いました。

# 参考サイト
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html

https://learn.microsoft.com/ja-jp/training/paths/build-javascript-applications-typescript/