【react】TypeScript在react中的使用

目录

一、环境与项目配置

1. 创建 TypeScript React 项目

2. 关键tsconfig.json配置

3.安装核心类型包

二、组件类型定义

 1. 函数组件（React 18+）

2.类组件

三、Hooks 的深度类型集成

 1. useState

 2. useEffect

 3. useRef

4. 自定义 Hook

四、事件处理

1. 表单事件

2. 鼠标/键盘事件

五、状态管理（Redux Toolkit）

1.定义类型化的 Slice

2. 类型化的useSelector和useDispatch（组件中使用）

六、路由（React Router v6）

七、类型扩展与最佳实践

1. 扩展全局类型

2. 组件默认 Props

3. 泛型组件

4.高阶组件（HOC）类型

5.Context API类型安全

八、测试与调试

1. Jest + Testing Library

2.类型安全的Mock数据

九、常见问题

1. 如何处理第三方库类型？

2.处理动态导入（Lazy Loading )

3. 类型断言的使用

3. 处理可选 Props

4、性能优化

1.使用react.memo 优化渲染

2.类型化的useCallback和useMemo

十一、学习资源

---

一、环境与项目配置

1. 创建 TypeScript React 项目

# 使用 Create React App（推荐）

npx create-react-app my-app --template typescript

# 或使用 Vite（更轻量）

npm create vite@latest my-react-app -- --template react-ts

2. 关键tsconfig.json配置

{"compilerOptions": {"target": "ESNext","lib": ["DOM", "DOM.Iterable", "ESNext"], // 浏览器环境支持"jsx": "react-jsx",                      // React 17+ 的 JSX 转换"strict": true,                          // 启用所有严格类型检查"esModuleInterop": true,                  // 兼容 CommonJS/ES6 模块"skipLibCheck": true,                     // 跳过第三方库类型检查（提升速度）"forceConsistentCasingInFileNames": true, // 强制文件名大小写一致"baseUrl": "./src",                       // 路径别名基础目录"paths": {"@components/*": ["components/*"]       // 路径别名配置}},"include": ["src/**/*"]
}

3.安装核心类型包

npm install @types/react @types/react-dom @types/node --save-dev

二、组件类型定义

 1. 函数组件（React 18+）

// Button.tsx
import React from 'react';// 定义 Props 类型
interface ButtonProps {children: React.ReactNode;onClick: () => void;variant?: 'primary' | 'secondary';//可选属性disabled?: boolean;//可选回调函数
}//使用React.FC 泛型定义组件（ React 18 后 FC 不再隐式包含 children）
const Button: React.FC<ButtonProps> = ({ children, onClick, variant = 'primary', //默认值disabled = false 
}) => {return (<button className={`btn-${variant}`}onClick={onClick}disabled={disabled}>{children}</button>);
};export default Button;

2.类组件

// Counter.tsx
import React from 'react';//State和Props类型定义
interface CounterProps {initialCount?: number;
}interface CounterState {count: number;
}class Counter extends React.Component<CounterProps, CounterState> {// 默认 Propsstatic defaultProps: Partial<CounterProps> = {initialCount: 0};// 初始化 State（需明确类型）state: CounterState = {count: this.props.initialCount!};// 箭头函数绑定 this（避免手动 bind）increment = () => {this.setState((prev) => ({ count: prev.count + 1 }));};render() {return (<div><p>Count: {this.state.count}</p><button onClick={this.increment}>Increment</button></div>);}
}

三、Hooks 的深度类型集成

 1. useState

//react
//const [count, setCount] = React.useState<number>(0); // 显式指定类型
//const [user, setUser] = React.useState<User | null>(null); // 联合类型// 基础类型推断
const [count, setCount] = useState<number>(0);// 复杂对象类型（明确初始值）
interface User {id: string;name: string;email?: string;
}const [user, setUser] = useState<User>({id: '1',name: 'Alice'
});

 2. useEffect

// 异步请求的类型安全处理
useEffect(() => {let isMounted = true; // 防止组件卸载后更新状态const fetchData = async () => {try {const response = await fetch('/api/users');const data: User[] = await response.json();if (isMounted) setUsers(data);} catch (error) {console.error('Fetch error:', error);}};fetchData();return () => {isMounted = false;};
}, []);

 3. useRef

// DOM 引用
const inputRef = useRef<HTMLInputElement>(null);
// 可变值（非 DOM）
// 引用 DOM 元素
const inputRef = useRef<HTMLInputElement>(null);// 存储可变值（非 DOM）
interface Timer {id: number;start: () => void;
}const timerRef = useRef<Timer | null>(null);

4. 自定义 Hook

// useLocalStorage.ts
import { useState, useEffect } from 'react';function useLocalStorage<T>(key: string,initialValue: T
): [T, (value: T) => void] {const [storedValue, setStoredValue] = useState<T>(() => {try {const item = window.localStorage.getItem(key);return item ? JSON.parse(item) : initialValue;} catch (error) {return initialValue;}});const setValue = (value: T) => {try {setStoredValue(value);window.localStorage.setItem(key, JSON.stringify(value));} catch (error) {console.error('LocalStorage set error:', error);}};useEffect(() => {const handleStorageChange = (e: StorageEvent) => {if (e.key === key) {setStoredValue(JSON.parse(e.newValue!));}};window.addEventListener('storage', handleStorageChange);return () => window.removeEventListener('storage', handleStorageChange);}, [key]);return [storedValue, setValue];
}// 使用
const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light');

四、事件处理

1. 表单事件

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {e.preventDefault();// 访问表单元素const input = e.currentTarget.elements.namedItem('username') as HTMLInputElement;console.log(input.value);
};

2. 鼠标/键盘事件

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {console.log(e.clientX, e.clientY);
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {if (e.key === 'Enter') {// 处理回车}
};

五、状态管理（Redux Toolkit）

1.定义类型化的 Slice

// features/counter/counterSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';interface Todo {id:string;text: string ;value: number;
}
interface TodosState {list: Todo[];status: 'idle' | 'loading' | 'succeeded' | 'failef';const initialState: TodosState = {list: [];status: 'idle'
};const counterSlice = createSlice({name: 'tods',initialState,reducers: {addTodo: (state, action: PayloadAction<{ text: string }>) => {const newTodo: Todo = {id: Date.now().toString(),text: action.payload.text,completed: false};state.list.push(newTodo);},toggleTodo: (state, action: PayloadAction<string>) => {const todo = state.list.find(t => t.id === action.payload);if (todo) todo.completed = !todo.completed;}},extraReducers: (builder) => {// 异步处理示例builder.addCase(fetchTodos.pending, (state) => {state.status = 'loading';}).addCase(fetchTodos.fulfilled, (state, action: PayloadAction<Todo[]>) => {state.status = 'succeeded';state.list = action.payload;});}
});export const {addTodo, toggleTodo} = counterSlice.actions;
export default todoSlice.reducer;

2. 类型化的useSelector和useDispatch（组件中使用）

// Counter.tsx
import { useDispatch, useSelector } from 'react-redux';
import type { RootState } from '@/app/store';
import { increment } from '@/features/counter/counterSlice';const Counter = () => {const count = useSelector((state: RootState) => state.counter.value);const dispatch = useDispatch();return (<div><span>{count}</span><button onClick={() => dispatch(increment())}>+1</button></div>);
};

六、路由（React Router v6）

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';interface RouteConfig {path: string;element: React.ReactNode;
}const routes: RouteConfig[] = [{ path: '/', element: <HomePage /> },{ path: '/about', element: <AboutPage /> }
];const App = () => (<BrowserRouter><Routes>{routes.map((route) => (<Route key={route.path} {...route} />))}</Routes></BrowserRouter>
);

七、类型扩展与最佳实践

1. 扩展全局类型

// react-app-env.d.ts
declare namespace React {interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {// 扩展自定义属性customAttr?: string;}
}

2. 组件默认 Props

interface Props {size?: 'small' | 'medium' | 'large';
}const MyComponent = ({ size = 'medium' }: Props) => {// ...
};

3. 泛型组件

interface ListProps<T> {items: T[];renderItem: (item: T) => React.ReactNode;
}
function List<T>({ items, renderItem }: ListProps<T>) {return (<div>{items.map((item, index) => (<div key={index}>{renderItem(item)}</div>))}</div>);
}// 使用
<List<{ id: string; name: string }> items={users}renderItem={(user) => <span>{user.name}</span>}
/>

4.高阶组件（HOC）类型

type WithLoadingProps = {isLoading: boolean;
};// 高阶组件：为组件添加 loading 状态
function withLoading<T extends object>(WrappedComponent: React.ComponentType<T>
) {return (props: T & WithLoadingProps) => {if (props.isLoading) return <div>Loading...</div>;return <WrappedComponent {...props} />;};
}// 使用
const UserListWithLoading = withLoading(UserList);
<UserListWithLoading isLoading={true} users={[]} />;

5.Context API类型安全

// ThemeContext.tsx
import React, { createContext, useContext } from 'react';type Theme = 'light' | 'dark';
type ThemeContextType = {theme: Theme;toggleTheme: () => void;
};const ThemeContext = createContext<ThemeContextType | undefined>(undefined);export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {const [theme, setTheme] = useState<Theme>('light');const toggleTheme = () => {setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));};return (<ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>);
};// 自定义 Hook 确保 Context 存在
export const useTheme = () => {const context = useContext(ThemeContext);if (!context) throw new Error('useTheme must be used within ThemeProvider');return context;
};

八、测试与调试

1. Jest + Testing Library

// Button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';test('handles click event', () => {const handleClick = jest.fn();render(<Button onClick={handleClick}>Click Me</Button>);fireEvent.click(screen.getByText(/click me/i));expect(handleClick).toHaveBeenCalledTimes(1);
});// 测试异步操作
test('loads user data', async () => {render(<UserProfile userId="1" />);await waitFor(() => {expect(screen.getByText('Alice')).toBeInTheDocument();});
});

2.类型安全的Mock数据

// mocks/user.ts
import { User } from '../types';export const mockUser: User = {id: '1',name: 'Alice',email: '[e-mail]'
};// 测试中使用
jest.mock('../api', () => ({fetchUser: jest.fn().mockResolvedValue(mockUser)
}));

九、常见问题

1. 如何处理第三方库类型？

npm install @types/react-router-dom @types/lodash # 安装类型声明# 安装社区维护的类型包
npm install @types/lodash @types/react-select --save-dev# 临时忽略类型检查（不推荐）
// @ts-ignore
import untypedLib from 'untyped-lib';

2.处理动态导入（Lazy Loading )

// 明确组件类型
const LazyComponent = React.lazy(() => import('./LazyComponent'));// 使用 Suspense
<Suspense fallback={<div>Loading...</div>}><LazyComponent />
</Suspense>

3. 类型断言的使用

//例a
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {const value = e.target.value as string; // 明确类型//例b 
const element = document.getElementById('root') as HTMLElement; // 安全断言
const data = response as ApiResponse; // 明确知道类型时

3. 处理可选 Props

interface AvatarProps {src: string;alt?: string; // 可选属性size?: number;
}const Avatar = ({ src, alt = '', size = 40 }: AvatarProps) => (<img src={src} alt={alt} width={size} />
);

4、性能优化

1.使用react.memo 优化渲染

interface MemoizedComponentProps {data: string[];
}const MemoizedComponent = React.memo<MemoizedComponentProps>(({ data }) => {// 复杂计算return <div>{data.join(', ')}</div>;
});

2.类型化的useCallback和useMemo

const memoizedCallback = useCallback((id: string) => {console.log('Callback called with:', id);},[] // 依赖项数组
);const memoizedValue = useMemo(() => {return computeExpensiveValue(a, b);
}, [a, b]); // 依赖项变化时重新计算

十一、学习资源

1. React TypeScript Cheatsheet

2. DefinitelyTyped（第三方库类型）

3. TypeScript 官方文档

码字不易，各位大佬点点赞呗