vscodeでF5キー押してTypeScriptデバッグ実行するまでのメモ

やりたいこと

• vscodeでTypeScript開発環境構築
• F5 (F5 + Ctrl)を押して、デバッグ実行(実行)できること

やらないこと

• TypeScriptトランスパイルのカスタマイズ。但し、デバッグ実行に関係する物は除く。
• デバッグ実行などのカスタマイズ
  • tasks.json, settings.json, launch.json作成
• eslint, prettier導入

前提

• windows上で実施
• vscodeをインストールしていること
• node.jsをインストールしていること
  • node.jsのインストールは Windows での NodeJS のインストール 参照

バージョン

vscodeのバージョンは 1.63.2

node --version
v16.13.1

手順

1. コマンドラインでトランスパイルしてnodeつかって実行する

1-1. 適当なフォルダを作ってvscodeで開く

ここではproject_folderを作成

1-2. tscインストール

PS C:\project_folder> npm install typescript

実行後、project_folder以下にnode_moduleフォルダが作成されることを確認

1-3. tscがインストールできたことを確認

PS C:\project_folder> .\node_modules\.bin\tsc --version
Version 4.5.4

1-4. 適当なコードを書く

project_folder以下にファイル作って、適当なコードを書く (ここでは「hello.ts」ファイルを作成)

hello.ts

class User {
    private name: string;
    constructor(name: string) {
        this.name = name;
    }

    public SayHello = () => {
        console.log("Hello,", this.name);
    };
}

const u = new User("やまだたろう");
u.SayHello();

1-5. トランスパイル

PS project_folder> .\node_modules\.bin\tsc ./hello.ts

実行後、hello.tsと同じフォルダにhello.jsが作成されることを確認。

1-6. nodeで実行

PS project_folder> node hello.js
Hello, やまだたろう

2. F5(F5+Ctrl)を使ってデバッグ実行(実行)する

2-1. tsconfig.json作成

トランスパイル時、デバッグ実行に必要なSourceMapを出力するため
実行後、project_folder以下にtsconfig.jsonが作成されることを確認

PS project_folder> .\node_modules\.bin\tsc --init

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig.json

2-2. tsconfig.json 修正

"sourceMap"から始まる行のコメントを外す

//修正前
    //"sourceMap": true,  
//修正後
    "sourceMap": true,  

2-3. トランスパイル

tscコマンドでファイルを指定するとtsconfig.jsonが読み込まれない様子なので、以下コマンドで実行
実行後、project_folder以下にhello.jsファイルとhello.js.mapファイルが作成されることを確認

PS project_folder> .\node_modules\.bin\tsc -p tsconfig.json

2-4. デバッグ実行

hello.tsを開く
hello.tsの適当な場所にブレークポイントを設定してF5キーを押下する
「環境の選択」が表示された場合はnode.jsを選ぶ

この後の進め方

トランスパイル時にjsファイル出力先を変えたい など → tsconfig.json変更
実行前に自動的にトランスパイルしたい → launch.json, tasks.json作成、変更
実行のカスタマイズをしたい など → setting.json作成、変更
コードの整形をしたい など → prettier, eslint導入