VSCodeをエディタにしたTypeScript環境を構築する

前提

Windowsであることと、Node.jsとVSCodeはインストール済みとする。
コンパイルされたJavaScriptはNode.jsで動かす前提で記載している。

プロジェクトフォルダを作る

tssampleというフォルダを作る。

package.jsonを作る

tssampleフォルダに以下内容のpackage.jsonファイルを作る。

package.json

{
    "name": "tssample",
    "version": "1.0.0",
    "dependencies": {
        "typescript": "5.4.4"
    }
}

このpackage.jsonにはTypeScriptをインストールするための設定が書かれている。

TypeScriptをインストールする

コマンドプロンプトを立ち上げ、tssampleフォルダに移動し、npm installを実行する。

cd <tssampleフォルダのパス>
npm install

tssampleフォルダ直下にnode_modulesフォルダが作成され、TypeScriptがインストールされる。

tsconfig.jsonを作る

TypeScriptのコンパイル設定ファイルtsconfig.jsonをtssampleフォルダ直下に作る。

tsconfig.json

{
    "$schema": "https://json.schemastore.org/tsconfig",
    "compilerOptions": {
        "target": "ES2022",
        "module": "CommonJS",
        "lib": [
            "ES2023",
            "DOM"
        ],
        "outDir": "dst",
        "strict": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true
    },
    "include": [
        "src/**/*.ts"
    ]
}

srcフォルダ以下のtsファイルをソースとして、dstフォルダ以下にコンパイルしたJavaScriptを出力する設定となっている。

tasks.jsonを作る

tssampleフォルダ直下に.vscodeフォルダを作る。
.vscodeフォルダにVSCodeでタスクを実行するための以下内容のtasks.jsonファイルを作る。

.vscode/tasks.json

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

tsファイルを保存すると、tsファイルがコンパイルされ、JavaScriptファイルが出力されるようになる。
また、コンパイルエラー時、VSCodeにエラーが通知されるようになる。

サンプルのtsファイルを作る

tssampleフォルダ直下にsrcフォルダを作る。
srcフォルダ以下にサンプルのtsファイルを作る。

src/Main.ts

import { greet } from './greet/Greet';

console.log(greet('World'));

src/greet/Greet.ts

export function greet(name: string): string {
    return `Hello, ${name}!`;
}

VSCodeでプロジェクトフォルダを開く

VSCodeを起動し、tssampleフォルダを開く（File > Open Folder > tssample > フォルダーの選択）

VSCodeのタスクを起動する

キーボードCtrl + Shift + Bを押す。
TERMINALに以下のように表示され、タスクが起動する。

Starting compilation in watch mode...

Found 0 errors. Watching for file changes.

動作を確認する

VSCodeのタスクを起動すると、dstフォルダにコンパイルされたJavaScriptファイルが出力される。

コンパイルされたJavaScriptファイルは以下のように実行する。
キーボードCtrl + Shift + @を押すと新しくTERMINALが開くので、node .\dst\Main.jsを実行する。

また、tsファイルが保存時コンパイルエラーになる場合、エラーが出力される。

上記のソース

ここに置いています。
https://github.com/hs0x01/tssample