Ant Design 类型工具详解GetProps、GetProp 与 GetRef 如何精确提取组件的 Props 与 Ref 类型【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design本篇围绕 Ant Design 的 Util 工具类文档components/_util/index.zh-CN.md展开讲解GetRef、GetProps、GetProp三个类型工具的定义方式、源码实现与典型用法。读完之后你将能够在 TypeScript 项目中免查文档地推导任意 antd 组件的 props、单个 prop、ref 类型并理解它们与React.ComponentProps的差异边界。背景这三个类型工具是什么自5.13.0版本起Ant Design 开始对外提供这三个方法用于辅助开发提供一些常用的工具方法。它们的实现全部集中在 components/_util/type.ts 中并通过 components/index.ts 统一从antd包根导出// components/index.ts export type { GetProp, GetProps, GetRef } from ./_util/type;三个工具各自解决的问题工具解决的问题输入输出GetRef获取组件ref的类型定义组件typeof形式或类组件ref 实例类型GetProps获取组件的完整props类型定义组件 /React.Context/ props 类型对象props 类型GetProp获取组件的单个props或 context value属性类型并内置NonNullableprops 类型或组件 属性名可选Return单个属性类型去除可选下面逐个结合源码实现讲解。GetRef获取组件的 ref 类型定义基本用法GetRef用于获取组件的ref属性定义对于未直接暴露 ref 类型或者子组件如Checkbox.Group、List.Item的ref特别有用import { Select } from antd; import type { GetRef } from antd; type SelectRefType GetReftypeof Select; // BaseSelectRef源码实现原理在 components/_util/type.ts 中GetRef的实现只有两个分支type ReactRefComponentProps extends { ref?: React.Refany | string } ( props: Props, ) React.ReactNode; type ExtractRefAttributesRefT T extends React.RefAttributesinfer P ? P : never; export type GetRefT extends ReactRefComponentany | React.Componentany T extends React.Componentany ? T : T extends React.ComponentTypeinfer P ? ExtractRefAttributesRefP : never;从源码结构看其推导逻辑分两类类组件Class Component直接返回T本身因为类组件实例本身就是 ref 指向的对象函数组件 /React.forwardRef组件先通过React.ComponentTypeinfer P提取 props 类型P再用辅助类型ExtractRefAttributesRef从 props 中匹配React.RefAttributesinfer P把forwardRefRefType, Props里声明的RefType提取出来。这正是它能从React.forwardRef组件中还原出 ref 类型的原理。仓库中的测试用例 components/_util/tests/type.test.tsx 验证了这三种场景类组件CC、forwardRef组件RefFC以及显式声明React.ForwardRefExoticComponentInnerProps React.RefAttributesInnerRef的类型都能被正确提取。仓库中的真实用法官方 demo 就是GetRef的标准使用场景。以 InputNumber 聚焦 demo 为例import type { GetRef } from antd; type InputNumberRef GetReftypeof InputNumber; const App: React.FC () { const inputRef useRefInputNumberRef(null); // 之后可调用 inputRef.current?.focus({ cursor: start }) 等实例方法再看 Form 表单上下文 demo它用GetRef推导FormInstanceimport type { GetRef } from antd; type FormInstance GetReftypeof Form;这个类型随后直接用于自定义 Hook 的参数声明useResetFormOnCloseModal({ form, open })中的form: FormInstance让form.resetFields()等调用获得完整类型提示。类似写法也大量出现在官方测试中例如 components/button/tests/index.test.tsx、components/tooltip/tests/unique.test.tsx 都使用React.createRefGetReftypeof Tooltip()这样的模式。GetProps获取组件的完整 props 定义基本用法import { Checkbox } from antd; import type { GetProps } from antd; type CheckboxGroupType GetPropstypeof Checkbox.Group;同时支持 Context 与 props 对象透传GetProps不止能处理 React 组件还支持直接获取React.Context的 value 类型import type { GetProps } from antd; interface InternalContextProps { name: string; } const Context React.createContextInternalContextProps({ name: Ant Design }); type ContextType GetPropstypeof Context; // InternalContextProps其源码components/_util/type.ts是一个四级条件类型export type GetPropsT extends React.ComponentTypeany | object T extends React.Contextinfer CP ? CP : T extends React.ComponentTypeinfer P ? P : T extends object ? T : never;按顺序匹配React.Context提取 value 类型CPReact.ComponentType提取 props 类型P如果传入的本身就是一个 props 类型对象interface则原样透传T都不满足返回never。这个object 透传分支正是它与React.ComponentProps的关键差异之一下一节详述。与React.ComponentProps的区别React.ComponentProps是 React 官方提供的通用工具类型用于获取原生标签或 React 组件接受的 props例如React.ComponentPropsbutton或React.ComponentPropstypeof Button而GetProps是 Ant Design 提供的补充类型它不支持原生标签名但除了 React 组件外还可以直接获取React.Context的 value 类型或者透传已经拿到的 props 类型对象。GetProp获取单个 prop内置 NonNullable 与返回类型提取基本用法GetProp用于获取组件的单个props或context属性定义。它已经将NonNullable进行了封装所以不用再考虑属性为空undefined的情况import { Select } from antd; import type { GetProp, SelectProps } from antd; // 以下两种都可以生效 type SelectOptionType1 GetPropSelectProps, options[number]; type SelectOptionType2 GetProptypeof Select, options[number]; type ContextOptionType GetProptypeof Context, name;两种写法的区别在于第一个参数既可以直接传已导出的 props 接口SelectProps也可以传组件本身typeof Select内部先经过GetProps展开。第三个参数Return提取函数属性/联合类型中的返回值GetProp还支持通过第三个参数Return获取函数属性的返回值类型import type { GetProp } from antd; interface Props { func?: (value: number) string; configOrFunc?: { configA?: string } | (() { anotherB?: string }); } type OnChangeReturn GetPropProps, func, Return; // string type ClassNamesReturn GetPropProps, configOrFunc, Return; // { anotherB?: string }源码实现拆解components/_util/type.ts 中的完整实现export type GetProp T extends React.ComponentTypeany | object, PropName extends keyof GetPropsT, Type extends Default | Return Default, Type extends Default ? NonNullableGetPropsT[PropName] : Type extends Return ? ReturnTypeExtractGetPropT, PropName, Default, (...args: any[]) unknown : never;逐分支解读Type为Default默认先经GetPropsT展开为 props 类型再取[PropName]并包一层NonNullable——这就是不用再考虑为空的情况的实现来源。约束PropName extends keyof GetPropsT也保证属性名必须真实存在写错属性名会直接报类型错误Type为Return用Extract从该属性的类型中筛出函数成员再用ReturnType提取其返回值。对configOrFunc?: { configA?: string } | (() { anotherB?: string })这种配置对象或函数的联合类型antd 中classNames、styles等语义化 API 的常见形态Extract只保留函数分支最终得到{ anotherB?: string }。components/_util/tests/type.test.tsx 中的Type is return用例正是对这一分支的验证对应 antd 中classNames的object | function联合类型场景。在业务代码中的典型组合场景三个工具在仓库的 demo 与测试中形成了几类高频组合模式可直接复制到日常开发1. ref 实例方法调用用GetReftypeof Component定义 ref 类型配合useRef调用组件实例方法如 components/table/demo/auto-height.tsx 中useRefGetReftypeof Table(null)。2. onChange 回调类型标注GetProptypeof Select, onChange直接给出onChange回调的完整签名为事件处理函数提供精确类型。3. 泛型组件实例类型如 components/table/demo/edit-cell.tsx 中type FormInstanceT GetReftypeof FormT说明GetRef可以作用于带泛型的组件类型推导结果保留泛型参数。小结GetRef、GetProps、GetProp三个工具从 components/_util/type.ts 导出、经由 components/index.ts 暴露在antd包根自5.13.0可用。它们与React.ComponentProps形成互补React.ComponentProps覆盖原生标签名场景而 antd 的三个工具额外覆盖React.Contextvalue 提取、props 对象透传、可选属性自动去空NonNullable、函数属性返回值提取Return四类场景。实际使用时优先用GetPropComponent, prop处理单个属性用GetProps处理整体 props 或 Context用GetRef处理 ref三者均有 components/_util/tests/type.test.tsx 中的测试用例与仓库内多个官方 demo 可作参照。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考