TypeScript-React 基础类型示例指南：组件 Props 的类型定义-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01016/article/details/148324925

TypeScript-React 基础类型示例指南：组件 Props 的类型定义

react Cheatsheets for experienced React developers getting started with TypeScript 项目地址: https://gitcode.com/gh_mirrors/rea/react

前言

在 React 与 TypeScript 的结合使用中，正确地为组件 Props 定义类型是开发高质量应用的基础。本文将系统性地介绍在 React+TypeScript 项目中常见的 Props 类型定义方式，帮助开发者构建类型安全的组件。

基础 Props 类型示例

以下是一个包含了 React+TypeScript 应用中常见类型的完整示例：

type AppProps = {
  // 基本类型
  message: string;
  count: number;
  disabled: boolean;
  
  // 数组类型
  names: string[];
  
  // 字符串字面量联合类型
  status: "waiting" | "success";
  
  // 对象类型
  obj: {
    id: string;
    title: string;
  };
  
  // 对象数组
  objArr: {
    id: string;
    title: string;
  }[];
  
  // 函数类型
  onClick: () => void;
  onChange: (id: number) => void;
  
  // React 事件处理函数
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onClick(event: React.MouseEvent<HTMLButtonElement>): void;
  
  // 可选属性
  optional?: OptionalType;
  
  // useState 的 setter 函数
  setState: React.Dispatch<React.SetStateAction<number>>;
};

对象类型的注意事项

在 TypeScript 中，object 类型表示"任何非原始类型"，包括对象、数组、函数等，但不包括 number, string, boolean, symbol, null 或 undefined。

在实际 React 开发中，直接使用 object 类型的情况较少，因为它过于宽泛，失去了类型检查的意义。更推荐使用具体的对象形状定义。

React 特有 Props 类型

对于接收其他 React 组件作为 Props 的情况，有以下实用类型：

export interface AppProps {
  // 最通用的子元素类型，接受任何 React 可以渲染的内容
  children?: React.ReactNode;
  
  // 单个 React 元素
  childrenElement: React.JSX.Element;
  
  // 样式属性
  style?: React.CSSProperties;
  
  // 表单事件
  onChange?: React.FormEventHandler<HTMLInputElement>;
  
  // 组合组件 Props
  props: Props & React.ComponentPropsWithoutRef<"button">;
  props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>;
}

React.ReactNode 与 React.JSX.Element 的区别

React.JSX.Element 是 React.createElement 的返回值类型
React.ReactNode 是组件可能返回的所有类型的集合

简单来说，React.ReactNode 比 React.JSX.Element 更广泛，包含了更多可能的返回值类型。

类型(Type)与接口(Interface)的选择

在定义 Props 和 State 时，开发者常面临选择 type 还是 interface 的困惑。

实用建议

公共 API 定义：使用 interface，因为它支持声明合并
组件 Props 和 State：考虑使用 type，因为它更受约束
联合类型：必须使用 type
扩展实现：优先使用 interface

类型与接口对比表

| 特性 | Type | Interface | |--------------------------|------|-----------| | 描述函数 | ✅ | ✅ | | 描述元组 | ✅ | ✅ | | 扩展接口 | ⚠️ | ✅ | | 类实现(implements) | ⚠️ | ✅ | | 创建联合类型 | ✅ | ❌ | | 创建映射类型 | ✅ | ❌ | | 声明合并 | ❌ | ✅ |

⚠️ 表示在某些情况下可用