typescript react 如何
在 TypeScript 中使用 React 可以显著提升代码的可维护性和类型安全性。以下是关键方法和注意事项：
初始化项目
使用 create-react-app 快速创建 TypeScript 项目：
npx create-react-app my-app --template typescript或手动配置现有项目，需安装依赖：
npm install --save typescript @types/react @types/react-dom组件定义
函数组件使用 React.FC 类型或直接标注 Props：
interface Props {
name: string;
age?: number;
}
const MyComponent: React.FC<Props> = ({ name, age = 18 }) => {
return <div>{name} is {age} years old</div>;
};状态管理
使用泛型定义 useState 类型：
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<{name: string} | null>(null);事件处理
明确事件类型避免运行时错误：
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
console.log(e.currentTarget.value);
};高阶组件
类型化 HOC 需正确处理 Props：
function withAuth<P extends object>(Component: React.ComponentType<P>) {
return (props: P) => {
const isAuth = useAuth();
return isAuth ? <Component {...props} /> : <LoginPage />;
};
}Context API
创建类型安全的 Context：
interface ThemeContextType {
dark: boolean;
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) throw new Error('useTheme must be used within a ThemeProvider');
return context;
};泛型组件
处理动态数据类型：
interface ListProps<T> {
items: T[];
renderItem: (item: T) => React.ReactNode;
}
function List<T>({ items, renderItem }: ListProps<T>) {
return <ul>{items.map(renderItem)}</ul>;
}类型扩展
覆盖第三方库类型声明：
declare module 'react-library' {
interface Config {
customProp?: boolean;
}
}最佳实践
始终为公共组件提供完整类型定义，避免使用 any 类型。定期运行 tsc --noEmit 进行类型检查，结合 ESLint 的 @typescript-eslint 规则保证代码质量。对于复杂类型，使用工具类型如 Partial、Pick 或自定义条件类型简化代码。
