技術

TypeScriptの実行環境を勉強用にローカルに構築

前置き

Node.jsは、いろいろと使用シーンが多い言語です。フロントエンド、バックエンド、インフラ、どの仕事をしていても使う時があります。Dart, Denoなど対抗馬がちらほら登場してきてはいますが、当分はNode.js一強の時代が続くでしょう。AWSもNode.js押しのようですし。

Node.jsで少しこったことをするときは、JavaScriptを直接書くよりTypeScriptを書く方が多いです。ただこのTypeScriptの動作をローカルでちょっと確認したいというときに、以外と困っていました。

というわけで、ローカルでもサクッとTypeScriptを動かせる環境を構築してみました。以下か環境構築についてのメモになります。

動作環境

OS: Mac
エディタ: WebStorm

TypeScriptはVSCodeとの親和性が非常に高いですが、私はJetbrains信者なのでWebStormで動かしています。コマンドはMac前提ですが、NodeがinstallされていればいいだけなのでWSLはもちろんWindowsのローカルのほうでもやることは同じだと思います。

構築手順

やっていることは、TypeScriptとコンパイラをインストールして設定ファイルを生成です。この辺は、『WEB+DB Press 2020 vol.117』の特集に詳細がありました。今回はその記事を読みながらやりました。インストール後はWebStormのGUIからコンパイルを実行して完了です。

# nodeの実行環境があることを確認
node -v

# package.jsonが生成される
npm init -yes

# install typescript, compiler
npm install --save-dev typescript
npx tsc --version

# tsconfig.jsonが生成される
npx tsc --init

# tsconfig.json 編集 (includeはプロジェクトのフォルダ構成に合わせる)
{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true
  },
  "include": [
    "src/**/*"
  ]
}

# sampleプログラム作成
WebStormのステータスバー > TypeScript 4.4.4 > Compile
-> distにjsが生成される

完了

これでローカルで好き勝手にプログラムを書いて動作確認できる環境が整いました。個人的にはPythonの方が好きですし慣れているのですが、Node.jsも現代のエンジニアに必須スキルで扱えて当然のものなので息を吐くように使っていきたいです。