はじめに

この第三弾として、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

以下のコマンドを実行すると、rbenvの設定が自動で完了します。
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
```
ターミナルを再起動します
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

VS codeでPrettierの拡張機能をインストールします
Prettier自身のインストールは後ほど、プロジェクト内で行います

ESLint

VS codeでESLintの拡張機能をインストールします

setting.jsonで、以下を追記します。

"[typescript]": 
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

ESLint自身のインストールは後ほど、プロジェクト内で行います

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

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

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

TypeScriptの導入

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

ESLintの導入・設定

npmでESLintをインストールします。
```
npm install eslint --save-dev
```

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の導入・設定

npmでPrettierをインストールします。
```
 npm install prettier --save-dev
```

.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として登録しておきましょう。

コマンドリストから"Tasks: Configure Task"を選択します。
次に、"tsc: build -tsconfig.json"を選択します。

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を作ります。

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

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

launch.jsonの生成

実行ボタンのところにある、"create a launch.json file"をクリックし、Node.jsのlaunch.jsonを作ります。

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

コード

console.log('Hello, World!')

実行結果

Hello Worldが出力されました。

参考文献