VSCodeでTypeScriptのNode.jsを実行する

概要

SwitchBotAPIを利用してセンサー情報の蓄積加工を行おうとしたのですが、

Pythonの情報が多く、JSやTSの情報があまりありませんでした。

TSの学習も兼ねて実行開発環境を用意しようとしたところ、

詰まってしまうポイントが多かったため、記事にして残したいと思います。

環境 前提条件

Windows11

VSCode 1.84.2 拡張機能Japanese Language インストール済み

Node.js v20.10.0

PowerShell 5.1.22621.2506

Node.jsのインストール

Windows11における手順ではインストーラーを実行するだけなので、手間はそれほどありません。

https://nodejs.org/

1.LTSを選択してダウンロード、実行

TypeScriptのインストール

参考

https://code.visualstudio.com/docs/languages/typescript

1.TSのコンパイラをインストールするためにPowerShellを[管理者として実行]を選択します。

PowerShell

npm install -g typescript

2.インストールの確認のため、コンパイラのバージョンをチェックします。

この時、[管理者として実行]ではなく普通に実行を選択します。

PowerShell

tsc --version

詰まったポイント

[管理者として実行]を選択したPowerShellでは問題なく実行出来たのですが、普通に実行した時権限がないため実行できないエラーが発生してしまいました。

tsc : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\UserName\AppData\Roaming\npm\tsc.ps1 を読み込むことがで
きません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ tsc
+ ~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

これを解決するため、カレントユーザのスクリプトの実行を有効化します。

PowerShell

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

参考

https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.4

VSCodeでのTypeScript実行の準備

1.適当な空のフォルダを用意します。今回はフォルダ名をtsとしました。

2.TSをトランスパイルして実行をボタン一つで行えるようにするために、以下のファイルを用意しました。

/ts/.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/dist/index.js",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/src/**/*.js"]
    }
  ]
}

/ts/.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": "build",
      "label": "tsc: build - tsconfig.json"
    }
  ]
}

Node.js実行の準備

1.PowerShell /ts/

npm init -y

2.生成されたpackage.jsonに変更を加えます。

/ts/package.json

...
  "main": "dist/index.js"
...

TypeScript実行の準備

1./ts/tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

2.PowerShell /ts/

npm install @types/node --save-dev

VSCodeでテストコードを実行して確認

1./ts/src/index.ts

let message: string = 'Hello World';
console.log(message);

2.PowerShell /ts/

code .

3.VSCode

F5または[実行/デバッグの開始]

デバッグコンソール

C:\Program Files\nodejs\node.exe .\dist\index.js
Hello World

まとめ

簡単に開発実行するために環境を構築しようとしましたが、

WindowsやVSCodeといった環境依存の部分で時間がかかってしまいました。

結果的にやり方やポイントを押さえていればTSも簡単に実行できるようになります。

次回はTSでSwitchBotAPIを利用できればと思っています。