はじめに
TypeScript（以下TS）は、JavaScript（JS）に型（type）というルールを足したプログラミング言語です。ブラウザやNode.jsはTSを直接実行できないため、最終的にはTSをJSへ変換（トランスパイル）して動かします。
JavaScriptについては、こちらのカリキュラムをご参照ください。
型を使うと、実行前（書いている最中）にミスを検出でき、補完が賢くなり、チーム開発でも「意図」がコードに残るので読みやすくなります。学生のうちにTSの基礎を押さえると、現場での学習コストが大きく下がります。
TypeScriptの全体像
なぜTypeScriptが必要？
JSは柔軟ですが、柔らかすぎて「undefinedを呼び出してクラッシュ」などのバグが実行時まで気づけないことがあります。TSは変数や関数の“型”を宣言し、コンパイラ（tsc）がチェックすることで、バグの多くを実行前に止めます。
さらにIDE（VS Codeなど）が型情報を読み取り、強力な補完・リネーム・ジャンプを提供。学習と生産性が同時に上がります。
開発の流れ（トランスパイル）
# プロジェクト初期化
npm init -y
npm install --save-dev typescript
# tsconfig（設定ファイル）生成
npx tsc --init
# コンパイル（.ts → .js）
npx tsc
ふだんはエディタの拡張（VS CodeのTSサポート）を使いながら保存時にチェック、ビルド時にnpx tsc --noEmit（JS出力せず型だけ検査）をCIに入れると安全です。
まず覚えるTypeScriptの文法
基本の型注釈と型推論
let age: number = 20; // 明示的な型注釈
let name = "Taro"; // 型推論（stringと推論される）
function greet(who: string): string {
return `Hello, ${who}`;
}
TSは型推論が優秀なので、毎回すべてに注釈は不要です。「外から見える部分（関数の引数と戻り値）」には付けると読みやすくなります。
オブジェクト型と型エイリアス
type User = {
id: string;
name: string;
premium?: boolean; // ? は任意（あってもなくてもOK）
};
const u: User = { id: "u1", name: "Alice" };
ユニオン型と絞り込み（ナローイング）
function toText(value: string | number) {
if (typeof value === "number") {
return value.toFixed(2); // number として扱える（絞り込み）
}
return value.toUpperCase(); // string として扱える
}
ジェネリクス（汎用型）
function wrap<T>(value: T) {
return { value };
}
const a = wrap(123); // T は number
const b = wrap("hello"); // T は string
any / unknown / never の使い分け
any：何でも可（最終手段。型チェックを素通り）unknown：正体不明。使う前にチェックが必要（安全）never：起こりえない（例：必ず例外を投げる関数の戻り型）
設定のキモ：tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"strict": true, // まずはtrue推奨（安全）
"noImplicitAny": true, // 暗黙any禁止
"esModuleInterop": true, // importの互換性
"skipLibCheck": true, // 依存の型チェックをスキップ（ビルド高速化）
"outDir": "dist"
},
"include": ["src"]
}
strictを有効にして「安全側」に寄せるのが基本。エラーが多すぎる場合は、includeを絞って段階的に広げます。
ツールとエコシステム
VS CodeとESLint/Prettier
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
// .eslintrc.cjs（例）
module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
};
Lint（コード規約チェック）＋整形を自動化すると、レビューが「内容」に集中できます。
ビルド＆実行
- ブラウザ：Vite/webpackでTS対応のテンプレートを使う
- Node.js：
tsxやts-nodeで開発中はそのまま実行、デプロイはJSを配布 - テスト：Jest/VitestはTS対応の設定が用意されています
小さく始める導入手順（既存JSから移行）
- 拡張子を少しずつ：
.js→.ts（Reactは.tsx）に変えて、動く範囲で型付け - 外側から型注釈：関数の引数と戻り値に型を付け、内部は推論に任せる
- CIに型チェック：
npx tsc --noEmitをパイプラインへ - anyの棚卸し：
// TODO: narrowコメントを付けて計画的に削減
よくあるつまずきと回避策
「ライブラリの型がない」問題
@types/ライブラリ名 を探してインストール（DefinitelyTyped）。見つからない場合は最小限の型を自作してtypesディレクトリに置く。
「import が動かない」問題
moduleやバンドラの設定を見直し。Nodeならtype: "module"やts-node/tsxの設定を合わせる。CommonJSとの互換はesModuleInteropが効くことが多いです。
「strictにしたらエラー地獄」問題
新規コードはstrict、既存は段階移行。strict: true＋skipLibCheck: trueで依存の騒音を消し、// @ts-expect-errorは最小限に。
学習ロードマップ（学生向け）
- 基本型・ユニオン・ジェネリクス（このページ）
- 配列/オブジェクト操作（
map/filter、Record/Partialなどユーティリティ型） - React/NodeでTSテンプレートを動かす
- ESLint/Prettier/CIで型チェックを自動化
- OSSの型定義に触れてみる（
@types）
まとめ
TypeScriptは「JSの書き心地はそのまま」「型で安全性と開発体験を強化」する実用的な選択肢です。まずは小さく導入し、--noEmitで毎回の保存＝型チェックを習慣化。型は“壁”ではなく“ガードレール”——安心してスピードを出すための味方です。
