Visual Studio CodeでTypeScript開発を快適にする！保存時に自動コンパイルする方法

Visual Studio CodeでTypeScriptを保存時にコンパイルする

タスクを使用する

これは最も簡単な方法です。

1. Ctrl+Shift+P でコマンドパレットを開き、「Tasks: Configure Task Runner」を選択します。
2. "tasks.json" ファイルが作成されます。
3. 以下の内容をファイルに追加します。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "tsc: Compile TypeScript",
      "type": "shell",
      "command": "tsc",
      "args": ["-w", "${file}"],
      "problemMatcher": "$tsc"
    }
  ]
}

1. Ctrl+Shift+B でタスクを実行します。

これで、*.tsファイルを保存するたびに、自動的にコンパイルされます。

拡張機能を使用する

いくつかの拡張機能は、保存時にコンパイル機能を提供します。

• Auto Compile TypeScript
• TypeScript Compiler

これらの拡張機能をインストールして有効化すると、保存時に自動的にコンパイルされます。

設定を使用する

settings.json ファイルに以下の設定を追加することで、保存時に自動的にコンパイルできます。

"typescript.compileOnSave": true

この設定は、tsc コマンドがインストールされている必要があります。

Visual Studio CodeでTypeScriptファイルを保存時に自動的にコンパイルするには、いくつかの方法があります。 自分に合った方法を選択してください。

// インターフェース
interface Person {
  name: string;
  age: number;
}

// クラス
class Greeter {
  constructor(private readonly name: string) {}

  greet(): string {
    return `Hello, ${this.name}!`;
  }
}

// 関数
function add(a: number, b: number): number {
  return a + b;
}

// ジェネリック
function identity<T>(value: T): T {
  return value;
}

// モジュール
module MyModule {
  export function sayHello(): void {
    console.log("Hello, world!");
  }
}

// 使用例
const person: Person = {
  name: "John Doe",
  age: 30,
};

const greeter = new Greeter(person.name);
console.log(greeter.greet());

const sum = add(1, 2);
console.log(sum);

const str = identity("Hello");
console.log(str);

MyModule.sayHello();

このコードは、TypeScript の基本的な機能を理解するための出発点として役立ちます。

Visual Studio CodeでTypeScriptファイルを保存時に自動的にコンパイルするその他の方法

npm scriptsを使う

package.json ファイルに以下のスクリプトを追加します。

{
  "scripts": {
    "compile": "tsc -w"
  }
}

そして、ターミナルで以下のコマンドを実行します。

npm run compile

Webpack は、JavaScript モジュールバンドラーです。 Webpack を使用して TypeScript プロジェクトをビルドすると、保存時に自動的にコンパイルすることもできます。

Webpack の設定方法は、プロジェクトの規模や複雑さに応じて異なります。 詳細については、Webpack のドキュメントを参照してください。

その他のツールを使う

他にも、tsc-watch や chokidar などのツールを使って、保存時に自動的にコンパイルすることができます。

これらのツールは、tsc コマンドを自動的に実行するしくみで動作します。