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

はじめに

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

2. ターミナルを再起動します
3. 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の拡張機能をインストールします
   
2. Prettier自身のインストールは後ほど、プロジェクト内で行います

ESLint

1. VS codeでESLintの拡張機能をインストールします
   
2. setting.jsonで、以下を追記します。

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

3. 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
   

2. 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
   

2. .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"を選択します。
   

2. 次に、"tsc: build -tsconfig.json"を選択します。
   

3. 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
   

2. かなり色んなオプションが設定可能です。私は、他の記事を参考に次のオプションを設定しました。

   "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を作ります。
   
2. 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が出力されました。

参考文献