自已建网站,用jsp做的可运行的网站,做二手网站赚钱不,网站开发团队分工目录
一、环境与项目配置
1. 创建 TypeScript React 项目
2. 关键tsconfig.json配置
3.安装核心类型包
二、组件类型定义 1. 函数组件#xff08;React 18#xff09;
2.类组件
三、Hooks 的深度类型集成 1. useState 2. useEffect 3. useRef
4. 自定义 Hook
四、事…目录
一、环境与项目配置
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 vitelatest 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.FCButtonProps ({ 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.ComponentCounterProps, CounterState {// 默认 Propsstatic defaultProps: PartialCounterProps {initialCount: 0};// 初始化 State需明确类型state: CounterState {count: this.props.initialCount!};// 箭头函数绑定 this避免手动 bindincrement () {this.setState((prev) ({ count: prev.count 1 }));};render() {return (divpCount: {this.state.count}/pbutton onClick{this.increment}Increment/button/div);}
}三、Hooks 的深度类型集成 1. useState
//react
//const [count, setCount] React.useStatenumber(0); // 显式指定类型
//const [user, setUser] React.useStateUser | null(null); // 联合类型// 基础类型推断
const [count, setCount] useStatenumber(0);// 复杂对象类型明确初始值
interface User {id: string;name: string;email?: string;
}const [user, setUser] useStateUser({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 useRefHTMLInputElement(null);
// 可变值非 DOM
// 引用 DOM 元素
const inputRef useRefHTMLInputElement(null);// 存储可变值非 DOM
interface Timer {id: number;start: () void;
}const timerRef useRefTimer | null(null);
4. 自定义 Hook
// useLocalStorage.ts
import { useState, useEffect } from react;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 (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] useLocalStoragelight | dark(theme, light);
四、事件处理
1. 表单事件
const handleSubmit (e: React.FormEventHTMLFormElement) {e.preventDefault();// 访问表单元素const input e.currentTarget.elements.namedItem(username) as HTMLInputElement;console.log(input.value);
};2. 鼠标/键盘事件
const handleClick (e: React.MouseEventHTMLButtonElement) {console.log(e.clientX, e.clientY);
};
const handleKeyDown (e: React.KeyboardEventHTMLInputElement) {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: PayloadActionstring) {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: PayloadActionTodo[]) {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 (divspan{count}/spanbutton 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 () (BrowserRouterRoutes{routes.map((route) (Route key{route.path} {...route} /))}/Routes/BrowserRouter
);
七、类型扩展与最佳实践 1. 扩展全局类型
// react-app-env.d.ts
declare namespace React {interface HTMLAttributesT extends AriaAttributes, DOMAttributesT {// 扩展自定义属性customAttr?: string;}
}
2. 组件默认 Props
interface Props {size?: small | medium | large;
}const MyComponent ({ size medium }: Props) {// ...
};
3. 泛型组件
interface ListPropsT {items: T[];renderItem: (item: T) React.ReactNode;
}
function ListT({ items, renderItem }: ListPropsT) {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 withLoadingT extends object(WrappedComponent: React.ComponentTypeT
) {return (props: T WithLoadingProps) {if (props.isLoading) return divLoading.../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 createContextThemeContextType | undefined(undefined);export const ThemeProvider: React.FC{ children: React.ReactNode } ({ children }) {const [theme, setTheme] useStateTheme(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 userId1 /);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: aliceexample.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{divLoading.../div}LazyComponent /
/Suspense
3. 类型断言的使用
//例a
const handleInputChange (e: React.ChangeEventHTMLInputElement) {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.memoMemoizedComponentProps(({ 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]); // 依赖项变化时重新计算
十一、学习资源 React TypeScript Cheatsheet DefinitelyTyped第三方库类型 TypeScript 官方文档 码字不易各位大佬点点赞呗
