前回の記事では TypeScriptとは何か を解説しました。
この記事では、実際にTypeScriptを使うための 開発環境の準備方法 を解説します。

この記事で学べる内容は次の通りです。

• Node.jsとは
• TypeScriptのインストール
• TypeScriptのコンパイル
• tsconfig.jsonの設定

TypeScriptはJavaScriptとは少し違う仕組みで動作するため、まずはその仕組みから理解していきましょう。

---

TypeScriptはそのままでは動かない

まず重要なポイントです。

TypeScriptはブラウザでは直接実行できません。

ブラウザが理解できる言語は

JavaScript

だけです。

そのためTypeScriptのコードは次の流れで実行されます。

TypeScript
↓
JavaScriptに変換
↓
ブラウザ実行

この変換を コンパイル と呼びます。

---

Node.jsとは

TypeScriptを使うためには Node.js が必要です。

Node.jsとは

JavaScriptをブラウザ以外で実行する環境

です。

Node.jsがあることで

• npm（パッケージ管理）
• ビルドツール
• TypeScriptコンパイラ

などを使えるようになります。

---

Node.jsの確認

まずNode.jsがインストールされているか確認します。

node -v

次にnpmも確認します。

npm -v

---

TypeScriptのインストール

Node.jsが準備できたら、次にTypeScriptをインストールします。

npm install -g typescript

---

インストール確認

tsc -v

表示例

Version 5.3.3

---

TypeScriptファイルを作る

TypeScriptのファイルは

.ts

拡張子を使います。

例

let message: string = "Hello TypeScript"
console.log(message)

---

TypeScriptをコンパイルする

TypeScriptをJavaScriptに変換します。

tsc app.ts

すると

app.js

が生成されます。

---

tsconfig.jsonとは

実務では

tsconfig.json

という設定ファイルを使います。

---

tsconfig作成

tsc --init

---

重要設定

target

JavaScriptの出力バージョン

module

モジュール方式

strict

型チェックの厳しさ

"strict": true

---

TypeScriptのディレクトリ構成（実務）

実務では次のような構成が一般的です。

project
 ├ src
 │   ├ app.ts
 │   └ user.ts
 │
 ├ dist
 │   └ app.js
 │
 └ tsconfig.json

---

TypeScript開発の基本フロー

TypeScriptを書く
↓
tscでコンパイル
↓
JavaScript生成
↓
ブラウザまたはNodeで実行

最近のフレームワークではこの処理は自動化されています。

例

• Vite
• Next.js
• Nuxt
• React CLI

---

まとめ

この記事では TypeScriptの環境構築 を解説しました。

重要なポイント

• TypeScriptはJavaScriptにコンパイルされる
• Node.jsが必要
• tscでコンパイル
• tsconfigで設定管理

環境構築ができれば、いよいよTypeScriptの本格的な開発が始められます。

---

次の記事

次回は

TypeScriptの基本型

を解説します。