Visual Studio Code で TypeScript を設定する

Visual Studio Code (VSCode) は、TypeScript 開発に優れたサポートを提供する強力で人気のコードエディターです。このガイドでは、VSCode で TypeScript を設定する手順を説明し、効果的なコーディングを開始するために必要なものがすべて揃うようにします。

Visual Studio Codeのインストール

Visual Studio Code をまだインストールしていない場合は、次の手順に従ってください。

公式 VSCode ウェブサイトにアクセスしてください。
ご使用のオペレーティングシステム用のインストーラーをダウンロードしてください。
インストーラーを実行し、画面の指示に従ってインストールを完了します。

Node.jsとnpmのインストール

TypeScript は npm (Node Package Manager) を通じて管理されますが、これには Node.js が必要です。Node.js と npm をインストールするには、次の手順を実行します。

公式 Node.js ウェブサイトにアクセスしてください。
npm を含む Node.js の LTS バージョンをダウンロードしてインストールします。
ターミナルを開き、node -v と npm -v を実行して Node.js と npm のバージョンを確認し、インストールを確認します。

TypeScriptのインストール

Node.js と npm がインストールされたら、TypeScript をグローバルにインストールできます。ターミナルを開き、次のコマンドを実行します。

npm install -g typescript

このコマンドは TypeScript をグローバルにインストールし、tsc コマンドを使用してシステム上のどこからでも TypeScript ファイルをコンパイルできるようになります。

TypeScript プロジェクトの設定

新しい TypeScript プロジェクトを開始するには、次の手順に従います。

プロジェクト用の新しいディレクトリを作成し、そこに移動します。

mkdir my-typescript-project
cd my-typescript-project

新しい npm プロジェクトを初期化します。

npm init -y

TypeScript を開発依存関係としてインストールします。

npm install --save-dev typescript

TypeScript 構成ファイルを生成します。

npx tsc --init

このコマンドは、プロジェクトディレクトリに tsconfig.json ファイルを作成します。このファイルには、TypeScript コンパイラの構成設定が含まれます。

TypeScript 用に VSCode を構成する

VSCode には TypeScript サポートが組み込まれていますが、エディターを構成することで開発エクスペリエンスをさらに強化できます。

プロジェクトを開く

VSCode で TypeScript プロジェクトを開きます。

VSCode を起動します。
ファイル > フォルダーを開く... を選択し、プロジェクトディレクトリを選択します。

TypeScript拡張機能のインストール

VSCode はすぐに使用できる優れた TypeScript サポートを提供しますが、追加の拡張機能をインストールして機能を強化することもできます。

TypeScript 拡張機能: TypeScript 言語サポートと、IntelliSense、コードナビゲーションなどの機能を提供します。
Prettier: コードのフォーマット拡張機能で、一貫したコードスタイルを保証します。

TypeScript コンパイラの設定

TypeScript コンパイラ設定を構成するには、tsconfig.json ファイルを開きます。構成例を次に示します。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

この構成では、ターゲットの ECMAScript バージョンを ES6 に設定し、CommonJS モジュール形式を指定し、厳密な型チェックを有効にし、出力ディレクトリを ./dist に設定します。また、デバッグを容易にするためのソースマップも含まれます。

TypeScript コードの記述と実行

src ディレクトリに新しい TypeScript ファイルを作成します。

mkdir src
touch src/index.ts

index.ts に TypeScript コードを追加します。

const message: string = "Hello, TypeScript!";
console.log(message);

TypeScript コードをコンパイルするには、次のコマンドを実行します。

npx tsc

このコマンドは、TypeScript ファイルをコンパイルし、JavaScript ファイルを dist ディレクトリに出力します。

コンパイルされた JavaScript コードを実行するには、次を使用します。

node dist/index.js

結論

Visual Studio Code で TypeScript を設定するのは、必要なツールのインストール、プロジェクトの構成、VSCode の強力な機能の使用を伴う簡単なプロセスです。このガイドに従うことで、完全に機能する TypeScript 開発環境が整い、TypeScript を使用して堅牢なアプリケーションを構築する準備が整います。

typescript visual-studio-code セットアップ nodejs npm 構成プロジェクト tsconfig 拡張機能コンパイラーソースマップコードデバッグ typescript-extension