VisualStudioCodeにおけるTypeScript 環境構築

はじめに

TypeScriptを使用するには、Node.jsとそのパッケージマネージャ(npm)が必要なため、以下の手順でインストールを行います。

目次

1. Node.js と NPM のインストール
2. TypeScript のインストール
3. TypeScript の初期設定 (tsconfig.jsonの作成)
4. TypeScript のコンパイルと実行

1 Node.js と NPM のインストール

1. Node.js公式サイトから最新の安定版をダウンロードしてインストールします

2. インストール後、コマンドプロンプトまたはターミナルで次のコマンドを実行し、正常にインストールされたか確認します

Node.jsのバージョンを表示するコマンド

node -v

NPM (Node Package Manager) のバージョンを表示するコマンド

npm -v

2 TypeScript のインストール

1. TypeScriptコンパイラをを以下のコマンドでインストールします

npm install -g typescript

なお、以下のコマンドでTypeScriptのコンパイラがインストールされているか確認することができます。
（TypeScriptのバージョンが表示された場合、インストールができている。）

tsc -v

3 TypeScript の初期設定 (tsconfig.jsonの作成)

1. はじめに設定ファイル（tsconfig.json）を準備します
   このファイルはコンパイルオプションやディレクトリ構成を記述するものです

tsc --init

生成された tsconfig.json ファイル内には、TypeScriptのバージョンやコンパイルオプションが含まれます。
環境によって変化はありますが、一例を記載しておきます。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["XXX/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

4 HelloWorld の作成

1. 任意のディレクトリに TypeScript ファイルを作成します

hello.ts

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

5 TypeScript のコンパイルと実行

1. 以下のコマンドを用いて 4番 で作成した hello.ts をコンパイルします

tsc hello.ts

出力

Hello, World!