TypeScript 与 React 集成一、TypeScript 配置1.1 创建项目npx create-react-app my-app--templatetypescript# 或npmcreate vitelatest my-app ----templatereact-ts1.2 tsconfig.json{compilerOptions:{target:ES2020,lib:[DOM,DOM.Iterable,ESNext],jsx:react-jsx,module:ESNext,moduleResolution:bundler,strict:true,noUnusedLocals:true,noUnusedParameters:true}}二、组件类型定义2.1 函数组件interface Props { name: string; age?: number; onSave: (data: { name: string; age: number }) void; } const UserCard: React.FCProps ({ name, age 0, onSave }) { return ( div p姓名: {name}/p p年龄: {age}/p button onClick{() onSave({ name, age })}保存/button /div ); };2.2 children 类型interface CardProps { title: string; children: React.ReactNode; } const Card: React.FCCardProps ({ title, children }) { return ( div classNamecard h3{title}/h3 {children} /div ); };三、Hooks 类型3.1 useStateconst [count, setCount] useStatenumber(0); const [user, setUser] useStateUser | null(null); const [items, setItems] useStatestring[]([]);3.2 useReducerinterface State { count: number; } type Action { type: increment } | { type: decrement }; const reducer (state: State, action: Action): State { switch (action.type) { case increment: return { count: state.count 1 }; case decrement: return { count: state.count - 1 }; default: return state; } }; const [state, dispatch] useReducer(reducer, { count: 0 });3.3 useRefconst inputRef useRefHTMLInputElement(null); const divRef useRefHTMLDivElement(null); // 访问 inputRef.current?.focus();四、事件类型const handleClick (e: React.MouseEventHTMLButtonElement) { console.log(点击, e.currentTarget); }; const handleChange (e: React.ChangeEventHTMLInputElement) { console.log(e.target.value); }; const handleSubmit (e: React.FormEventHTMLFormElement) { e.preventDefault(); }; const handleKeyDown (e: React.KeyboardEventHTMLInputElement) { if (e.key Enter) { console.log(回车); } };五、自定义 Hook 类型function useLocalStorageT(key: string, initialValue: T): [T, (value: T | ((prev: T) T)) void] { const [storedValue, setStoredValue] useStateT(() { try { const item localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch { return initialValue; } }); const setValue (value: T | ((prev: T) T)) { try { const valueToStore value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); localStorage.setItem(key, JSON.stringify(valueToStore)); } catch (error) { console.error(error); } }; return [storedValue, setValue]; }