TypeScript + React：从 Type 到 Reality

TypeScript 和 React 解决的是不同层次的问题。

---

三层模型

TypeScript
    ↓
约束程序可以是什么

React
    ↓
描述 UI 应该是什么

Browser
    ↓
把 Description 实现成 Reality

TypeScript 负责在程序运行之前，通过静态分析缩小错误空间。

React 负责把 UI 表达成可计算的 Description。

Browser 负责最终把 Description 变成真实的用户界面。

---

TypeScript：约束程序

TypeScript 不是给 JavaScript 补类型。

它是在动态系统中，添加一层静态约束。

// 类型约束了函数可以接受什么、返回什么
function greet(name: string): string {
  return 'Hello, ' + name.toUpperCase()
}

// 类型约束了组件可以接受什么 props
interface ButtonProps {
  variant: 'primary' | 'secondary'
  children: React.ReactNode
}

// 类型约束了系统可以处于哪些状态
type State =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: User }
  | { status: 'error'; error: Error }

TypeScript 负责"程序可以是什么"。

---

React：描述 UI

React 不是直接操作 DOM。

它描述 UI 应该是什么，Browser 负责实现。

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
    </div>
  )
}

这段代码描述了 UI 的状态和行为，但没有直接操作 DOM。React 通过 Fiber、Reconciler、Scheduler 把这个描述变成真实的 DOM 更新。

React 负责"UI 应该是什么"。

---

Browser：实现 Reality

Browser 最终把 React 的描述变成像素。

React Commit
    ↓
DOM Mutation
    ↓
Style Calculation
    ↓
Layout
    ↓
Paint
    ↓
Composite
    ↓
Pixels

Browser 负责"Reality 是什么"。

---

共同的目标

这和 React 的设计哲学一致：

• React 在运行时维护确定性（Fiber、Scheduler、Lane）
• TypeScript 在编译时维护确定性（类型检查、泛型约束、条件类型）

两者共同的目标：

在动态系统中，把尽可能多的问题提前暴露，把复杂性控制在边界之内。

---

回到起点

TypeScript 不是给变量加类型。

它是在程序运行之前，缩小错误空间。

React 不是操作 DOM。

它是描述 UI 应该是什么。

Browser 不是执行代码。

它是把描述变成 Reality。

三者各司其职，共同在动态系统中维护确定性。

---

这就是 TypeScript 与 React 的关系。

---