TypeScriptとは何か — 型がある世界

TypeScriptは、JavaScriptに静的な型システムを加えた言語です。 Microsoftが開発し、JavaScriptの完全なスーパーセット（上位互換）として設計されています。 つまり、有効なJavaScriptコードはそのままTypeScriptとしても動きます。

この章では「なぜ型があると嬉しいのか」「TypeScriptは何をしてくれるのか」を、導入前後の比較で整理します。

学習者

JavaScriptは書けるんだけど、わざわざ型を書くTypeScriptって…正直、面倒が増えるだけじゃないの？

JavaScriptの自由さと、その代償

JavaScriptは動的型付けの言語です。変数にどんな値でも入れられるし、関数にどんな引数でも渡せます。

function greet(user) {
  return `こんにちは、${user.name}さん`;
}
 
greet({ name: 'Alice' }); // "こんにちは、Aliceさん"
greet('Alice'); // "こんにちは、undefinedさん" — 実行するまでわからない
greet(); // TypeError: Cannot read properties of undefined

この関数は user がオブジェクトで name プロパティを持つことを前提にしていますが、JavaScriptはそれをチェックしません。間違った値を渡してもエラーになるのは実行時です。

小さなスクリプトならこの自由さは便利ですが、コードが大きくなると「この関数に何を渡せばいいのか」「この変数に何が入っているのか」がわからなくなり、バグの温床になります。

TypeScriptが加えるもの

TypeScriptは「この変数には文字列しか入らない」「この関数はオブジェクトを受け取って文字列を返す」といった型の情報をコードに書けるようにします。

type User = {
  name: string;
};
 
function greet(user: User): string {
  return `こんにちは、${user.name}さん`;
}
 
greet({ name: 'Alice' }); // OK
greet('Alice'); // コンパイルエラー — string型はUser型に代入できない
greet(); // コンパイルエラー — 引数が足りない

間違いがコードを書いている時点（エディタ上）で検出されます。実行して初めて気づくのではなく、書いている途中でエラーが表示されるので、バグを未然に防げます。

TypeScriptの動き方

TypeScriptは直接ブラウザやNode.jsで実行されるわけではありません。コンパイル（トランスパイル）という工程でJavaScriptに変換されてから実行されます。

コンパイル時に型の情報はすべて取り除かれます。実行されるJavaScriptには型の痕跡はありません。つまり型は「開発時の安全ネット」であり、実行時のパフォーマンスには影響しません。

型があると何が嬉しいのか

エディタの補完が効く

型情報があると、エディタ（VS Codeなど）が「このオブジェクトにはどんなプロパティがあるか」を知っているので、入力補完が正確になります。

type User = {
  name: string;
  age: number;
  email: string;
};
 
function showUser(user: User) {
  user. // ← ここでname, age, emailが補完候補に出る
}

JavaScriptでもある程度の補完は効きますが、TypeScriptの方が圧倒的に正確です。特にチーム開発で「他の人が書いた関数を使う」ときに威力を発揮します。

リファクタリングが安全になる

プロパティ名を変更したり、関数の引数を変えたりしたとき、影響範囲をコンパイラが自動的に教えてくれます。

// nameをfullNameに変更したい
type User = {
  fullName: string; // name → fullName に変更
  age: number;
};
 
// user.name を使っているすべての箇所でコンパイルエラーが出る
// → 修正漏れがなくなる

コードがドキュメントになる

型定義が「この関数は何を受け取って何を返すか」の仕様書になります。

// 型を見れば使い方がわかる
function formatPrice(amount: number, currency: 'JPY' | 'USD'): string {
  // ...
}

この関数は「数値と通貨コード（JPYかUSD）を受け取って文字列を返す」ことが、型を見るだけでわかります。JSDocやコメントに頼る必要がありません。

JavaScriptとの関係

TypeScriptはJavaScriptのスーパーセットなので、JavaScriptの知識はそのまま活きます。新しい言語を一から学ぶのではなく、「JavaScriptに型の記法を足す」イメージです。

逆に言えば、TypeScript固有の機能は型に関する部分だけです。if や for、async/await、Array.map などはすべてJavaScriptと同じです。この本では、JavaScriptの構文は既に知っている前提で、TypeScriptが加える「型」の部分に集中します。

次の章では、TypeScriptの型の基本であるプリミティブ型・配列・オブジェクトの型注釈から始めます。