第8章: 競合技術との比較 — なぜTypeScriptが「勝利」したのか

JavaScriptの型付けランドスケープ

TypeScriptは「JavaScriptに型を付ける」唯一の方法ではありません。 少なくとも6つの競合・類似アプローチが存在し、それぞれ異なる設計思想を持ちます。 なぜTypeScriptだけが圧倒的な勝利を収めたのか — その理由を比較から読み解きます。

型システムの比較

quadrantChart
  title 型の健全性 vs JavaScript互換性
  x-axis JS互換性 低 --> JS互換性 高
  y-axis 健全性 低 --> 健全性 高
  quadrant-1 理想的だが到達困難
  quadrant-2 健全だがJS離れ
  quadrant-3 弱い型のJS世界
  quadrant-4 TypeScriptの領域
  TypeScript: [0.85, 0.35]
  Flow: [0.75, 0.55]
  ReScript: [0.4, 0.9]
  Elm: [0.15, 0.95]
  PureScript: [0.2, 0.95]
  JSDoc: [0.95, 0.15]
  Dart: [0.1, 0.6]

TypeScript vs Flow — 最大のライバル

Flowは2014年にFacebook（現Meta）が発表したJavaScriptの型チェッカーで、 TypeScriptの最も直接的な競合でした。しかし2026年時点では事実上敗北しています。

TypeScript vs 健全な型システムの言語

Elm — ランタイムエラーゼロの世界

Elmは「ランタイムエラーが一切発生しない」ことを保証する唯一の実用的な選択肢です。 Hindley-Milner型推論により、すべてのコードが型安全であることがコンパイル時に証明されます。

ReScript — 健全性とJS出力の両立

ReScriptはOCamlベースの健全な型システムを持ちつつ、JavaScriptへのコンパイルとReact開発に特化しています。 コンパイル速度もTypeScriptより「著しく高速」とされますが、 JavaScriptエコシステムとの統合で摩擦があり、採用は限定的です。

TypeScript vs JSDoc — ビルドステップ不要の型安全

興味深い対抗馬がJSDoc型アノテーションです。 コメントベースの型注釈であり、ビルドステップが不要という利点があります。 特筆すべきは、Svelte/SvelteKitがTypeScriptからJSDocに移行した事例です。

// JSDoc型アノテーション — コンパイル不要
/**
 * @param {string} name
 * @param {number} age
 * @returns {string}
 */
function greet(name, age) {
  return `Hello, ${name}! You are ${age} years old.`;
}

// TypeScript — コンパイルが必要
function greet(name: string, age: number): string {
  return `Hello, ${name}! You are ${age} years old.`;
}

ただし、JSDocの型表現力はTypeScriptに大きく劣ります。 ジェネリクスやConditional Typesなどの高度な型操作はJSDocでは事実上不可能です。 また、Node.js 24+のネイティブTS実行により、TypeScriptのビルドステップ問題は解消されつつあります。

なぜTypeScriptが「勝利」したのか

graph TD
  A[TypeScriptの勝利要因] --> B[JS 100%互換\nゼロコスト導入]
  A --> C[Google採用\nAngular 2]
  A --> D[VS Code効果\nTS自体で構築]
  A --> E[DefinitelyTyped\nコミュニティの力]
  A --> F[漸進的厳格化\nany→strict]
  A --> G[エコシステム統合\nnpm/Babel/ESLint]

  style A fill:#3b82f6,stroke:#2563eb,color:#fff
  style B fill:#22c55e,stroke:#16a34a,color:#fff
  style C fill:#22c55e,stroke:#16a34a,color:#fff
  style D fill:#22c55e,stroke:#16a34a,color:#fff
  style E fill:#22c55e,stroke:#16a34a,color:#fff
  style F fill:#22c55e,stroke:#16a34a,color:#fff
  style G fill:#22c55e,stroke:#16a34a,color:#fff