TypeScriptとJavaScriptの違い — 「2枚」を渡す前に気づける？

ひよこ

チケットの枚数に「2」という文字を渡したら、実行前に気づける？

ペンギン先生

TypeScriptはJavaScriptを土台に、実行前に型を調べる「静的型チェック」などを加えた言語だよ。JavaScriptにも文字列や数値といった実行時の型はある。TypeScriptはその使い方を事前に検査できるけれど、正しく動くJavaScriptでも型エラーになるコードはあるんだ。

ひよこ

型っていうのは何なの？

ペンギン先生

型は「この関数には数値を渡す」「結果は文字列になる」といった約束を表すよ。例えば数値を受け取る関数に文字列を渡すと、TypeScriptの型チェックが指摘できる。型を自分で書く場合も、コードから推論される場合もあるんだ。ただし、すべてのバグを見つける仕組みではないよ。

ひよこ

なるほど、書いてる途中でミスに気づけるのはいいね。でもTypeScriptってブラウザでそのまま動くの？

ペンギン先生

通常は型注釈などを取り除いてJavaScriptに変換し、ブラウザで実行するよ。tscを使うのが一例で、ほかの変換ツールも使える。型注釈は実行時には残らないので、APIから来るデータが期待どおりかを型注釈だけで検証することはできないんだ。

ひよこ

エディタが賢くなるのはうれしいね。でも、すでにJavaScriptで書いたプロジェクトがあったらどうするの？全部書き直し？

ペンギン先生

段階的に移行できるよ。allowJsで既存の.jsを含め、checkJsでJavaScriptの型チェックを始める方法もある。その後、一部を.tsへ、JSXがあれば.tsxへ変更し、型エラーや依存ライブラリの型定義を整える。ビルド設定とテストも確認するから、改名だけで移行完了とは言えないよ。

ひよこ

ライブラリとかパッケージはどうなの？TypeScript専用のものが必要なの？

ペンギン先生

JavaScriptのライブラリを利用できるよ。型情報は同梱の.d.tsやDefinitelyTyped由来の@typesパッケージで補える。型定義がなければ自分で書く場合もあるんだ。型定義は実装そのものではないので、使うライブラリの版や実行環境との互換性も別に確認しよう。

ひよこ

じゃあJavaScriptだけで十分な場面ってあるの？

ペンギン先生

あるよ。対応するJavaScriptを実行環境でそのまま動かす構成なら、TypeScriptからの変換は不要だね。ただしJavaScriptでもバンドルなどの設定が必要なプロジェクトはあるし、.jsのまま型チェックを使うこともできる。規模だけで決めず、チームの慣れや検査したい範囲で選ぼう。

ひよこ

コンパイルが遅いって話も聞くけど、そのあたりはどうなの？

ペンギン先生

型チェックと変換を分ける選択肢があるよ。例えばesbuildで変換し、別工程でtsc --noEmitを実行すれば、JavaScriptを書き出さずに型チェックできる。CIでは型エラーがあれば失敗するようにしておこう。実行時の入力検証やテストは型チェックの代わりにならないし、その逆も同じだよ。

枚数に文字列を渡したら、どうなる？

チケットが1枚150円だとします。枚数を1枚増やすつもりの関数でも、渡す値が文字列なら違う結果になる場合があります。

function addOne(quantity) {
  return quantity + 1;
}
console.log(addOne(2));    // 3
console.log(addOne("2"));  // "21"

JavaScriptにも実行時の型があります。ここでは文字列と+の組み合わせで連結が起こります。JavaScriptに型がない、という意味ではありません。

数値を渡す約束を、TypeScriptで検査

function addOne(quantity: number) {
  return quantity + 1;
}
console.log(addOne(2));
console.log(addOne("2")); // 型エラーになる例

この2つ目の呼び出しは、あえて間違えています。新しい練習用フォルダーでTypeScriptを導入し、ファイルをquantity.tsとして保存した場合の検査例です。

npm init -y
npm install --save-dev typescript

同じフォルダーに次のtsconfig.jsonを作り、この練習で検査するファイルを明示します。

{
  "compilerOptions": {
    "strict": true,
    "noEmit": true
  },
  "files": ["quantity.ts"]
}

npx tsc --project tsconfig.json

stringをnumberへ渡せない、という指摘が出れば目的の確認ができています。2つ目をaddOne(3)へ直して再実行すると、この例の型エラーはなくなります。noEmitはJavaScriptを書き出さずに検査する指定です。--projectで自分の設定を指定し、親フォルダーなどの設定と取り違えないようにします。

型チェックを通ったあとも、入力は確かめる

型注釈は通常JavaScriptへの変換で取り除かれます。APIや入力フォームから届いたデータが数値かどうかは、実行時に確認する必要があります。次はJavaScriptでも使える、受け取った値の検査例です。

function readQuantity(value) {
  if (typeof value !== "number" ||
      !Number.isInteger(value) || value < 1) {
    throw new Error("枚数は1以上の整数にしてください");
  }
  return value;
}
console.log(readQuantity(2)); // 2

文字列"2"を数値へ変換するかは、フォームの仕様で決めます。型を付ければ料金計算・権限・すべてのバグが正しくなる、という保証はありません。

既存のJavaScriptは、少しずつ移す

allowJsで.jsを含め、checkJsで検査する方法もあります。改名だけで移行完了とは言えません。esbuildなどの変換だけ行う道具と、tscによる型チェックも区別します。型定義は同梱の.d.tsや@types、自作の宣言で補う場合がありますが、実装や利用する版との一致も確かめます。

まず動く画面から学ぶならJavaScript入門、環境と設定をそろえるならTypeScript入門へ。

参考資料

• TypeScript — Basics — 静的検査・型注釈の消去
• TypeScript — Migration — allowJsと段階的な移行
• TypeScript — checkJs — .jsの検査
• TypeScript — Type declarations — 同梱型定義と@types
• esbuild — TypeScript — 変換と型チェックの区別
• MDN — Addition — 数値の加算と文字列の連結