TypeScriptとは？非エンジニア向けにわかりやすく解説

TypeScriptは、型の付いたJavaScriptです。各値がどんな種類のデータであるべきかをラベルで示します。数値、文字列、注文の一覧などです。するとTypeScriptは、コードを実行する前に、その不一致がないかをチェックします。TypeScriptの公式サイトでは、これを「型を書くための構文を持つJavaScript」と説明しています。型は、通常のJavaScriptに変換されるときに取り除かれ、そのJavaScriptはJavaScriptが動く場所ならどこでも動作します。

AIで作る場合にこれが大切な理由

AIモデルは速くコードを書きますが、速く書かれたコードにはミスがあります。あるファイルではcustomerName、別のファイルではcustomer_nameというフィールド名、テキストとして渡された価格、欠けている値で呼び出された関数などです。普通のJavaScriptでは、そうしたミスの多くは、誰かが間違ったボタンを押したときに初めて表面化します。

TypeScriptは、コードを書いている段階で、多くのミスを早く見つけます。

• AIがすぐにフィードバックを得られます。 型のエラーは、間違っている行を正確に指し示すので、エージェントはあなたが目にする前に修正できます。
• 変更が安全になります。 フィールド名を変えると、古い名前を使っている箇所すべてに、TypeScriptが警告を出します。
• コード自体が説明になります。 型は、関数が何を期待し、何を返すかを文書化します。これはあなたにも、AIにも、後でそのコードに関わるどの開発者にも役立ちます。
• エディターが賢くなります。 エディターは各値の種類を把握しているため、自動補完や「定義へ移動」がより正確に働きます。

これが、多くのAIアプリビルダーが標準でTypeScriptを採用している大きな理由です。

身近なたとえ

ラベルの付いた区画がある倉庫を考えてみてください。各区画には「パレット専用」「冷蔵」「最大500kg」といった看板があります。商品が届くと、入り口のチェック係が商品と看板を照合します。冷凍の魚が乾物の区画に向かっていれば、数週間後に臭いで気づくのではなく、入り口で止められます。

TypeScriptは、その入り口のチェック係です。型は看板にあたります。チェックは、コードという商品が使われる前に行われます。そして、すべてが所定の位置に収まったら、看板は取り外されます。実行されるJavaScriptには、もう型が残っていないのです。

TypeScriptの仕組み

1. あなた（またはAI）が.tsまたは.tsxファイルを書きます。 型のラベルが付いたTypeScriptです。
2. 型チェッカーがコードを読み取り、不一致をエディターやビルドでエラーとして報告します。
3. ビルドの工程で型が取り除かれ、普通のJavaScriptが生成されます。
4. そのJavaScriptが実行されます。 ブラウザ上、またはサーバー（Node.js、Deno、Bun）上です。

重要な帰結があります。TypeScriptが調べるのは、あなたが書いたコードであって、アプリの実行中に届くデータではありません。外部のAPIが予期しないものを返してきても、実行時のバリデーションを追加しない限り、TypeScriptはそれを見られません。

実例：予約フォーム

ヘアサロンの予約アプリを作っているとします。予約を表す型は次のようになります。

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // the ? means optional
};

そして、手付金を計算する関数はこのようになります。

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

ここで、TypeScriptが何を見つけるかを見てみましょう。

フィールド名のつづりミス。

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScriptは、priseが既知のプロパティではなく、priceが欠けていると報告します。普通のJavaScriptでは、これは手付金をNaN（数値ではない）として静かに計算してしまいます。

間違った種類の値。

const booking: Booking = { ...otherFields, price: "40" };

TypeScriptは、数値が期待されている場所に文字列は使えないと報告します。TypeScriptがなければ、"40" * 0.2は偶然動いてしまいますが、"40" + 5は"405"になります。請求書に現れるような種類のバグです。

存在しないサービス。

const booking: Booking = { ...otherFields, service: "perm" };

TypeScriptは、"perm"が許可されたサービスのひとつではないと報告します。後でサロンがパーマを追加するときは、型にそれを加えます。するとTypeScriptが、価格表、フォーム、カレンダーの色など、更新が必要なすべての箇所を示してくれます。

できないこと。 予約フォームがブラウザからprice: "40"をサーバーに送った場合、サーバー上のTypeScriptは、実行時にはそれを見られません。そのため、よく作られたアプリは、届いたデータも検証します。多くの場合、形をチェックして適切なBookingに変換するバリデーションのライブラリを使います。

TypeScriptとJavaScriptの比較

よく使う用語の解説

よくある間違いと誤解

• 「TypeScriptを使えばコードからバグがなくなる」。 見つけられるのは、データの形の不一致だけで、ロジックの誤りは見つけられません。手数料が20%のところを2%にしていても、型チェックは通ってしまいます。
• 「型があれば不正な入力から守られる」。 型は実行時には消えてしまいます。ユーザー、フォーム、APIから届くデータはバリデーションしてください。
• どこでもanyを使う。 AIが行き詰まると、エラーを黙らせるためにanyや// @ts-ignoreに頼ることがあります。それは問題を解決するのではなく、隠してしまいます。
• プレビューが動くからと型エラーを無視する。 型エラーのあるコードでも実行されてしまうツールがあります。それでもそのエラーは、将来のバグの種です。
• 「TypeScriptは遅い」。 型は実行前に取り除かれるので、実際に動くJavaScriptは基本的に同じです。
• 「大規模なチームでしか役立たない」。 一人で作る場合でも、特にAIがほとんどの編集を行うときには恩恵があります。

AIビルダーに頼む内容

• 「TypeScriptを使い、strictモードをオンにしてください。」
• 「顧客、予約、請求書など、主要なレコードの共有の型を定義して、フロントエンドとバックエンドの両方で使ってください。」
• 「エラーを回避するためにanyや@ts-ignoreを使わないでください。根本的な問題を直し、その原因を教えてください。」
• 「型だけでなく、サーバー側で届いたデータをすべてバリデーションしてください。」
• 「型チェッカーを実行し、すべてのエラーを直してから完了と報告してください。」
• 「フィールド名を変えるときは、TypeScriptが警告するすべての箇所を更新してください。」
• 「この型エラーを、普通の言葉で説明してください。」

AIが生成したものを確認する方法については、AIが生成したコードのレビュー方法とAIで作ったアプリのデバッグ方法をご覧ください。

MythexでのTypeScript

特に指定しない場合、Mythexは新しいプロジェクトをVite + React + TypeScript + Tailwindで始めます。コードエディターには、言語の知能機能が含まれています。TypeScriptとJavaScriptを含む言語で、補完、診断、定義への移動が使えるので、型のエラーはプレビューだけでなくコードの中にも見えます。エディターは、Freeでは読み取り専用、Proでは完全に編集可能です。最初のプロンプトで別の構成を依頼することもできます。その方法は技術の選び方のドキュメントに、エディターに表示される内容はコードエディターのドキュメントに書かれています。

よくある質問