第 4 节:@types/react 和 @types/react-dom API
@types
类型定义既导出供您使用的“公共”类型,也导出供内部使用的“私有”类型。
查看 SaltyCrane 的 React TypeScript 速查表 以获取一个不错的自动生成的完整参考。
@types/react
命名空间:React
最常用的接口和类型
ReactNode
- 任何可在 JSX 内部渲染的内容,这与组件可以渲染的内容**不同**!Component
- 所有基于类的组件的基类PureComponent
- 所有基于类的优化组件的基类FC
、FunctionComponent
- 函数组件的完整接口,通常用于为外部组件设置类型,而不是为自己的组件设置类型CSSProperties
- 用于为样式对象设置类型- 所有事件:用于为事件处理程序设置类型
- 所有事件处理程序:用于为事件处理程序设置类型
- 所有常量:
Children
、Fragment
等都是公开的,并反映了 React 运行时命名空间
不常用但值得了解
Ref
- 用于为innerRef
设置类型ElementType
- 用于高阶组件或对组件的操作,例如 多态组件ReactElement
- 如果要将其传递给cloneElement
,则可以使用,也就是很少使用ComponentType
- 用于高阶组件,在这些组件中,您不专门处理内在组件ReactPortal
- 如果您需要将 prop 特定地设置为 portal,则使用此类型,否则它是ReactNode
的一部分ComponentClass
- 扩展Component
的类声明生成的构造函数的完整接口,通常用于为外部组件设置类型,而不是为自己的组件设置类型JSXElementConstructor
- TypeScript 认为可以放入 JSX 表达式开始标记的任何有效内容ComponentProps
- 组件的 props - 对 包装/镜像 HTML 元素 最有用ComponentPropsWithRef
- 组件的 props,如果它是基于类的组件,它将用自己的实例类型替换ref
propComponentPropsWithoutRef
- 组件的 props,不包含其ref
propHTMLProps
和HTMLAttributes
- 这些是最通用的版本,用于全局属性(请参阅 MDN 上 标记为“全局属性”的属性列表)。通常,更喜欢React.ComponentProps
、React.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
- 所有方法:
createElement
、cloneElement
等都是公开的,并反映了 React 运行时 API。
@Ferdaber 的说明:我不建议使用大多数 ...Element
类型,因为 React.JSX.Element
是多么的黑盒。您几乎始终应该假设 React.createElement
生成的任何内容都是基本类型 React.ReactElement
。
命名空间:JSX
Element
- 任何 JSX 表达式的类型。理想情况下,您不应该看到或使用它,但由于 TypeScript 的限制,您确实需要使用它。LibraryManagedAttributes
- 它指定了 JSX 元素可以在其中声明和初始化属性类型的其他位置。用于使用组件的内部 props 类型解析静态defaultProps
和propTypes
。IntrinsicElements
- 可以在 JSX 中作为小写标签名称键入的每个可能的内置组件。如果您使用此方法获取 HTML 元素的属性,则React.ComponentProps<element>
可能更易读,因为它不需要知道“Intrinsic”的含义。
不常用但值得了解
IntrinsicAttributes
所有IntrinsicElements
支持的属性集……基本上只是key
。ElementChildrenAttribute
TS 用于确定组件支持哪些类型子元素的属性名称。基本上是children
属性。ElementAttributesProperty
TS 用于确定组件支持哪些属性的属性名称。基本上是props
属性(对于类实例)。
请勿使用/内部/已弃用
上面未列出的任何内容都被视为内部类型,而不是公共类型。如果您不确定,可以查看 @types/react
的源代码。类型已相应地进行了注释。
SFCElement
SFC
ComponentState
LegacyRef
StatelessComponent
ReactType
添加非标准属性
主机组件(如 button
或 img
)上允许的属性遵循 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
待编写