跳至主要内容

第 4 节:@types/react 和 @types/react-dom API

@types 类型定义既导出供您使用的“公共”类型,也导出供内部使用的“私有”类型。

查看 SaltyCrane 的 React TypeScript 速查表 以获取一个不错的自动生成的完整参考。

@types/react

链接到 .d.ts

命名空间:React

最常用的接口和类型

  • ReactNode - 任何可在 JSX 内部渲染的内容,这与组件可以渲染的内容**不同**!
  • Component - 所有基于类的组件的基类
  • PureComponent - 所有基于类的优化组件的基类
  • FCFunctionComponent - 函数组件的完整接口,通常用于为外部组件设置类型,而不是为自己的组件设置类型
  • CSSProperties - 用于为样式对象设置类型
  • 所有事件:用于为事件处理程序设置类型
  • 所有事件处理程序:用于为事件处理程序设置类型
  • 所有常量:ChildrenFragment 等都是公开的,并反映了 React 运行时命名空间

不常用但值得了解

  • Ref - 用于为 innerRef 设置类型
  • ElementType - 用于高阶组件或对组件的操作,例如 多态组件
  • ReactElement - 如果要将其传递给 cloneElement,则可以使用,也就是很少使用
  • ComponentType - 用于高阶组件,在这些组件中,您不专门处理内在组件
  • ReactPortal - 如果您需要将 prop 特定地设置为 portal,则使用此类型,否则它是 ReactNode 的一部分
  • ComponentClass - 扩展 Component 的类声明生成的构造函数的完整接口,通常用于为外部组件设置类型,而不是为自己的组件设置类型
  • JSXElementConstructor - TypeScript 认为可以放入 JSX 表达式开始标记的任何有效内容
  • ComponentProps - 组件的 props - 对 包装/镜像 HTML 元素 最有用
  • ComponentPropsWithRef - 组件的 props,如果它是基于类的组件,它将用自己的实例类型替换 ref prop
  • ComponentPropsWithoutRef - 组件的 props,不包含其 ref prop
  • HTMLPropsHTMLAttributes - 这些是最通用的版本,用于全局属性(请参阅 MDN 上 标记为“全局属性”的属性列表)。通常,更喜欢 React.ComponentPropsReact.JSX.IntrinsicElements专门的 HTMLAttributes 接口
专门的 HTMLAttributes 列表

请注意,大约有 50 个这样的接口,这意味着有一些 HTML 元素未涵盖。

  • AnchorHTMLAttributes
  • AudioHTMLAttributes
  • AreaHTMLAttributes
  • BaseHTMLAttributes
  • BlockquoteHTMLAttributes
  • ButtonHTMLAttributes
  • CanvasHTMLAttributes
  • ColHTMLAttributes
  • ColgroupHTMLAttributes
  • DataHTMLAttributes
  • DetailsHTMLAttributes
  • DelHTMLAttributes
  • DialogHTMLAttributes
  • EmbedHTMLAttributes
  • FieldsetHTMLAttributes
  • FormHTMLAttributes
  • HtmlHTMLAttributes
  • IframeHTMLAttributes
  • ImgHTMLAttributes
  • InsHTMLAttributes
  • InputHTMLAttributes
  • KeygenHTMLAttributes
  • LabelHTMLAttributes
  • LiHTMLAttributes
  • LinkHTMLAttributes
  • MapHTMLAttributes
  • MenuHTMLAttributes
  • MediaHTMLAttributes
  • MetaHTMLAttributes
  • MeterHTMLAttributes
  • QuoteHTMLAttributes
  • ObjectHTMLAttributes
  • OlHTMLAttributes
  • OptgroupHTMLAttributes
  • OptionHTMLAttributes
  • OutputHTMLAttributes
  • ParamHTMLAttributes
  • ProgressHTMLAttributes
  • SlotHTMLAttributes
  • ScriptHTMLAttributes
  • SelectHTMLAttributes
  • SourceHTMLAttributes
  • StyleHTMLAttributes
  • TableHTMLAttributes
  • TextareaHTMLAttributes
  • TdHTMLAttributes
  • ThHTMLAttributes
  • TimeHTMLAttributes
  • TrackHTMLAttributes
  • VideoHTMLAttributes
  • WebViewHTMLAttributes
  • 所有方法:createElementcloneElement 等都是公开的,并反映了 React 运行时 API。

@Ferdaber 的说明:我不建议使用大多数 ...Element 类型,因为 React.JSX.Element 是多么的黑盒。您几乎始终应该假设 React.createElement 生成的任何内容都是基本类型 React.ReactElement

命名空间:JSX

  • Element - 任何 JSX 表达式的类型。理想情况下,您不应该看到或使用它,但由于 TypeScript 的限制,您确实需要使用它。
  • LibraryManagedAttributes - 它指定了 JSX 元素可以在其中声明和初始化属性类型的其他位置。用于使用组件的内部 props 类型解析静态 defaultPropspropTypes
  • IntrinsicElements - 可以在 JSX 中作为小写标签名称键入的每个可能的内置组件。如果您使用此方法获取 HTML 元素的属性,则 React.ComponentProps<element> 可能更易读,因为它不需要知道“Intrinsic”的含义。

不常用但值得了解

  • IntrinsicAttributes 所有 IntrinsicElements 支持的属性集……基本上只是 key
  • ElementChildrenAttribute TS 用于确定组件支持哪些类型子元素的属性名称。基本上是 children 属性。
  • ElementAttributesProperty TS 用于确定组件支持哪些属性的属性名称。基本上是 props 属性(对于类实例)。

请勿使用/内部/已弃用

上面未列出的任何内容都被视为内部类型,而不是公共类型。如果您不确定,可以查看 @types/react 的源代码。类型已相应地进行了注释。

  • SFCElement
  • SFC
  • ComponentState
  • LegacyRef
  • StatelessComponent
  • ReactType

添加非标准属性

主机组件(如 buttonimg)上允许的属性遵循 HTML 生存标准。因此,尚未成为生存标准一部分或仅由某些浏览器实现的新功能将导致类型错误。如果您专门为这些浏览器编写代码或为这些属性提供 polyfill,则可以使用 模块增强 来继续对这些组件进行类型检查,而无需使用 any@ts-ignore

在此示例中,我们将添加 loading 属性,该属性增加了对 Chrome 上 延迟加载 图像的支持。

// react-unstable-attributes.d.ts
import "react";

declare module "react" {
interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
loading?: "auto" | "eager" | "lazy";
}
}

@types/react-dom

待编写