React 与 TypeScript

TypeScript (TS) 是 React 项目开发的标准配置。它为组件提供了强大的静态类型检查，显著减少了运行时的错误。

---

1. 定义 Props 类型

在 React 中使用 TS，最常见的场景就是为组件定义 Props 类型。

interface MessageProps {
  text: string;
  important?: boolean; // 可选属性
}

function MessageBox({ text, important = false }: MessageProps) {
  return (
    <div style={{ color: important ? 'red' : 'black' }}>
      {text}
    </div>
  );
}

---

2. useState 类型推断

TS 通常能自动推断出 useState 的类型，但对于初始值为 null 或复杂对象的场景，需要显式指定。

// 自动推断为 number
const [count, setCount] = useState(0);

// 显式指定泛型
const [user, setUser] = useState<User | null>(null);

interface User {
  id: number;
  name: string;
}

---

3. 事件对象的类型

在处理表单或点击事件时，需要指定事件对象的准确类型。

function SearchInput() {
  const [query, setQuery] = useState("");

  // 指定元素类型为 HTMLInputElement
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(event.target.value);
  };

  return (
    <input type="text" value={query} onChange={handleChange} />
  );
}

---

4. useRef 与 DOM 类型

当你使用 useRef 来引用 DOM 元素时，需要指定该元素的 TS 类型。

function AutoFocusInput() {
  // 显式指定 HTMLInputElement 类型
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // 首次渲染后自动聚焦
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

---

5. 实时交互演示 (JSX 实现)

由于在线实时渲染器（Live Editor）主要支持运行 JS/JSX 代码，这里提供一个 JSX 版本的交互式组件，帮助你复习组件逻辑。

实时编辑器

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

  return (
    <div style={{ textAlign: 'center' }}>
      <p>当前数值: <strong>{count}</strong></p>
      <button onClick={() => setCount(c => c + 1)}>增加</button>
      <button onClick={() => setCount(c => c - 1)}>减少</button>
    </div>
  );
}

结果

Loading...

---

小结

1. 接口 (Interface)：用于定义 Props 的形状。
2. 泛型 (Generics)：用于 useState<T>, useRef<T> 等钩子，指定精确类型。
3. React.XXEvent：提供完善的事件对象类型定义。
4. 编译期捕获：TS 最大的优势是在代码还没运行前就发现潜在漏洞。