TypeScript のインストールと設定

TypeScriptのインストールはたった1つのコマンドで完了しますが、開発環境をセットアップするにはいくつかの重要な概念を理解しておく必要があります。このレッスンでは、TypeScriptの「ワークスペース」をゼロからセットアップする手順を解説します。

1. TypeScript をインストールする

TypeScriptはnpm（Node.jsのパッケージマネージャー）を介してインストールされます。まず、お使いのコンピュータにNode.jsがインストールされている必要があります。

(1) Node.js がインストールされているか確認する

ターミナル（Windows では PowerShell、macOS では Terminal）を開き、次のように入力します：

node --version
npm --version

バージョン番号（v18.17.0 や 9.6.3 など）が表示されている場合は、すでにインストールされていることを意味します。「コマンドが見つかりません」というエラーが表示された場合は、まず Node.js の公式サイトにアクセスして、LTS バージョンをダウンロードし、インストールしてください。

(2) TypeScriptをシステム全体にインストールする

npm install -g typescript

-g はグローバルインストールを示します。インストールが完了すると、どのディレクトリからでも tsc コマンドを使用できるようになります。

(3) インストールが正常に完了したことを確認する

tsc --version

Version 5.3.3 のような出力が表示された場合は、インストールが正常に完了したことを意味します。

▶ 例：TypeScriptのインストール状況を確認する

# Execute the following commands in order，Confirm that the environment is ready
node --version
npm --version
tsc --version

出力：

v18.17.0
9.6.3
Version 5.3.3

2. 最初の tsconfig.json

tsconfig.json は、TypeScript プロジェクト用の設定ファイルであり、コンパイラにコードの処理方法を指示するものです。単純なプロジェクトでは必要ない場合もありますが、実際の開発現場では、ほぼすべての TS プロジェクトにこのファイルが含まれています。

(1) 迅速な生成

プロジェクトディレクトリで、次のコマンドを実行してください：

tsc --init

これにより、設定可能なすべてのオプション（そのほとんどはコメントアウトされています）を含む tsconfig.json ファイルが自動的に生成されます。

(2) 主な設定オプションの説明

新しく生成された設定ファイルには多くの情報が含まれていますが、初心者は以下のいくつかの点に注意すれば十分です：

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "skipLibCheck": true
  }
}

▶ 例：このチュートリアルに適した tsconfig.json ファイル

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

3. VS Code の設定

VS CodeとTypeScriptは「兄弟」のような関係にあります。どちらもマイクロソフトの製品であり、VS Codeは追加の拡張機能をインストールすることなく、そのままTypeScriptをサポートしています。

(1) 標準機能

VS Code には TypeScript の言語サポートが組み込まれており、以下の機能を提供します：

• リアルタイムの型エラーが赤色で強調表示される（波線の下線）
• オートコンプリート（. と入力すると、プロパティやメソッドの候補が表示されます）
• 項目にカーソルを合わせると、その種類が表示されます
• F12 キーを押して定義を表示する
• F2 キーを押すと、変数の名前を変更できます（すべての参照が自動的に更新されます）

(2) おすすめのプラグイン

(3) 自動コンパイルの設定

VS Code で Ctrl+Shift+B（macOS では Cmd+Shift+B）を押して tsc: watch を選択すると、VS Code がバックグラウンドでファイルの変更を監視するようになります。.ts ファイルを保存するたびに、自動的に .js にコンパイルされるため、tsc を手動で実行する必要はありません。

4. プロジェクトのディレクトリ構造

標準的な TypeScript プロジェクトは、次のような構成になっています：

my-project/
├── src/              ← TypeScript Source Code
│   ├── index.ts      ← Input File
│   └── utils.ts      ← Tools Module
├── dist/             ← Compilation output JavaScript（Automatically Generated，Do not edit manually）
│   ├── index.js
│   └── utils.js
├── tsconfig.json     ← TypeScript Layout
├── package.json      ← Node.js Project Configuration
└── node_modules/     ← Dependency Packages（Automatically Generated，Do not submit to git）

5. よくあるインストールに関する問題のトラブルシューティング

❓ よくある質問

📖 まとめ

• npm install -g typescript 経由でインストールされ、tsc --version 経由で確認済み
• tsconfig.json はプロジェクト設定の中核となるものであり、strict: true を有効にする必要があります
• VS Code は、インストール直後から TypeScript をサポートしています。tsc: watch 自動コンパイルを有効にすることをお勧めします。
• 標準的なプロジェクト構造：ソースコードは src/、ビルド成果物は dist/ に配置してください。dist ディレクトリは手動で変更しないでください。
• 問題が発生した場合は、まずPATHと文字エンコーディングを確認してください。インストールに関する問題の90％は、これら2つの要因に起因しています。

📝 練習問題

1. 基本演習（難易度：⭐）：お使いのコンピュータにTypeScriptをインストールし、tsc --versionを実行してインストールが正常に完了したことを確認し、バージョン番号をメモしておいてください。
2. 上級問題（難易度 ⭐⭐）： プロジェクトディレクトリを作成し、tsc --init を実行して tsconfig.json を生成した後、strict を true に、outDir を "./dist" に、rootDir を "./src" に設定してください。
3. 課題（難易度：⭐⭐⭐）：前の手順で作成したプロジェクトディレクトリを VS Code で開き、tsc: watch の自動コンパイルモードを設定し、tsconfig.json 内の target の値を変更してみてください（ES2020 から ES5 に変更）。生成されたJSコードがどのように変化するかを確認してください（ヒント：矢印関数が通常の関数になります）。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて