typescript react 如何
TypeScript 与 React 结合使用的核心方法
组件定义
使用函数组件时，通过 React.FC 泛型类型或直接标注 Props 类型：
type Props = { name: string };
const Greet: React.FC<Props> = ({ name }) => <h1>Hello {name}</h1>;
// 或
const Greet = ({ name }: Props) => <h1>Hello {name}</h1>;Hooks 类型标注
为 useState 提供泛型参数以明确状态类型：
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<{ id: string } | null>(null);事件处理
为事件处理器标注正确的 React 事件类型：
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
console.log(e.currentTarget.value);
};泛型组件
处理动态数据时使用泛型定义组件：
type ListProps<T> = { items: T[]; renderItem: (item: T) => React.ReactNode };
function List<T>({ items, renderItem }: ListProps<T>) {
return <div>{items.map(renderItem)}</div>;
}上下文 (Context)
创建类型安全的上下文：
type ThemeContextType = { darkMode: boolean; toggleTheme: () => void };
const ThemeContext = React.createContext<ThemeContextType | undefined>(undefined);第三方库集成
为无类型声明的库扩展模块定义：
declare module "untyped-library" {
export const someFunction: () => number;
}样式类型
使用 CSSProperties 标注内联样式：
const style: React.CSSProperties = { color: "red", margin: 10 };通过以上模式，可确保类型安全并提升代码可维护性。实际开发中，结合 tsconfig.json 的严格模式选项（如 strict: true）能进一步强化类型检查。
