为什么 React 的 TypeScript 体验如此自然

TS7 发布后，React 生态立刻就能用。但 Vue、Angular 等生态还需要等待。

为什么？

---

JSX/TSX 是 TypeScript 的原生语法扩展

// 这就是标准 TypeScript，不需要额外工具
function App() {
  const [count, setCount] = useState(0)
  return <div>{count}</div>
}

TypeScript 编译器直接理解 JSX 的类型：

• @types/react 定义了 JSX 的类型声明
• 泛型、条件类型在 JSX 中直接可用
• 不需要额外的解析器

---

React 的组合模型天然适合 TypeScript

React 的核心模型是：

Component
    ↓
接受 Props
    ↓
返回 JSX
    ↓
组合其他 Component

TypeScript 的能力天然适合描述这个模型：

Structural Typing：Props 只需要结构匹配，不需要名义身份

interface ButtonProps {
  variant: 'primary' | 'secondary'
  children: React.ReactNode
}

// 只要传入的对象有 variant 和 children，就匹配
<Button variant="primary">Click</Button>

Generics：让组件适应任意类型

function Select<T extends string>({ options, value, onChange }: SelectProps<T>) {
  // T 由调用者决定，类型从输入贯穿到输出
}

Union Types：描述互斥状态

type ModalProps = { open: true; onClose: () => void } | { open: false }

Conditional Types：根据输入决定输出类型

type PropsOf<C> = C extends React.ComponentType<infer P> ? P : never

---

核心洞察

React 的组合式组件 + Props + Children 模型，和 TypeScript 的 Structural Typing + Generics + Unions 是天然契合的。

Component
    ↓
Props（结构化类型）
    ↓
Composition（结构匹配）

这不是巧合。React 用 JavaScript 对象描述 UI，TypeScript 用类型描述 JavaScript 对象的结构。两者在"描述"这个层面上是统一的。

---