22. 与 React 集成

22. 与 React 集成1. 概述TypeScript 与 React 的集成是现代前端开发的标准实践。TypeScript 为 React 组件提供了类型安全帮助在编译时发现错误提升开发体验和代码质量。┌─────────────────────────────────────────────────────────────┐ │ TypeScript React 集成 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 组件类型 │ │ ├── React.FC函数组件类型 │ │ ├── React.Component类组件类型 │ │ └── PropsWithChildren带 children 的 Props │ │ │ │ Hooks 类型 │ │ ├── useState状态类型 │ │ ├── useEffect副作用类型 │ │ ├── useRef引用类型 │ │ ├── useContext上下文类型 │ │ └── useReducerreducer 类型 │ │ │ │ 高级模式 │ │ ├── 泛型组件可复用的类型安全组件 │ │ ├── 高阶组件HOC 类型定义 │ │ ├── Render Props渲染属性类型 │ │ └── 自定义 HookHook 类型定义 │ │ │ └─────────────────────────────────────────────────────────────┘2. 项目初始化2.1 创建 TypeScript React 项目# 使用 Vite推荐npmcreate vitelatest my-app ----templatereact-ts# 使用 Create React App已不推荐npx create-react-app my-app--templatetypescript# 使用 Next.jsnpx create-next-applatest my-app--typescript2.2 tsconfig.json 配置{compilerOptions:{target:ES2020,lib:[ES2020,DOM,DOM.Iterable],jsx:react-jsx,module:ESNext,moduleResolution:bundler,strict:true,esModuleInterop:true,skipLibCheck:true,forceConsistentCasingInFileNames:true,resolveJsonModule:true,isolatedModules:true,noEmit:true},include:[src],references:[{path:./tsconfig.node.json}]}3. 组件类型定义3.1 函数组件// 基础函数组件 interface ButtonProps { label: string; onClick: () void; disabled?: boolean; variant?: primary | secondary | danger; } // 方式1使用 React.FC自动包含 children const Button1: React.FCButtonProps ({ label, onClick, disabled, variant primary }) { return ( button onClick{onClick} disabled{disabled} className{btn btn-${variant}} {label} /button ); }; // 方式2直接注解参数推荐 const Button2 ({ label, onClick, disabled, variant primary }: ButtonProps) { return ( button onClick{onClick} disabled{disabled} className{btn btn-${variant}} {label} /button ); }; // 方式3使用 PropsWithChildren需要 children 时 interface CardProps extends React.PropsWithChildren { title: string; className?: string; } const Card ({ title, children, className }: CardProps) { return ( div className{card ${className || }} h3{title}/h3 div classNamecard-content{children}/div /div ); };3.2 类组件interface CounterProps { initialCount?: number; } interface CounterState { count: number; } class Counter extends React.ComponentCounterProps, CounterState { state: CounterState { count: this.props.initialCount || 0 }; increment () { this.setState(prev ({ count: prev.count 1 })); }; decrement () { this.setState(prev ({ count: prev.count - 1 })); }; render() { return ( div pCount: {this.state.count}/p button onClick{this.increment}/button button onClick{this.decrement}-/button /div ); } }4. Hooks 类型4.1 useState// 基础用法类型推断 const [count, setCount] useState(0); // count 类型为 number // 显式指定类型 const [user, setUser] useStateUser | null(null); const [status, setStatus] useStateidle | loading | success | error(idle); // 复杂状态类型 interface FormState { username: string; email: string; age: number; } const [form, setForm] useStateFormState({ username: , email: , age: 0 }); // 惰性初始化 const [data, setData] useStateData[](() { const stored localStorage.getItem(data); return stored ? JSON.parse(stored) : []; });4.2 useEffect// useEffect 不需要泛型 useEffect(() { console.log(Component mounted); return () { console.log(Component unmounted); }; }, []); // 依赖项类型自动推断 const [userId, setUserId] useStatenumber(1); useEffect(() { fetchUser(userId).then(setUser); }, [userId]); // userId 类型为 number4.3 useRef// DOM 元素引用 const inputRef useRefHTMLInputElement(null); useEffect(() { inputRef.current?.focus(); }, []); return input ref{inputRef} typetext /; // 可变值引用 const intervalRef useRefNodeJS.Timeout | null(null); const countRef useRef(0); // forwardRef 类型 interface FancyInputProps { placeholder?: string; } const FancyInput React.forwardRefHTMLInputElement, FancyInputProps( (props, ref) input ref{ref} classNamefancy {...props} / ); // 使用 const ref useRefHTMLInputElement(null); FancyInput ref{ref} placeholderEnter text /4.4 useContext// 定义上下文类型 interface ThemeContextType { theme: light | dark; toggleTheme: () void; } // 创建上下文 const ThemeContext React.createContextThemeContextType | undefined(undefined); // Provider 组件 export const ThemeProvider: React.FC{ children: React.ReactNode } ({ children }) { const [theme, setTheme] useStatelight | dark(light); const toggleTheme () { setTheme(prev prev light ? dark : light); }; return ( ThemeContext.Provider value{{ theme, toggleTheme }} {children} /ThemeContext.Provider ); }; // 自定义 Hook 使用上下文 export const useTheme () { const context useContext(ThemeContext); if (!context) { throw new Error(useTheme must be used within ThemeProvider); } return context; }; // 使用 const ThemedButton () { const { theme, toggleTheme } useTheme(); return ( button onClick{toggleTheme} Current theme: {theme} /button ); };4.5 useReducer// 定义 State 类型 interface CounterState { count: number; step: number; } // 定义 Action 类型 type CounterAction | { type: increment } | { type: decrement } | { type: setStep; payload: number } | { type: reset }; // 定义 reducer const counterReducer (state: CounterState, action: CounterAction): CounterState { switch (action.type) { case increment: return { ...state, count: state.count state.step }; case decrement: return { ...state, count: state.count - state.step }; case setStep: return { ...state, step: action.payload }; case reset: return { count: 0, step: 1 }; default: return state; } }; // 使用 useReducer const CounterComponent () { const [state, dispatch] useReducer(counterReducer, { count: 0, step: 1 }); return ( div pCount: {state.count}/p pStep: {state.step}/p button onClick{() dispatch({ type: increment })}/button button onClick{() dispatch({ type: decrement })}-/button input typenumber value{state.step} onChange{(e) dispatch({ type: setStep, payload: Number(e.target.value) })} / button onClick{() dispatch({ type: reset })}Reset/button /div ); };5. 事件类型import { ChangeEvent, MouseEvent, FormEvent, KeyboardEvent } from react; interface FormProps { onSubmit: (data: FormData) void; } const EventExample: React.FCFormProps ({ onSubmit }) { // 表单提交事件 const handleSubmit (e: FormEventHTMLFormElement) { e.preventDefault(); const formData new FormData(e.currentTarget); onSubmit(formData); }; // 输入变化事件 const handleChange (e: ChangeEventHTMLInputElement | HTMLTextAreaElement) { console.log(e.target.value); }; // 鼠标事件 const handleClick (e: MouseEventHTMLButtonElement) { console.log(Clicked at (${e.clientX}, ${e.clientY})); }; // 键盘事件 const handleKeyDown (e: KeyboardEventHTMLInputElement) { if (e.key Enter) { console.log(Enter pressed); } if (e.key Escape) { console.log(Escape pressed); } }; return ( form onSubmit{handleSubmit} input typetext nameusername onChange{handleChange} onKeyDown{handleKeyDown} / textarea namebio onChange{handleChange} / button typesubmit onClick{handleClick} Submit /button /form ); };6. 泛型组件// 泛型列表组件 interface ListPropsT { items: T[]; renderItem: (item: T, index: number) React.ReactNode; keyExtractor?: (item: T) string | number; className?: string; } function ListT({ items, renderItem, keyExtractor, className }: ListPropsT) { return ( ul className{className} {items.map((item, index) ( li key{keyExtractor ? keyExtractor(item) : index} {renderItem(item, index)} /li ))} /ul ); } // 使用示例 interface User { id: number; name: string; email: string; } const users: User[] [ { id: 1, name: Alice, email: aliceexample.com }, { id: 2, name: Bob, email: bobexample.com } ]; const UserList () ( ListUser items{users} keyExtractor{(user) user.id} renderItem{(user) ( div span{user.name}/span span{user.email}/span /div )} classNameuser-list / ); // 泛型表格组件 interface ColumnT { key: keyof T; header: string; render?: (value: T[keyof T], item: T) React.ReactNode; } interface TablePropsT { data: T[]; columns: ColumnT[]; onRowClick?: (item: T) void; } function TableT({ data, columns, onRowClick }: TablePropsT) { return ( table thead tr {columns.map(col ( th key{String(col.key)}{col.header}/th ))} /tr /thead tbody {data.map((item, index) ( tr key{index} onClick{() onRowClick?.(item)} {columns.map(col ( td key{String(col.key)} {col.render ? col.render(item[col.key], item) : String(item[col.key])} /td ))} /tr ))} /tbody /table ); }7. 高阶组件HOC// 定义 HOC Props interface WithLoadingProps { isLoading: boolean; } // HOC 类型定义 function withLoadingP extends WithLoadingProps( WrappedComponent: React.ComponentTypeP ) { return function WithLoadingComponent( props: OmitP, keyof WithLoadingProps ) { const [isLoading, setIsLoading] useState(false); if (isLoading) { return divLoading.../div; } return WrappedComponent {...(props as P)} isLoading{isLoading} /; }; } // 使用 HOC interface DataComponentProps extends WithLoadingProps { data: string[]; } const DataComponent: React.FCDataComponentProps ({ data, isLoading }) ( div {isLoading ? Loading... : data.join(, )} /div ); const EnhancedDataComponent withLoading(DataComponent); // 带额外参数的 HOC interface WithAuthProps { user: User | null; isAuthenticated: boolean; } function withAuthP extends WithAuthProps( WrappedComponent: React.ComponentTypeP ) { return function WithAuthComponent(props: OmitP, keyof WithAuthProps) { const [user, setUser] useStateUser | null(null); const isAuthenticated !!user; return ( WrappedComponent {...(props as P)} user{user} isAuthenticated{isAuthenticated} / ); }; }8. 自定义 Hook 类型// 数据获取 Hook interface UseFetchResultT { data: T | null; loading: boolean; error: Error | null; refetch: () void; } function useFetchT(url: string): UseFetchResultT { const [data, setData] useStateT | null(null); const [loading, setLoading] useState(true); const [error, setError] useStateError | null(null); const fetchData useCallback(async () { setLoading(true); setError(null); try { const response await fetch(url); if (!response.ok) throw new Error(Fetch failed); const json await response.json(); setData(json); } catch (err) { setError(err instanceof Error ? err : new Error(Unknown error)); } finally { setLoading(false); } }, [url]); useEffect(() { fetchData(); }, [fetchData]); return { data, loading, error, refetch: fetchData }; } // 使用 interface User { id: number; name: string; } const UserProfile ({ userId }: { userId: number }) { const { data: user, loading, error } useFetchUser(/api/users/${userId}); if (loading) return divLoading.../div; if (error) return divError: {error.message}/div; return div{user?.name}/div; }; // 防抖 Hook function useDebounceT(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] useStateT(value); useEffect(() { const timer setTimeout(() { setDebouncedValue(value); }, delay); return () clearTimeout(timer); }, [value, delay]); return debouncedValue; } // 本地存储 Hook function useLocalStorageT(key: string, initialValue: T): [T, (value: T) void] { const [storedValue, setStoredValue] useStateT(() { try { const item window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch { return initialValue; } }); const setValue (value: T) { try { setStoredValue(value); window.localStorage.setItem(key, JSON.stringify(value)); } catch (error) { console.error(error); } }; return [storedValue, setValue]; }9. 完整示例Todo 应用import React, { useState, useRef, FormEvent, ChangeEvent } from react; // 类型定义 interface Todo { id: number; text: string; completed: boolean; createdAt: Date; } type FilterType all | active | completed; // 自定义 Hook function useLocalStorageT(key: string, initialValue: T): [T, (value: T) void] { const [storedValue, setStoredValue] useStateT(() { try { const item window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch { return initialValue; } }); const setValue (value: T) { try { setStoredValue(value); window.localStorage.setItem(key, JSON.stringify(value)); } catch (error) { console.error(error); } }; return [storedValue, setValue]; } // 组件定义 interface TodoInputProps { onAdd: (text: string) void; } const TodoInput: React.FCTodoInputProps ({ onAdd }) { const [text, setText] useState(); const inputRef useRefHTMLInputElement(null); const handleSubmit (e: FormEvent) { e.preventDefault(); if (text.trim()) { onAdd(text.trim()); setText(); inputRef.current?.focus(); } }; const handleChange (e: ChangeEventHTMLInputElement) { setText(e.target.value); }; return ( form onSubmit{handleSubmit} input ref{inputRef} typetext value{text} onChange{handleChange} placeholderAdd a new todo... / button typesubmitAdd/button /form ); }; interface TodoItemProps { todo: Todo; onToggle: (id: number) void; onDelete: (id: number) void; } const TodoItem: React.FCTodoItemProps ({ todo, onToggle, onDelete }) { const [isEditing, setIsEditing] useState(false); const [editText, setEditText] useState(todo.text); const handleSave () { if (editText.trim() editText ! todo.text) { // 保存逻辑 } setIsEditing(false); }; if (isEditing) { return ( li input typetext value{editText} onChange{(e) setEditText(e.target.value)} onBlur{handleSave} onKeyDown{(e) e.key Enter handleSave()} autoFocus / /li ); } return ( li input typecheckbox checked{todo.completed} onChange{() onToggle(todo.id)} / span onDoubleClick{() setIsEditing(true)}{todo.text}/span button onClick{() onDelete(todo.id)}Delete/button /li ); }; interface TodoFilterProps { filter: FilterType; onFilterChange: (filter: FilterType) void; } const TodoFilter: React.FCTodoFilterProps ({ filter, onFilterChange }) { const filters: { value: FilterType; label: string }[] [ { value: all, label: All }, { value: active, label: Active }, { value: completed, label: Completed } ]; return ( div {filters.map(f ( button key{f.value} className{filter f.value ? active : } onClick{() onFilterChange(f.value)} {f.label} /button ))} /div ); }; // 主组件 const TodoApp: React.FC () { const [todos, setTodos] useLocalStorageTodo[](todos, []); const [filter, setFilter] useStateFilterType(all); const addTodo (text: string) { const newTodo: Todo { id: Date.now(), text, completed: false, createdAt: new Date() }; setTodos([...todos, newTodo]); }; const toggleTodo (id: number) { setTodos(todos.map(todo todo.id id ? { ...todo, completed: !todo.completed } : todo )); }; const deleteTodo (id: number) { setTodos(todos.filter(todo todo.id ! id)); }; const filteredTodos todos.filter(todo { if (filter active) return !todo.completed; if (filter completed) return todo.completed; return true; }); return ( div h1Todo App/h1 TodoInput onAdd{addTodo} / TodoFilter filter{filter} onFilterChange{setFilter} / ul {filteredTodos.map(todo ( TodoItem key{todo.id} todo{todo} onToggle{toggleTodo} onDelete{deleteTodo} / ))} /ul div {todos.filter(t !t.completed).length} items left /div /div ); }; export default TodoApp;10. 总结类型用途示例React.FCP函数组件类型const C: React.FCProps ...React.ComponentP, S类组件类型class C extends ComponentProps, StateReact.PropsWithChildren带 children 的 Propsinterface P extends PropsWithChildrenuseStateT状态类型const [state, setState] useStateT(init)useRefT引用类型const ref useRefHTMLElement(null)useContextT上下文类型const ctx useContextT(Context)forwardRefT, P转发 refforwardRefHTMLInputElement, Props事件类型事件处理器ChangeEventHTMLInputElement