TypeScriptとは・環境構築

この章では、TypeScript の基本概念と開発環境の構築方法を学びます。

この本を読む前に

警告

前提知識

この本は JavaScript の基礎知識を前提としています。以下の内容を理解していることを確認してください。

変数と定数: let、constの使い方
データ型: 文字列、数値、真偽値、配列、オブジェクト
関数: 関数宣言、アロー関数、引数と戻り値
制御構文: if/else、for、while、switch
配列メソッド: map、filter、find、forEach
オブジェクト操作: プロパティアクセス、スプレッド構文
非同期処理: Promise、async/await（後半の章で使用）

また、コマンドライン（ターミナル）の基本操作ができることも必要です。

この章で学ぶこと

TypeScript とは何か、なぜ使うのかを理解する
TypeScript の主要な特徴とメリットを把握する
開発環境を構築する
VSCode の推奨設定

備考

この章の内容は、実際に手を動かしながら学習することを推奨します。環境構築が完了したら、次章で最初の TypeScript プログラムを作成します。

TypeScriptとは

TypeScript は、Microsoft 社が開発・保守しているプログラミング言語です。JavaScriptに静的型付けを追加したスーパーセット（上位互換）として設計されています。

TypeScriptの特徴

静的型付け: コンパイル時に型エラーを検出できる
JavaScriptとの互換性: 既存の JavaScript コードをそのまま使える
最新のECMAScript機能: ES2015 以降の機能を先取りして使える
開発ツールのサポート: IDE の補完機能が充実
大規模開発に適している: コードの保守性・可読性が向上

なぜTypeScriptを使うのか？

JavaScriptの課題:

// JavaScriptの例：型エラーが実行時にしか分からない
function add(a, b) {
  return a + b;
}

console.log(add(5, 10));        // 15 - 正常に動作
console.log(add('5', '10'));    // '510' - 意図しない結果（文字列結合になる）
console.log(add(5, '10'));      // '510' - 型の不一致に気づきにくい

TypeScriptでの解決:

// TypeScriptの例：型を明示することでコンパイル時にエラーを検出
function add(a: number, b: number): number {
  return a + b;
}

console.log(add(5, 10));        // 15 - 正常に動作
console.log(add('5', '10'));    // エラー: 型 'string' の引数を型 'number' のパラメータに割り当てられません
console.log(add(5, '10'));      // エラー: 型の不一致をコンパイル時に検出

コード解説:

a: number - 引数 a は number 型であることを宣言
b: number - 引数bも number 型であることを宣言
: number - 関数の戻り値も number 型であることを宣言
TypeScript コンパイラが、型が一致しない呼び出しをエラーとして検出

TypeScriptのメリット

メリット	説明	具体例
バグの早期発見	コンパイル時に型エラーを検出	引数の型ミスをコーディング時に発見
IDEの補完	型情報により正確な補完が可能	メソッド名の入力ミスを防ぐ
コードの自己文書化	型注釈がドキュメントの役割を果たす	関数の引数・戻り値の型が一目で分かる
リファクタリングが容易	型情報により安全に変更できる	変数名の一括変更時の影響範囲を把握
チーム開発の効率化	コードの意図が明確になる	他の開発者が書いたコードを理解しやすい

開発環境のセットアップ

TypeScript を学習・開発するための環境を構築しましょう。

オプション1: オンライン環境（最も手軽）

TypeScript Playgroundを使用すると、インストール不要ですぐに試せます。

URL: https://www.typescriptlang.org/play
メリット: インストール不要、ブラウザだけで動作
用途: 簡単なコードの試行、学習、コードの共有

使い方:

上記 URL にアクセス
左側のエディタに TypeScript コードを入力
右側に自動でコンパイル後の JavaScript コードが表示される
下部の Logs タブで実行結果を確認

オプション2: ローカル環境（本格的な開発向け）

必要なツール:

Node.js（JavaScript ランタイム）
TypeScript コンパイラ

ステップ1: Node.jsのインストール

# Node.jsがインストールされているか確認
node --version
# v22.12.0 以上が表示されればOK（推奨は v24 LTS）

# npmのバージョンも確認
npm --version
# 10.0.0 以上が表示されればOK

備考

本書は Node.js 22 LTS 以降を前提としています。Node.js 22.18 以降（および v24）では type stripping がデフォルトで有効化され、node app.ts のようにフラグなしで .ts ファイルを直接実行できます（学習時のビルド手順を省略できます）。enum や namespace のように型を超えた変換が必要な構文では --experimental-transform-types を付けます（18 章で詳しく扱います）。Node.js 20 以前はすでにサポート期間が終了しているため、新規学習には推奨しません。

Node.jsがインストールされていない場合:

公式サイトから LTS 版をダウンロード
インストーラーの指示に従ってインストール
ターミナルを再起動して上記のコマンドで確認

ステップ2: TypeScriptのインストール

# グローバルにTypeScriptコンパイラをインストール
# -gオプション: システム全体でtscコマンドを使えるようにする
npm install -g typescript

# インストールされたTypeScriptのバージョンを確認
tsc --version
# Version 6.0 以上が表示されればOK（本書は TypeScript 6.0 前提、執筆時点 6.0.3）

コマンド解説:

npm: Node.js のパッケージマネージャー（ライブラリ管理ツール）
install: パッケージをインストールするコマンド
-g: グローバルインストール（システム全体で使えるようにする）
typescript: インストールするパッケージ名

ステップ3: プロジェクトフォルダの作成

# プロジェクト用のディレクトリを作成
mkdir typescript-learning
# 作成したディレクトリに移動
cd typescript-learning

# package.jsonを作成（プロジェクトの設定ファイル）
# -yオプション: すべての質問にデフォルト値で答える
npm init -y

生成されるpackage.json:

{
  "name": "typescript-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

VSCodeの推奨設定

TypeScript 開発には VSCode（Visual Studio Code）を推奨します。

推奨拡張機能

拡張機能	説明	重要度
TypeScript Importer	import文を自動追加	★★★
Error Lens	エラーをエディタ上にインライン表示	★★★
Prettier	コードの自動整形	★★★
ESLint	コード品質チェック	★★☆
Auto Rename Tag	HTMLタグの自動リネーム	★★☆
Path Intellisense	ファイルパスの補完	★☆☆

VSCodeの設定（settings.json）

{
  // 保存時に自動整形
  "editor.formatOnSave": true,
  // デフォルトのフォーマッターをPrettierに
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // TypeScriptファイルでimportを自動追加
  "typescript.suggest.autoImports": true,
  // 相対パスでimport
  "typescript.preferences.importModuleSpecifier": "relative",
  // 未使用のimportを自動削除
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }
}

TypeScript用の設定が有効か確認

VSCode で TypeScript ファイル（.ts）を開く
エディタ右下に「TypeScript」とバージョンが表示されていれば OK
変数にカーソルを合わせると型情報がホバー表示される

試してみよう: 環境構築を完了しよう ★

Node.js と TypeScript をインストールし、プロジェクトフォルダを作成してください。

ヒント

まず node --version で Node.js がインストールされているか確認
インストールされていなければ https://nodejs.org/ からダウンロード
npm install -g typescript で TypeScript をインストール
tsc --version でインストールを確認
mkdir typescript-learning && cd typescript-learning && npm init -y でプロジェクトを初期化

解答と解説

# 1. Node.jsの確認
node --version
# → v22.x.x 以上（LTS）が表示されればOK

# 2. TypeScriptのインストール
npm install -g typescript

# 3. インストール確認
tsc --version
# → Version 6.0 以上（執筆時点 6.0.3）が表示されればOK

# 4. プロジェクトフォルダの作成
mkdir typescript-learning
cd typescript-learning
npm init -y

# 5. 確認
ls
# → package.json が存在すれば成功

これで環境構築は完了です。次章では、この環境を使って最初の TypeScript プログラムを作成し、コンパイル・実行してみます。

よくある質問

Q1: JavaScriptファイルをTypeScriptとして使えますか？

A: はい、可能です。TypeScript は JavaScript のスーパーセットなので、.jsファイルを.tsに変更するだけで動作します。

// 既存のJavaScriptコード（valid.ts）
function sum(a, b) {
  return a + b;
}

console.log(sum(1, 2));  // 3

このコードは TypeScript として有効です。ただし、型注釈がないため、TypeScript のメリットを十分に活かせません。

Q2: TypeScriptを学ぶ前にJavaScriptの知識は必要ですか？

A: はい、JavaScript の基礎知識が必要です。

最低限必要な知識:

変数（let、const）
データ型（number、string、boolean、array、object）
関数
条件分岐（if、switch）
ループ（for、while）
オブジェクトと配列の操作

TypeScript は「JavaScript に型を追加したもの」なので、JavaScript の知識がベースになります。

初学者がつまずきやすいポイント

警告

よくある間違い

❌ tscコマンドが見つからない

tsc --version
# → command not found: tsc

原因: TypeScript がグローバルインストールされていない、または PATH が通っていない。

解決策:

# 再インストール
npm install -g typescript

# それでも動かない場合はnpxを使用
npx tsc --version

❌ Node.jsのバージョンが古い

node --version
# → v14.x.x

原因: 古い Node.js では TypeScript の一部機能が動作しない。

解決策: Node.js 公式サイトから LTS 版（v22.12 以上、推奨は v24 LTS）をインストールする。

❌ VSCodeでTypeScriptの補完が効かない

原因:

TypeScript がインストールされていない
ファイル拡張子が.tsではない
tsconfig.jsonがない

解決策:

npm install -g typescript を実行
ファイル拡張子を.tsに変更
tsc --init で設定ファイルを生成

❌ 「Cannot find module」エラー

Cannot find module 'typescript'

原因: プロジェクトディレクトリで TypeScript がインストールされていない。

解決策:

# プロジェクトにローカルインストール
npm install --save-dev typescript

まとめ

この章で学んだこと:

TypeScriptとは何か: JavaScript に静的型付けを追加した言語
TypeScriptのメリット: バグの早期発見、IDE の補完機能、コードの自己文書化
開発環境の構築: Node.js と TypeScript コンパイラのインストール

次の章では、実際に TypeScript コードを書いて、コンパイル・実行してみます。

次に読む

最初のTypeScriptプログラム

この本を読む前に​

この章で学ぶこと​

TypeScriptとは​

TypeScriptの特徴​

なぜTypeScriptを使うのか？​

TypeScriptのメリット​

開発環境のセットアップ​

オプション1: オンライン環境（最も手軽）​

オプション2: ローカル環境（本格的な開発向け）​

VSCodeの推奨設定​

推奨拡張機能​

VSCodeの設定（settings.json）​

TypeScript用の設定が有効か確認​

試してみよう: 環境構築を完了しよう ★​

よくある質問​

Q1: JavaScriptファイルをTypeScriptとして使えますか？​

Q2: TypeScriptを学ぶ前にJavaScriptの知識は必要ですか？​

初学者がつまずきやすいポイント​

❌ tscコマンドが見つからない​

❌ Node.jsのバージョンが古い​

❌ VSCodeでTypeScriptの補完が効かない​

❌ 「Cannot find module」エラー​

まとめ​

次に読む​

この本を読む前に

この章で学ぶこと

TypeScriptとは

TypeScriptの特徴

なぜTypeScriptを使うのか？

TypeScriptのメリット

開発環境のセットアップ

オプション1: オンライン環境（最も手軽）

オプション2: ローカル環境（本格的な開発向け）

VSCodeの推奨設定

推奨拡張機能

VSCodeの設定（settings.json）

TypeScript用の設定が有効か確認

試してみよう: 環境構築を完了しよう ★

よくある質問

Q1: JavaScriptファイルをTypeScriptとして使えますか？

Q2: TypeScriptを学ぶ前にJavaScriptの知識は必要ですか？

初学者がつまずきやすいポイント

❌ tscコマンドが見つからない

❌ Node.jsのバージョンが古い

❌ VSCodeでTypeScriptの補完が効かない

❌ 「Cannot find module」エラー

まとめ

次に読む