目录一、类型声明文件.d.ts二、使用已有的类型声明文件1. 内置类型声明2. 第三方库类型声明三、创建自己的类型声明文件1. 项目内共享类型2. 为已有 JS 文件提供类型声明3. 使用 declare 声明全局变量四、在 React 中使用 TypeScript1. 创建支持 TypeScript 的 React 项目2. 函数组件Function Component3. 事件处理4. Class 组件5. React Hooks 类型6. 自定义 Hooks 类型7. 高阶组件HOC类型五、TypeScript 配置文件 tsconfig.json 常用配置本文介绍了TypeScript中的类型声明文件(.d.ts)及其应用场景包括为JavaScript库提供类型支持、使用内置和第三方类型声明。重点讲解了在React项目中使用TypeScript的方法包括函数组件、事件处理、Class组件和React Hooks的类型定义以及自定义Hooks和高阶组件的类型处理。最后介绍了TypeScript配置文件tsconfig.json的常用配置选项。通过类型声明文件开发者可以在项目中获得更好的类型提示和检查提高代码质量和开发效率。一、类型声明文件.d.tsTypeScript 有两种文件类型.ts包含类型和实现编译后生成.js.d.ts仅包含类型声明不会生成 JS用于提供类型信息作用为已有 JavaScript 库提供类型支持让 TypeScript 项目能够使用这些库并获得类型提示。二、使用已有的类型声明文件1. 内置类型声明TypeScript 自带了 DOM、BOM、ES 内置 API 的类型声明如lib.es5.d.ts、lib.dom.d.ts。2. 第三方库类型声明自带类型有些库如 axios在 npm 包中包含了.d.ts文件。DefinitelyTyped对于没有自带类型的库可以安装types/库名获取类型。npm install types/react types/react-dom三、创建自己的类型声明文件1. 项目内共享类型创建types.d.tsexport interface User { id: number; name: string; }在.ts文件中导入import { User } from ./types;2. 为已有 JS 文件提供类型声明假设有一个utils.jsexport function add(a, b) { return a b; }创建utils.d.tsexport declare function add(a: number, b: number): number;3. 使用declare声明全局变量// global.d.ts declare const MY_GLOBAL: string;四、在 React 中使用 TypeScript前提说明现在基于 class 组件来讲解 ReactTS 的使用最新的 React Hooks在后面讲解。在不使用 TS 时可以使用 prop-types 库为 React 组件提供类型检查https://legacy.reactjs.org/docs/typechecking-with-proptypes.html。说明TS 项目中推荐使用 TypeScript 实现组件类型校验代替 PropTypes。不管是 React 还是 Vue只要是支持 TS 的库都提供了很多类型来满足该库对类型的需求。注意1. React 项目是通过 types/react、types/react-dom 类型声明包来提供类型的。2. 这些包 CRA 已帮我们安装好react-app-env.d.ts直接用即可。参考资料https://legacy.reactjs.org/docs/static-type-checking.html、https://github.com/typescript-cheatsheets/react。1. 创建支持 TypeScript 的 React 项目-- 创建react支持Typescript npm create vitelatest my-app -- --template react-ts -- 创建react默认使用并支持JavaScript # 使用 npm npm create vitelatest my-react-app -- --template react # 或使用 yarn yarn create vite my-react-app --template react # 或使用 pnpm pnpm create vite my-react-app --template react主要变化tsconfig.jsonTS 编译配置*.tsx包含 JSX 的组件文件react-app-env.d.ts默认类型声明文件2. 函数组件Function Componenttype Props { name: string; age?: number; }; const Hello: React.FCProps ({ name, age 18 }) { return div你好{name}你 {age} 岁/div; }; // 或者更简洁的写法 const Hello ({ name, age 18 }: Props) { return div你好{name}你 {age} 岁/div; };3. 事件处理// 按钮点击 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(); };4. Class 组件type Props { name: string }; type State { count: number }; class Counter extends React.ComponentProps, State { state: State { count: 0 }; increment () { this.setState({ count: this.state.count 1 }); }; render() { return ( div {this.props.name}: {this.state.count} button onClick{this.increment}1/button /div ); } }5. React Hooks 类型useStateconst [count, setCount] useStatenumber(0); // 或者依靠类型推断 const [count, setCount] useState(0); // count 类型为 numberuseReducertype 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 });useRef// 用于 DOM 元素 const inputRef useRefHTMLInputElement(null); useEffect(() { inputRef.current?.focus(); }, []); // 用于存储可变值 const intervalRef useRefnumber | null(null);useContexttype Theme light | dark; const ThemeContext createContextTheme(light); const Child () { const theme useContext(ThemeContext); return divCurrent theme: {theme}/div; };useMemo / useCallbackconst expensiveValue useMemo(() computeExpensiveValue(a, b), [a, b]); const handleClick useCallback(() { console.log(clicked); }, []);6. 自定义 Hooks 类型function useLocalStorageT(key: string, initialValue: T): [T, (value: T) void] { const [storedValue, setStoredValue] useStateT(() { const item window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; }); const setValue (value: T) { setStoredValue(value); window.localStorage.setItem(key, JSON.stringify(value)); }; return [storedValue, setValue]; }7. 高阶组件HOC类型const withAuth P extends object(Component: React.ComponentTypeP) { return (props: P) { const isLoggedIn true; if (!isLoggedIn) return div请登录/div; return Component {...props} /; }; };五、TypeScript 配置文件 tsconfig.json 常用配置{ compilerOptions: { target: es5, // 编译目标 lib: [dom, es2015], // 包含的类型库 jsx: react, // JSX 编译方式 strict: true, // 启用所有严格类型检查 esModuleInterop: true, // 支持 CommonJS 和 ES 模块互操作 skipLibCheck: true, // 跳过库文件类型检查 forceConsistentCasingInFileNames: true }, include: [src] }