当前位置：首页 > React

typescript react 如何

2026-02-26 00:46:20React

使用 TypeScript 与 React 开发应用

TypeScript 与 React 结合可以提升代码的可维护性和类型安全性。以下是关键步骤和最佳实践：

初始化 React + TypeScript 项目

使用 create-react-app 快速搭建项目：

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

或使用 Vite（推荐）：

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

定义组件 Props 和 State

使用 interface 或 type 明确组件 Props 和 State 的类型：

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
};

处理事件类型

React 事件类型需使用泛型，如 React.MouseEvent：

typescript react 如何

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  console.log(e.currentTarget.value);
};

使用 Hooks 的类型

为 useState 指定类型：

const [count, setCount] = useState<number>(0);

为 useReducer 定义类型：

type State = { count: number };
type Action = { type: 'increment' | '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;
  }
};

类型化 Context API

创建类型安全的 Context：

typescript react 如何

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = React.createContext<ThemeContextType | undefined>(undefined);

const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme must be used within a ThemeProvider');
  return context;
};

处理第三方库类型

安装库的类型定义（如 @types/react-router-dom）：

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

若库无类型，可手动声明：

declare module 'untyped-library' {
  export const someFunction: () => void;
}

配置 tsconfig.json

确保关键配置启用：

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

泛型组件示例

创建可复用的列表组件：

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

const List = <T,>({ items, renderItem }: ListProps<T>) => (
  <ul>{items.map((item, index) => <li key={index}>{renderItem(item)}</li>)}</ul>
);

通过以上方法，可以高效地结合 TypeScript 和 React 开发类型安全的应用程序。