型システムは「制約」ではなく「実行時への契約」である：Props設計の深淵
多くのエンジニアが `interface` と `type` の差異について、「拡張性の違い」という表面的な教条を繰り返している間に、コンパイラは抽象構文木（AST）を構築し、型チェックのフェーズであなたの記述した型を評価している。
シニアエンジニアとして、またコンパイラの挙動を熟知する者として断言しよう。`interface` によるProps設計は、単なるコード補完のための補助ツールではない。それはランタイムのメモリレイアウトと、V8エンジンが最適化を行うための「型推論のヒント」を決定づける重要な設計行為である。
1. Interfaceによる宣言的Propsと「隠れたコスト」
ReactコンポーネントにおけるProps設計の際、なぜ `type` ではなく `interface` を推すのか。その真髄は「宣言的マージ（Declaration Merging）」にある。
// 大規模アーキテクチャでは、インターフェースの拡張性が単一責任の原則を守る
interface BaseProps {
id: string;
className?: string; // 実行時の隠れたコスト：undefinedチェックの分岐
}
interface ButtonProps extends BaseProps {
label: string;
onClick: (e: React.MouseEvent
}
この設計の肝は `className?: string` にある。オプショナルプロパティは、コンパイラにとっては `string | undefined` というユニオン型として評価される。ここでの注意点は、不必要なオプショナルプロパティの乱用は、コンパイル後のJSで `if (props.className !== undefined)` といった条件分岐（ガード）を過剰に生成させることだ。
パフォーマンスに敏感なコンポーネントにおいて、Propsの階層が深すぎることは、プロパティアクセスのたびにHidden Class（V8の最適化手法）が変化し、インラインキャッシュが効かなくなるリスクを孕んでいる。
2. 継承とDRY原則の「最適解」
継承を用いた設計は、一見クリーンだが、型計算の複雑性を増大させる。TypeScriptの型評価器（Type Checker）は、再帰的な型定義に直面すると、その評価コストが指数関数的に増大する。
以下は、メモリ使用量とコンパイル時間を最適化するための「防壁」としての設計手法だ。
/
- 高度な型制約：Discriminated Unions（判別可能なユニオン型）の活用
- 継承を避け、明示的な「状態」を定義することで、型評価の再帰を抑止する。
/
type ButtonVariant = ‘primary’ | ‘secondary’;
interface BaseButton {
variant: ButtonVariant;
}
interface PrimaryButton extends BaseButton {
variant: ‘primary’;
primaryColor: string;
}
interface SecondaryButton extends BaseButton {
variant: ‘secondary’;
secondaryColor: string;
}
type Props = PrimaryButton | SecondaryButton;
// この構造であれば、コンパイラは判別子（variant）を通じて型を瞬時に絞り込める。
// 実行時のメモリ消費も、隠れたプロパティの混在を防ぐため最小化される。
3. イベントループと型安全性の結節点
我々がPropsに定義する関数型（`onClick: () => void`）は、単なるコールバックではない。これはイベントループのキュー消費に対する「責務の委譲」である。
非同期処理やイベントハンドリングにおいて、型定義が曖昧だと、`undefined` の呼び出しによるランタイムエラーが防壁を突破する。
interface AsyncActionProps {
// 厳格な型定義により、イベントループ上のコールバック実行前に静的解析で叩き潰す
onAction: () => Promise
}
// 伝説的なアーキテクトであれば、ここでさらに「副作用の隔離」を考慮する。
// コンパイラに渡す型は、実行時に「何が起きるか」を正確に記述しなければならない。
結論：型は「実行時の振る舞い」を記述する仕様書である
TypeScriptの `interface` を使いこなすということは、単にエディタの補完を効かせることではない。
1. 静的解析の効率化: 複雑な継承よりも、判別可能なユニオン型を用い、コンパイラの評価パスを短縮する。
2. 実行時の最適化: オプショナルプロパティの数を最小化し、Hidden Classの安定性を担保する。
3. イベントループへの防壁: Propsを通じて渡される関数型において、未定義状態を型レベルで排除する。
あなたの書いたコードがコンパイルを通り、ブラウザという名の実行環境で展開されるとき、そこに残るのはあなたが定義した「制約」だけである。型とは、コードという名の生物を正しく進化させるための、最も純粋な「遺伝子」なのだ。
この極限の抽象度を理解し、実装に落とし込める者だけが、真の意味でTypeScriptを掌握していると言える。次回の開発では、ただ「動く」だけでなく、コンパイラがどう喜び、ランタイムがどう効率化されるかを意識してほしい。