~/VibeHandbook
$39

言語

typescriptlang.org

TypeScript

概要

TypeScript は、静的型システムを上に重ねた JavaScript です。プレーンな JavaScript にコンパイルされるため、JS が動く場所ならどこでも——ブラウザ、Node、Deno、Bun、エッジランタイム——動作し、その一方でコードが実行される前にまるごと一群のバグを捕捉します。

強み

  • 静的型が、タイプミス、null の誤り、形の不一致をコンパイル時に捕捉する。
  • 卓越したエディタ体験: オートコンプリート、インラインドキュメント、安全なリファクタリング。
  • 段階的な導入 — 好きなだけ型を付けても、付けなくてもよい。
  • フロントエンドとバックエンドで同じ言語、巨大な npm エコシステム付き。

トレードオフ

  • ビルド/コンパイルのステップと、設定すべき tsconfig.json が必要。
  • 型システムは本当に複雑になりうるほど強力(ジェネリクス、条件型)で、時間を吸い取ることがある。
  • 型は実行時に消去されるため、信頼できない入力には依然として実行時バリデーション(例: Zod)が必要。
  • バンドラーやランタイムをまたいだセットアップとツールの移り変わり。

使いどころ

自明でないあらゆる JavaScript プロジェクト、特に複数の貢献者がいる場合や寿命が長い場合は TypeScript を選びましょう。モダンなウェブアプリ(React、Next.js、SvelteKit)、Node/エッジのバックエンド、リファクタリングの安全性が重要なあらゆるものでデフォルトです。

バイブコーディングとの相性

AI アシスタントは TypeScript で力を発揮します。型チェッカーがアシスタントにも——そしてあなたにも——速いフィードバックループを与えるからです。コンパイルエラーを貼り戻せば、モデルはたいていきれいに修正します。any ではなく正確な型を求め、信頼境界(API の入力、環境変数)では実行時バリデーションを要求して、AI を誘導しましょう。ランタイムとフレームワークのバージョンを明示的に伝えれば、生成された import や設定が一致します。型が込み入ってきたら、やみくもに型を広げるのではなく、推論された型を説明するようモデルに求めましょう。

type User = { id: number; name: string; email?: string };

function greet(user: User): string {
  return `Hi ${user.name}` + (user.email ? ` <${user.email}>` : "");
}

console.log(greet({ id: 1, name: "Ada" }));