当前位置：首页 > React

react如何使用ts

2026-02-26 17:11:32React

在 React 中使用 TypeScript 的实践方法

安装 TypeScript 及相关依赖
通过 create-react-app 创建项目时直接选择 TypeScript 模板：

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

已存在的项目可通过以下命令添加 TypeScript：

npm install --save typescript @types/react @types/react-dom

组件类型定义
函数组件使用 React.FC 或直接标注 Props 类型：

interface Props {
  name: string;
  age?: number; // 可选属性
}
const MyComponent: React.FC<Props> = ({ name, age = 18 }) => (
  <div>{name} - {age}</div>
);

状态管理类型标注
useState 通过泛型指定类型：

const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<{ id: string; name: string } | null>(null);

事件处理类型
使用 React 提供的合成事件类型：

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value);
};
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.preventDefault();
};

高阶组件与 Context 类型
高阶组件需显式声明 Props 类型：

function withAuth<P extends object>(Component: React.ComponentType<P>) {
  return (props: P) => <Component {...props} />;
}

Context 示例：

interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}
const ThemeContext = React.createContext<ThemeContextType | undefined>(undefined);

泛型组件实现
适用于可复用组件开发：

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}
function List<T>({ items, renderItem }: ListProps<T>) {
  return <div>{items.map(renderItem)}</div>;
}

类型声明文件管理
自定义类型可放在 src/types 目录下：

// src/types/user.d.ts
declare interface User {
  id: string;
  name: string;
  email: string;
}

常见问题解决
类型断言仅在必要时使用：

const element = document.getElementById('root') as HTMLElement;

处理第三方库无类型时，可创建 @types/package-name/index.d.ts 或使用 declare module。

工程化配置
tsconfig.json 关键配置项：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "strict": true
  }
}

测试组件类型
使用 @testing-library/react 时类型自动推断，自定义渲染器需扩展类型：

react如何使用ts

import { render, screen } from '@testing-library/react';
test('renders text', () => {
  render(<MyComponent name="Test" />);
  expect(screen.getByText(/Test/)).toBeInTheDocument();
});