「JavaScriptの書き方」でJavaScriptを覚えました。小さいうちは快適です。ところが規模が増えてくると、「動かして初めて間違いに気づく」ことが増えてきます。

そのつらさを解消するのが TypeScript です。前回のSassと同じく、まず「なぜ必要になるのか」から始めます。実際、この2つは驚くほど同じ形をしています。

1. 実行するまで間違いに気づけない

ピュアなJavaScriptには、こんな落とし穴があります。

function priceWithTax(price) {
  return price * 1.1;
}

priceWithTax("1000");   // 文字列を渡してしまった

これはエラーになりません。JavaScriptは気を利かせて計算を続け、1100.0000000000002 のような値を返します。間違いに気づくのは、だいぶあとになってからです。

もっとよくあるのがこれです。

const user = getUser();
console.log(user.name);   // TypeError: Cannot read properties of undefined

getUser() が何も返さない場合があることを、書いている時点では誰も教えてくれません。動かして初めて分かります。

  • 変数に何が入っているか（文字列なのか数値なのか）を、誰も保証してくれない
  • 関数に渡す引数を間違えても、動かすまで気づけない
  • 名前を打ち間違えても、実行するまで分からない

これを「書いている最中に気づけるようにしよう」というのがTypeScriptの発想です。

2. TypeScriptで何が変わるか

型注釈 ― 「この変数は文字列」「この関数は数値を返す」と明示できます。

function priceWithTax(price: number): number {
  return price * 1.1;
}

priceWithTax("1000");
//           ^^^^^^ 型 'string' の引数を型 'number' のパラメーターに割り当てられません

保存した瞬間、赤い波線で指摘されます。実行する前です。

型推論 ― いちいち全部に書く必要はありません。中身から推測してくれます。

const name = "ShigeNoKi";   // 書かなくても string だと分かっている
name.toUpperCase();          // OK
name.toFixed(2);             // エラー。string に toFixed はない

インターフェース ― データの形に名前を付けて共有できます。

interface User {
  id: number;
  name: string;
  email?: string;   // ? は「無いこともある」
}

function greet(user: User) {
  return `こんにちは、${user.name}さん`;
}

こう書いておくと、user.nama のような打ち間違いはその場で弾かれます。

エディタの補完が効く ― 実利としていちばん大きいのはこれです。型が分かっているので、user. と打った瞬間に使えるプロパティの一覧が出ます。ドキュメントを探しに行く回数が目に見えて減ります。

3. いちばん大事な一歩 ― ブラウザーはTypeScriptを読めない

ここが前回のSassとまったく同じ形です。ブラウザーはTypeScriptをそのまま理解できません。

ブラウザーが読めるのはJavaScriptだけです。そのため、書いたTypeScriptをコンパイルして普通のJavaScriptに変換してから配ります。

main.ts    （書く用のファイル）
   ↓ コンパイル
main.js    （配る用のファイル。サーバーに置くのはこちら）

前回の図と見比べてみてください。

書く用 配る用
Sass style.scss style.css
TypeScript main.ts main.js

やっていることは同じです。書きやすい形で書き、ブラウザーが読める形に変換してから配る。この形が分かれば、新しい道具が出てきても「これはどちら側のファイルなのか」で位置づけられます。

ちなみに、変換の過程で型注釈は消えます。型はあくまで書いている人間と道具のためのもので、出来上がったJavaScriptには残りません。

4. この型は、サーバー側でも効く

最後に橋を1本架けておきます。

ここまでTypeScriptを「ブラウザーで動くJavaScriptを書きやすくするもの」として説明してきました。ですが実は、TypeScriptはサーバー側（バックエンド）でもそのまま使えます。

「フロントエンドとバックエンドは何が違うのか」で、違いは動く場所だけだと書きました。言語そのものに表と裏の区別はないので、JavaScriptもTypeScriptもサーバーの中で動かせます。

つまり、フロント側で覚えた道具立てが、そのままバックエンドでも効くということです。同じ言語で、同じ型の書き方で、画面もサーバーも書ける。ここがJavaScriptという言語のいちばん強いところです。

まとめ

  • ピュアなJavaScriptは「実行するまで間違いに気づけない」。
  • TypeScriptは型注釈・型推論・インターフェースで、それを書いている最中に気づけるようにする。
  • ブラウザーはTypeScriptを読めないので、コンパイルしてJavaScriptにしてから配る（Sassと同じ形）。
  • TypeScriptはサーバー側でも書ける。