TypeScriptとJavaScriptの違いは？なぜみんな型を書くのか調べてわかったこと

結論

調べてみると、TypeScriptはJavaScriptのミスを、動かす前に見つけてくれるものでした。

TypeScriptは、JavaScriptに型のルールを足したものです。

公式ドキュメントでは、TypeScriptはJavaScriptのスーパーセット（上位互換）と説明されています。JavaScriptの文法は、そのままTypeScriptでも正しい文法です。

比べる点	JavaScript	TypeScript
型の指定	基本は書かない	書ける
ミスに気づくタイミング	動かしたとき	動かす前（書いているとき）
ブラウザで直接動く？	動く	動かない（JavaScriptに変換する）

👉 型 ＝ 「ここにはどんな値が入るか」のルール

型があると何がうれしいの？

たとえば、こんなコードです。height を heigth と打ち間違えています。

const box = { width: 10, height: 15 };
const area = box.width * box.heigth;

console.log(area); // NaN

JavaScriptでは、これを実行してもエラーで止まりません。

存在しない項目を読むと undefined になり、計算結果は NaN（数ではないという意味）になります。

間違っているのに、静かに動き続けるんです。

TypeScriptなら、実行する前に教えてくれます。

const box = { width: 10, height: 15 };
const area = box.width * box.heigth;
// エラー: 'heigth' は存在しません。'height' ではありませんか？

これが、TypeScriptが静的型チェッカーと呼ばれる理由です。「静的」は、コードを動かさずに調べるという意味です。

型の書き方を少しだけ

書き方は、値の後ろに : 型 をつけるだけです。

const userName: string = 'ひよ';
const age: number = 20;

function add(a: number, b: number): number {
  return a + b;
}

add(1, 2);    // OK
add(1, 'あ'); // エラー：文字は渡せません

関数に間違った値を渡すと、書いている時点でエディタが教えてくれます。

実は、型を全部書く必要はありません。const age = 20; と書けば、TypeScriptが数字だと判断してくれます。これを型推論と呼びます。

TypeScriptが動くまで

ここは勘違いしやすいポイントです。

TypeScriptのファイル（.ts）

　↓

型をチェックする

　↓

型を消して、JavaScriptに変換する

　↓

ブラウザで動く

公式ドキュメントにもある通り、変換後のコードに型の情報は残りません。

👉 型は開発中にミスを見つけるためのもの

👉 動いているときの速さや動作は変わらない

まとめ

• TypeScriptはJavaScriptに型を足したもの
• ミスに動かす前に気づける
• 最後はJavaScriptになって動く

めんどくさいルールではなく、未来の自分を助けてくれる仕組みでした。

JavaScriptを書けるようになったら、次の一歩としてぜひ触れてみてください。

参考資料

• TypeScript for the New Programmer（TypeScript公式）