如何用typescript写react
使用 TypeScript 编写 React 的基本方法
初始化项目
通过 create-react-app 或 Vite 初始化一个 TypeScript 模板的 React 项目：
npx create-react-app my-app --template typescript
# 或使用 Vite
npm create vite@latest my-app -- --template react-ts定义组件 Props 和 State
使用 interface 或 type 明确组件的 props 和 state 类型：
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean; // 可选属性
}
const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {
return <button onClick={onClick} disabled={disabled}>{label}</button>;
};处理 State 和 Hooks
为 useState 指定类型以避免隐式的 any：
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<{ name: string; age: number } | null>(null);事件处理
明确事件参数类型，如 React.ChangeEvent 或 React.MouseEvent：
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log(e.target.value);
};进阶实践
泛型组件
通过泛型增强组件灵活性：
interface ListProps<T> {
items: T[];
renderItem: (item: T) => React.ReactNode;
}
function List<T>({ items, renderItem }: ListProps<T>) {
return <div>{items.map(renderItem)}</div>;
}Context 类型化
为 createContext 提供默认值和类型：
interface ThemeContextType {
darkMode: boolean;
toggleDarkMode: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
darkMode: false,
toggleDarkMode: () => {},
});第三方库类型支持
安装对应的类型声明文件（如 @types/react-router-dom），或在 tsconfig.json 中启用 "skipLibCheck": true 以兼容无类型的库。
常见问题解决
类型断言
在明确类型时使用 as 或 <Type> 语法：
const inputRef = useRef<HTMLInputElement>(null);
// 访问时断言非空
console.log(inputRef.current!.value);处理动态 Props
使用 Record<string, unknown> 或索引签名：
interface DynamicProps {
[key: string]: string | number;
}通过以上方法，可以逐步构建类型安全的 React 应用，减少运行时错误并提升代码可维护性。
