休日に新しい言語に触れたい ~TypeScript編 環境構築からHello Worldまで~

# はじめに

https://qiita.com/MichaelHashimoto/items/ee3f5e9a8f99c4fd0371

この第三弾として、TypeScriptを触ってみました。環境構築に時間がかかり、休日1日分ではHello Worldまでしか進められませんでしたが、そこまでを記事にします。

私はC#やPythonを仕事で使っているため、これらの知識をベースにして理解を広げます。同じような境遇の方の理解の助けになれば幸いです。

# 環境構築

## 環境

OS: Ubuntu22.04
エディタ: vs code

## nvmのインストール (Ubuntuの場合)

ここでは、nvmというNodeのバージョン管理ツールを使ってNodeをインストールすることにしました。(Pythonのpyenv的なもの)
これにより、必要に応じて、Nodeのバージョンを変えられるようになります。

nvmのリポジトリのreadmeに従ってインストールすればOKです。https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating

1. 以下のコマンドを実行すると、rbenvの設定が自動で完了します。
    ```
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
    ```
1. ターミナルを再起動します
1. nvmコマンドを実行してみて、エラーが出なければ完了です
    

## nvmのインストール (Windowsの場合)

WSL上のUbuntuなどで、上記の通りにインストールするのが良いと思います。
一応、Windowsに対応したnvmも存在すると githubに書かれていました。 https://github.com/nvm-sh/nvm?tab=readme-ov-file#important-notes

## nodeのインストール

nvmで最新のLTSのバージョンをインストールしましょう。

```
nvm install --lts
```

そのあとに、次のコマンドでバージョン情報が出力されればインストール成功です。

```
node -v
```

私の環境では、v20.17.0がインストールされていました。


## VS codeの設定  

コードを書きやすくするために、linterとformatterをインストールしましょう。
linterにはESLintを、formatterにはPrettierを使用します。

### Prettier
1. VS codeでPrettierの拡張機能をインストールします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223968/4e93dac8-665e-88e3-ecfa-1b07c9e92f84.png)
1. Prettier自身のインストールは後ほど、プロジェクト内で行います

### ESLint

1. VS codeでESLintの拡張機能をインストールします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223968/737f7b00-9f8b-8548-2d39-62c00f761c24.png)
1. setting.jsonで、以下を追記します。
    ```
    "[typescript]": 
    {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    }
    ```
1. ESLint自身のインストールは後ほど、プロジェクト内で行います

以上でVSCodeの環境が整いました。VSCodeを再起動しましょう。

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

適当な場所に新しくディレクトリを作成し、VS codeで開きましょう。
今回は、```HelloWorldProject```という名のディレクトリを作成し、プロジェクトディレクトリとすることにしました。

## TypeScriptの導入

1. npmでTypeScriptをインストールします。TypeScriptは開発時にのみ必要なツールなので、```--save-dev```オプションをつけておきます。
    ```
    npm install typescript --save-dev
    ```
    
## ESLintの導入・設定

1. npmでESLintをインストールします。
    ```
    npm install eslint --save-dev
    ```
1. ESLintの設定を対話的に実施します。
    ```
    npx eslint --init
    ```

    私は以下のように回答しました。
    ```
    ✔ How would you like to use ESLint? · problems
    ✔ What type of modules does your project use? · esm
    ✔ Which framework does your project use? · none
    ✔ Does your project use TypeScript? · typescript
    ✔ Where does your code run? · browser, node
    The config that you've selected requires the following dependencies:
    
    eslint, globals, @eslint/js, typescript-eslint
    ✔ Would you like to install them now? · No / Yes
    ✔ Which package manager do you want to use? · npm
    ☕️Installing...
    ```

## Prettierの導入・設定

1. npmでPrettierをインストールします。
    ```
     npm install prettier --save-dev
    ```
1. .prettierrc というファイルを作成し、設定を記載します。ここでは、Prettierの公式サイトの設定をコピペしました。
    ```
    {
        "printWidth": 80,
        "tabWidth": 2,
        "useTabs": false,
        "semi": false,
        "singleQuote": true,
        "trailingComma": "none",
        "bracketSpacing": false,
        "jsxBracketSameLine": false
    }
    ```

## tasks.jsonの生成

TypeScriptをnodeで実行するためには、tsファイル(TypeScriptで記述されたコード)をJavaScriptに変換(コンパイル)する必要があります。
コンパイルには"tsc"というコマンドを使います。毎回手動で実行するのは面倒なので、コンパイルをtaskとして登録しておきましょう。

1. コマンドリストから"Tasks: Configure Task"を選択します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223968/d7b8b641-0dee-6af1-1715-f3a9137ae3ea.png)

1. 次に、"tsc: build -tsconfig.json"を選択します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223968/80003a61-7b92-6da3-c3d4-f7efdadf3084.png)

1. tasks.jsonが生成されます
特に変更は必要ありませんが、labelに記載されている文字列は、後から使います。
    ```
    {
    	"version": "2.0.0",
    	"tasks": [
    		{
    			"type": "typescript",
    			"tsconfig": "tsconfig.json",
    			"problemMatcher": [
    				"$tsc"
    			],
    			"group": "build",
    			"label": "tsc: build - tsconfig.json"
    		}
    	]
    }
    ```

## tsconfig.jsonの生成

tscのconfig設定ファイルであるtsconfig.jsonを作ります。

1. 以下のコマンドを実行し、tsconfig.jsonを生成します。
    ```
    npx tsc --init
    ```
1. かなり色んなオプションが設定可能です。私は、他の記事を参考に次のオプションを設定しました。
    ```
    "target": "ES2019",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    ```

↓参考にした記事
https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49#tsconfigjson-%E7%94%9F%E6%88%90


## launch.jsonの生成

1. 実行ボタンのところにある、"create a launch.json file"をクリックし、Node.jsのlaunch.jsonを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223968/f3e0e92c-0bee-3a89-cb9c-36b6130bc2ca.png)
1. launch.jsonを編集し、preLaunchTaskにtasks.jsonで設定したtscタスクのラベル名を記入します。
    ```
    {
        // 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>/**"
                ],
                "program": "${file}",
                "outFiles": [
                    "${workspaceFolder}/**/*.js"
                ],
                "preLaunchTask": "tsc: build - tsconfig.json",
            }
        ]
    }
    ```

# 動かしてみる

## とりあえずHello World

typescript_practice1.tsというファイルを作りました。

### 構成
HelloWorldProject
├── typescript_practice1.ts

### コード

```typescript
console.log('Hello, World!')
```

### 実行結果

Hello Worldが出力されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223968/f381fb4e-a945-5f7f-70e3-26dd91930684.png)



# 参考文献

https://qiita.com/suzuk12345/items/652f19de4c92c58d055d

https://qiita.com/fehde/items/a48bcb9df209b71c2de3