【react】TypeScript在react中的使用

devtools/2025/3/1 2:00:53/

目录

一、环境与项目配置

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: 'alice@example.com'
};// 测试中使用
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 官方文档

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


http://www.ppmy.cn/devtools/163497.html

相关文章

Ollama+Cherrystudio+beg-m3+Deepseek R1 32b部署本地私人知识库(2025年2月win11版)

之前综合网络各方面信息得到的配置表&#xff1a; 在信息爆炸的时代&#xff0c;数据安全和个性化需求愈发凸显。搭建本地私人知识库&#xff0c;不仅能确保数据的安全性&#xff0c;还能根据个人需求进行个性化定制&#xff0c;实现知识的高效管理和利用。随着技术的不断发展…

GDidees CMS v3.9.1本地文件泄露漏洞(CVE-2023-27179)

漏洞简介&#xff1a; GDidees CMS v3.9.1及更低版本被发现存在本地文件泄露漏洞&#xff0c;漏洞通过位于 /_admin/imgdownload.php 的 filename 参数进行利用。 漏洞环境&#xff1a; 春秋云镜中的漏洞靶标&#xff0c;CVE编号为CVE-2023-27179 漏洞复现: 进入靶场发现没…

《Somewhat Practical Fully Homomorphic Encryption》笔记 (BFV 源于这篇文章)

文章目录 一、摘要二、引言1、FHE 一般分为三个逻辑部分2、噪声的管理3. 贡献点4. 文章思路 三、基础数学知识四、基于 RLWE 的加密1. LWE 问题2. RLWE 问题3. RLWE 问题的难度和安全性 五、加密方案1. LPR.ES 加密方案2. Lemma 1 (引理 1)3. Optimisation/Assumption 1 (优化/…

Elasticsearch:使用经过训练的 ML 模型理解稀疏向量嵌入

作者&#xff1a;来自 Elastic Dai Sugimori 了解稀疏向量嵌入&#xff0c;理解它们的作用/含义&#xff0c;以及如何使用它们实现语义搜索。 Elasticsearch 提供语义搜索功能&#xff0c;允许用户使用自然语言进行查询并检索相关信息。为此&#xff0c;目标文档和查询必须首先…

【Mac电脑本地部署Deepseek-r1:详细教程与Openwebui配置指南】

文章目录 前言电脑配置&#xff1a;安装的Deepseek版本&#xff1a;使用的UI框架&#xff1a;体验效果展示&#xff1a;本地部署体验总结 部署过程Ollama部署拉取模型运行模型Openwebui部署运行Ollama服务在Openwebui中配置ollama的服务 后话 前言 deepseek最近火的一塌糊涂&a…

C#装箱拆箱机制详解

在C#中&#xff0c;装箱&#xff08;Boxing&#xff09;和拆箱&#xff08;Unboxing&#xff09; 是值类型与引用类型之间转换的核心机制。它们的实现直接影响程序的性能和类型安全。 一、装箱&#xff08;Boxing&#xff09; 定义&#xff1a; 将值类型转换为引用类型&#…

使用大语言模型(Deepseek)构建一个基于 SQL 数据的问答系统

GitHub代码仓库 架构 从高层次来看&#xff0c;这些系统的步骤如下&#xff1a; 将问题转换为SQL查询&#xff1a;模型将用户输入转换为SQL查询。 执行SQL查询&#xff1a;执行查询。 回答问题&#xff1a;模型根据查询结果响应用户输入。 样本数据 下载样本数据&#xf…

项目一 - 任务3:搭建Java集成开发环境IntelliJ IDEA

通过本次实战&#xff0c;我们成功搭建了Java集成开发环境IntelliJ IDEA&#xff0c;并完成了多个任务。首先&#xff0c;安装了IntelliJ IDEA并进行了个性化设置&#xff0c;如选择主题、调整字体和编码等。接着&#xff0c;创建了Java项目、包和类&#xff0c;编写并运行了简…