TypeScript開発環境の構築 - Node.js + VS Codeで始めるモダン開発

はじめに

TypeScriptで開発を始めるには、適切な開発環境の構築が不可欠です。本記事では、Node.jsのインストールからTypeScriptコンパイラのセットアップ、VS Codeの設定まで、TypeScript開発環境を一から構築する手順を解説します。

TypeScriptはブラウザで直接実行できないため、JavaScriptへのコンパイルが必要です。この記事では、コンパイルして実行する標準的な方法に加えて、ts-nodeやNode.js 22以降のネイティブTypeScript実行機能など、開発効率を高める即時実行環境についても紹介します。

本記事を読むことで、以下のことができるようになります。

Node.jsとnpmの適切なバージョン管理
TypeScriptコンパイラのインストールと基本的な使い方
tsconfig.jsonによるプロジェクト設定
VS Codeの推奨拡張機能のセットアップ
ts-nodeやNode.jsネイティブ機能を使った即時実行環境の構築

実行環境・前提条件

前提知識

コマンドライン（ターミナル）の基本操作
JavaScriptの基本構文の理解
TypeScriptの基本概念（型注釈など）の理解があると望ましい

動作確認環境

本記事の内容は、以下の環境で動作確認を行っています。

ソフトウェア	バージョン
OS	Windows 11 / macOS Sonoma / Ubuntu 24.04
Node.js	22.x LTS（推奨）または 24.x
npm	10.x 以上
TypeScript	5.7 以上
VS Code	1.96 以上

期待される結果

本記事の手順を完了すると、以下の状態になります。

TypeScriptファイル（.ts）をJavaScriptにコンパイルして実行できる
ts-nodeを使ってTypeScriptを直接実行できる
VS Codeでリアルタイムの型チェックとコード補完が動作する

Node.jsのインストール

TypeScript開発にはNode.jsが必須です。Node.jsをインストールすると、パッケージマネージャのnpmも同時にインストールされます。

公式インストーラを使う方法

Node.js公式サイトからインストーラをダウンロードする方法が最もシンプルです。

Node.js公式サイトにアクセス
LTS（Long Term Support）版をダウンロード
インストーラを実行し、画面の指示に従ってインストール

インストール完了後、ターミナルでバージョンを確認します。

1
2
3
4
5


node --version
# v22.13.0 などと表示される

npm --version
# 10.9.2 などと表示される

バージョン管理ツールを使う方法（推奨）

複数のプロジェクトで異なるNode.jsバージョンを使い分ける場合は、バージョン管理ツールの利用を推奨します。

Windowsの場合：fnm（Fast Node Manager）

PowerShellで以下を実行します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


# fnmのインストール
winget install Schniz.fnm

# PowerShellプロファイルに設定を追加
notepad $PROFILE
# 以下の行を追加して保存
# fnm env --use-on-cd | Out-String | Invoke-Expression

# 新しいPowerShellを開いてNode.jsをインストール
fnm install 22
fnm use 22
fnm default 22

macOS / Linuxの場合：fnm

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# fnmのインストール（curl経由）
curl -fsSL https://fnm.vercel.app/install | bash

# シェルを再起動するか、設定を読み込む
source ~/.bashrc  # または ~/.zshrc

# Node.jsのインストール
fnm install 22
fnm use 22
fnm default 22

バージョン管理ツールを使うメリットは以下の通りです。

プロジェクトごとにNode.jsバージョンを切り替えられる
.node-versionファイルでチームメンバーとバージョンを統一できる
sudo権限なしでグローバルパッケージをインストールできる

TypeScriptコンパイラのセットアップ

Node.jsをインストールしたら、TypeScriptコンパイラ（tsc）をセットアップします。

グローバルインストール

システム全体でTypeScriptを使えるようにするには、グローバルインストールを行います。

1
2
3
4
5


npm install -g typescript

# インストール確認
tsc --version
# Version 5.7.3 などと表示される

グローバルインストールは手軽ですが、プロジェクトごとにバージョンを管理できないデメリットがあります。

プロジェクトローカルインストール（推奨）

チーム開発では、プロジェクトごとにTypeScriptをインストールする方法を推奨します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


# プロジェクトディレクトリを作成
mkdir my-typescript-project
cd my-typescript-project

# package.jsonを初期化
npm init -y

# TypeScriptをdevDependenciesとしてインストール
npm install --save-dev typescript

# ローカルのtscを実行
npx tsc --version

npxコマンドを使うと、ローカルにインストールされたTypeScriptコンパイラを実行できます。この方法のメリットは以下の通りです。

package.jsonでバージョンが明示され、チームで統一できる
npm installで同じバージョンが再現できる
プロジェクトごとに異なるバージョンを使い分けられる

TypeScriptコンパイラの基本的な使い方

TypeScriptファイルを作成し、コンパイルしてみましょう。

1
2


# srcディレクトリを作成
mkdir src

src/hello.tsファイルを作成します。

1
2
3
4
5
6
7
8


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

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

console.log(`1 + 2 = ${add(1, 2)}`);

コンパイルして実行します。

1
2
3
4
5


# TypeScriptをJavaScriptにコンパイル
npx tsc src/hello.ts

# 生成されたJavaScriptを実行
node src/hello.js

実行結果は以下のようになります。

Hello, TypeScript!
1 + 2 = 3

tsconfig.jsonの設定

プロジェクトでTypeScriptを使う場合、tsconfig.jsonでコンパイラオプションを設定します。

tsconfig.jsonの初期化

以下のコマンドで基本的なtsconfig.jsonを生成できます。

1

npx tsc --init

このコマンドを実行すると、多数のオプションがコメントアウトされたtsconfig.jsonが生成されます。

推奨される基本設定

2025年現在のモダンなTypeScript開発では、以下の設定を推奨します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


{
  "compilerOptions": {
    // コンパイル後のJavaScriptバージョン
    "target": "ES2022",
    
    // モジュールシステム（Node.js向け）
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    
    // 出力ディレクトリ
    "outDir": "./dist",
    
    // ソースディレクトリのルート
    "rootDir": "./src",
    
    // 厳格な型チェックを有効化
    "strict": true,
    
    // ES Module との相互運用性
    "esModuleInterop": true,
    
    // インポートのパス大文字小文字を厳密にチェック
    "forceConsistentCasingInFileNames": true,
    
    // 型定義ファイルのチェックをスキップ（ビルド高速化）
    "skipLibCheck": true,
    
    // ソースマップを生成（デバッグ用）
    "sourceMap": true,
    
    // 型定義ファイルを生成
    "declaration": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

主要なコンパイラオプションの解説

各オプションの役割を理解しておくと、プロジェクトに合わせた調整ができます。

オプション	説明	推奨値
`target`	出力するJavaScriptのバージョン	ES2022
`module`	モジュールシステム	NodeNext
`strict`	すべての厳格オプションを有効化	true
`outDir`	コンパイル結果の出力先	./dist
`rootDir`	ソースファイルのルート	./src
`sourceMap`	デバッグ用マップファイル生成	true

strict: trueを設定すると、以下のオプションがすべて有効になります。

noImplicitAny - 暗黙的なany型を禁止
strictNullChecks - null/undefinedの厳格チェック
strictFunctionTypes - 関数の型を厳格にチェック
strictBindCallApply - bind/call/applyの型チェック
strictPropertyInitialization - クラスプロパティの初期化チェック
noImplicitThis - 暗黙的なthisを禁止
alwaysStrict - すべてのファイルをstrictモードで出力

ビルドスクリプトの設定

package.jsonにビルドスクリプトを追加すると便利です。

1
2
3
4
5
6
7


{
  "scripts": {
    "build": "tsc",
    "build:watch": "tsc --watch",
    "start": "node dist/hello.js"
  }
}

これで以下のコマンドが使えるようになります。

1
2
3
4
5
6
7
8


# 一度だけビルド
npm run build

# ファイル変更を監視して自動ビルド
npm run build:watch

# ビルド結果を実行
npm start

VS Codeの推奨拡張機能

VS CodeはTypeScript開発に最適なエディタです。追加の拡張機能をインストールすることで、さらに開発効率が向上します。

必須の拡張機能

VS Codeには標準でTypeScript言語サポートが組み込まれていますが、以下の拡張機能を追加することで開発体験が向上します。

1. ESLint

コード品質とスタイルをチェックするリンターです。TypeScriptプロジェクトでも活用できます。

1
2
3
4
5


# ESLintのインストール
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

# 設定ファイルの初期化
npx eslint --init

2. Prettier - Code formatter

コードフォーマッタで、チーム内のコードスタイルを統一できます。

1
2


# Prettierのインストール
npm install --save-dev prettier

.prettierrcファイルを作成します。

1
2
3
4
5
6
7


{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

3. Error Lens

エラーや警告をエディタの行末にインラインで表示します。問題を素早く発見できるようになります。

推奨のワークスペース設定

プロジェクトルートに.vscode/settings.jsonを作成し、チームで共有する設定を記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.tsdk": "node_modules/typescript/lib"
}

最後のtypescript.tsdk設定は、ワークスペースにインストールされたTypeScriptを使用するよう指定しています。これにより、VS Codeの内蔵TypeScriptではなく、プロジェクトで指定したバージョンが使用されます。

推奨拡張機能の共有

.vscode/extensions.jsonを作成すると、プロジェクトを開いた際に推奨拡張機能のインストールを促すことができます。

1
2
3
4
5
6
7
8


{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "usernamehw.errorlens",
    "streetsidesoftware.code-spell-checker"
  ]
}

TypeScript即時実行環境の構築

開発中は、毎回コンパイルしてから実行するのは手間がかかります。TypeScriptを直接実行できる環境を構築しましょう。

ts-nodeを使う方法

ts-nodeは、TypeScriptをその場でコンパイルして実行するツールです。

1
2
3
4
5


# ts-nodeのインストール
npm install --save-dev ts-node

# TypeScriptファイルを直接実行
npx ts-node src/hello.ts

package.jsonにスクリプトを追加します。

1
2
3
4
5


{
  "scripts": {
    "dev": "ts-node src/hello.ts"
  }
}

ts-nodeはREPL（対話型実行環境）としても使用できます。

1
2
3
4
5
6


npx ts-node

# TypeScriptコードを直接入力して実行できる
> const x: number = 10;
> x * 2
20

tsx（高速なts-node代替）

tsxは、esbuildをベースにした高速なTypeScript実行ツールです。ts-nodeよりも起動が速く、設定も簡単です。

1
2
3
4
5
6
7
8


# tsxのインストール
npm install --save-dev tsx

# TypeScriptファイルを実行
npx tsx src/hello.ts

# watchモードで変更を監視
npx tsx watch src/hello.ts

package.jsonにスクリプトを追加します。

1
2
3
4
5
6


{
  "scripts": {
    "dev": "tsx src/hello.ts",
    "dev:watch": "tsx watch src/hello.ts"
  }
}

Node.js 22以降のネイティブTypeScript実行

Node.js 22.6.0以降では、TypeScriptを直接実行する機能が実験的に導入されています。Node.js 22.18.0以降では、erasable TypeScript syntaxのみを使用している場合、フラグなしで実行できます。

1
2
3
4
5


# Node.js 22.18.0以降
node src/hello.ts

# それ以前のバージョン
node --experimental-strip-types src/hello.ts

この機能は「型ストリッピング」と呼ばれ、TypeScriptの型情報を削除してJavaScriptとして実行します。ただし、以下の制約があります。

enumやnamespaceなどのTypeScript固有の構文は使用不可（--experimental-transform-typesフラグで有効化可能）
tsconfig.jsonの設定は使用されない
型チェックは行われない（別途tsc --noEmitで確認が必要）

開発時の素早い確認には便利ですが、本格的な開発では引き続きts-nodeやtsxの使用を推奨します。

プロジェクト構成の全体像

ここまでの設定を踏まえた、典型的なTypeScriptプロジェクトの構成を示します。

graph TD
    A[プロジェクトルート] --> B[src/]
    A --> C[dist/]
    A --> D[node_modules/]
    A --> E[.vscode/]
    A --> F[package.json]
    A --> G[tsconfig.json]
    A --> H[.prettierrc]
    
    B --> B1[index.ts]
    B --> B2[utils/]
    
    E --> E1[settings.json]
    E --> E2[extensions.json]

ディレクトリとファイルの役割は以下の通りです。

パス	役割
`src/`	TypeScriptソースコード
`dist/`	コンパイル後のJavaScript（gitignore推奨）
`node_modules/`	依存パッケージ
`.vscode/`	VS Codeのプロジェクト設定
`package.json`	プロジェクト設定と依存関係
`tsconfig.json`	TypeScriptコンパイラ設定
`.prettierrc`	Prettierの設定

まとめ

本記事では、TypeScript開発環境の構築について、Node.jsのインストールからVS Codeの設定まで一通り解説しました。

ポイントを振り返ると以下の通りです。

Node.jsはfnmなどのバージョン管理ツールでインストールすると、プロジェクト間でバージョンを使い分けられる
TypeScriptはプロジェクトローカルにインストールし、npx tscで実行する
tsconfig.jsonではstrict: trueを有効にして、型安全性を高める
VS CodeのESLint、Prettier、Error Lensなどの拡張機能で開発効率を向上させる
即時実行にはts-nodeやtsx、Node.js 22以降のネイティブ実行を活用する

次のステップとして、TypeScriptの基本型や関数の型定義について学習を進めてみてください。

はじめに#

実行環境・前提条件#

前提知識#

動作確認環境#

期待される結果#

Node.jsのインストール#

公式インストーラを使う方法#

バージョン管理ツールを使う方法（推奨）#

TypeScriptコンパイラのセットアップ#

グローバルインストール#

プロジェクトローカルインストール（推奨）#

TypeScriptコンパイラの基本的な使い方#

tsconfig.jsonの設定#

tsconfig.jsonの初期化#

推奨される基本設定#

主要なコンパイラオプションの解説#

ビルドスクリプトの設定#

VS Codeの推奨拡張機能#

必須の拡張機能#

推奨のワークスペース設定#

推奨拡張機能の共有#

TypeScript即時実行環境の構築#

ts-nodeを使う方法#

tsx（高速なts-node代替）#

Node.js 22以降のネイティブTypeScript実行#

プロジェクト構成の全体像#

まとめ#

参考リンク#