：GetRef、GetProps 與 GetProp 的用法與源碼原理)
Ant Design 工具類型實戰(zhàn)GetRef、GetProps 與 GetProp 的用法與源碼原理【免費下載鏈接】ant-designAn enterprise-class UI design language and React UI library項目地址: https://gitcode.com/GitHub_Trending/an/ant-designAnt Design 自5.13.0版本起提供了一組純類型層面的工具——GetRef、GetProps與GetProp用于從組件、Context 或 props 接口中精確提取類型定義。本文以 Ant Design 官方文檔Util為骨架結合倉庫中 type.ts 的完整實現、type.test.tsx 測試用例以及組件內部的真實調用示例講清這三個類型的適用場景、取值規(guī)則與底層原理幫助你在業(yè)務代碼中編寫類型安全且無需手動維護的ref、props、回調類型。一、它們解決什么問題在 React TypeScript 項目中經常會遇到以下需求給Select、DatePicker這類復雜組件的ref標注類型例如調用ref.current.focus()但BaseSelectRef等內部類型未必每個都單獨導出從Checkbox.Group這類「組件的靜態(tài)屬性」上提取 props 類型避免復制一份CheckboxGroupProps拿到SelectProps中單個屬性如options、onChange的類型尤其是「對象或函數」這種聯合類型屬性想直接拿到其函數分支的返回值。Ant Design 的答案就是這組工具類型它們全部定義在 components/_util/type.ts 中并通過包入口 components/index.ts 統(tǒng)一導出// components/index.ts export type { GetProp, GetProps, GetRef } from ./_util/type;因此使用方式就是從antd包中按import type導入零運行時開銷。二、GetRef提取組件的 ref 類型官方文檔對GetRef的定位是獲取組件的ref屬性定義對「未直接暴露Ref類型的組件」或「需要透傳給子組件的 ref」非常有用。import { Select } from antd; import type { GetRef } from antd; type SelectRefType GetReftypeof Select; // BaseSelectRef注意第二個參數傳的是typeof Select組件構造器類型而不是組件實例。典型用法const ref React.useRefGetReftypeof Select(null); // ref.current?.focus()、ref.current?.blur() 等均獲得完整的類型提示從源碼結構看GetRef的實現分為三步type.tstype 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 // 類組件ref 指向類實例本身 : T extends React.ComponentTypeinfer P ? ExtractRefAttributesRefP // 函數組件從 props 中抽出 RefAttributesRef : never;其邏輯可以拆解為類組件分支T extends React.Componentany ? T : ...類組件的 ref 天然就是類實例本身直接透傳函數組件分支React.forwardRefT, Props展開后的 props 形狀是Props React.RefAttributesT其中RefAttributesinfer P攜帶的P就是useImperativeHandle暴露的類型。ExtractRefAttributesRef正是靠條件類型infer把它摳出來兜底兩者都不滿足時返回never在類型層面顯式暴露問題。測試用例 type.test.tsx 覆蓋了這三條路徑類組件CC、forwardRef函數組件RefFC以及React.ForwardRefExoticComponentInnerProps React.RefAttributesInnerRef這種直接書寫 exotic 類型的場景驗證了GetRef對RefAttributes的提取是穩(wěn)定可靠的。三、GetProps提取組件或 Context 的 props 類型GetProps獲取組件的props屬性定義import { Checkbox } from antd; import type { GetProps } from antd; type CheckboxGroupType GetPropstypeof Checkbox.Group;Checkbox.Group是Checkbox上的靜態(tài)屬性typeof Checkbox.Group得到它的組件類型GetProps再從中推導 props從而拿到與CheckboxGroupProps完全等價、但無需依賴該類型是否被導出的結果。也支持 React.Context這是GetProps相對React.ComponentProps的獨有能力——直接提取 Context 的 value 類型import type { GetProps } from antd; interface InternalContextProps { name: string; } const Context React.createContextInternalContextProps({ name: Ant Design }); type ContextType GetPropstypeof Context; // InternalContextProps與React.ComponentProps的區(qū)別能力React.ComponentPropsGetProps原生標簽名如button支持不支持React 組件函數/類/forwardRef支持支持React.Context的 value 類型不支持支持透傳一個已有的 props 類型對象會嘗試按組件解析原樣透傳對照 type.ts 的實現四個分支一目了然export type GetPropsT extends React.ComponentTypeany | object T extends React.Contextinfer CP ? CP // 1. Context抽出 value 泛型 : T extends React.ComponentTypeinfer P ? P // 2. React 組件抽出 props 泛型 : T extends object ? T // 3. 普通對象類型原樣透傳 : never;第 3 個分支解釋了為什么GetProp的文檔示例里可以同時寫GetPropSelectProps, options直接傳接口和GetProptypeof Select, options傳組件——兩種入參都能被GetProps歸一成同一份 props 類型。四、GetProp提取單個屬性類型含 Return 分支GetProp用于獲取組件的單個props或context屬性定義。它內部封裝了NonNullable所以「屬性可選」時你不必再手動處理| undefinedimport { 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;第三個參數Return拿函數屬性的返回值Ant Design 5.x 起大量語義化屬性采用「對象或函數」的聯合類型如classNames、styles此時最常用的是通過第三個參數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 }實現上type.tsexport 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;關鍵點在于Extract..., (...args: any[]) unknown對于「對象 | 函數」的聯合類型Extract只保留函數分支再由ReturnType取出返回值。如果屬性只有對象分支沒有函數形態(tài)Extract的結果不是函數類型ReturnType會得到unknown語義上的空值——所以Return僅應對「存在函數形態(tài)」的聯合屬性使用。五、倉庫內的真實用法語義化樣式函數這三個類型并非紙面工具Ant Design 自身的 demo 就在用。以 Button 的 style-class 示例 為例styles屬性的完整形態(tài)是「對象或 (info) 對象」import type { ButtonProps, GetProp } from antd; // 函數形態(tài)的 styles返回類型直接由 GetProp 推導 const stylesFn: ButtonProps[styles] (info): GetPropButtonProps, styles, Return { if (info.props.type primary) { return { root: { backgroundColor: #171717 }, content: { color: #fff }, }; } return {}; };同樣的模式還出現在 Alert、Anchor、Badge、Card、Cascader、Checkbox、Collapse、ColorPicker 等組件的demo/style-class.tsx與__tests__/semantic.test.tsx中——從源碼結構看這是 Ant Design 為「對象或函數」型語義化屬性統(tǒng)一推薦的用戶側標注方式可以推斷它將成為后續(xù)新組件文檔的慣例寫法。六、測試如何驗證這三個類型type.test.tsx 用「類型標注 運行時斷言」的方式鎖定了行為邊界GetProps分別對函數組件FC、類組件CC、forwardRef組件RefFC提取 props確認const props: Props { bamboo: 123 }可通過編譯見 第 26-49 行GetRef類組件、forwardRef組件、ForwardRefExoticComponent三種寫法都能得到正確的 ref 類型見 第 51-81 行GetProp可選屬性自動去undefinedoptional用例、直接傳接口interface directly用例、以及classNames聯合類型下的Return提取Type is return用例均被覆蓋見 第 83-111 行。由于 TypeScript 的類型檢查發(fā)生在編譯期這類測試的價值在于把「類型推斷結果」固化進 CI一旦上游GetRef/GetProps/GetProp的實現被改動導致推斷退化測試會直接編譯失敗。七、選擇建議與參考結合 官方文檔 與源碼實際開發(fā)中的選擇策略是標注 ref 類型優(yōu)先GetReftypeof Component組件未導出XxxRef時尤其有用取組件/Context 的 props用GetProps特別是typeof Xxx.Group這類靜態(tài)屬性組件和自定義 Context取單個屬性用GetProp遇到「對象 | 函數」聯合屬性再加Return原生 DOM 標簽仍使用React.ComponentPropsbutton等官方類型GetProps不支持標簽名字符串。類型入參返回值定義位置GetRefT組件構造器類型類組件為T本身函數組件為RefAttributes中提取的 ref 類型type.ts#L84-L89GetPropsT組件類型 /React.Context/ 普通對象類型props 泛型 / Context value 泛型 / 原樣透傳type.ts#L29-L36GetPropT, K, Type?組件或 props 類型 屬性名 可選Default \| ReturnNonNullable后的屬性類型或函數分支的返回值type.ts#L57-L65以上類型自5.13.0引入在當前倉庫antd6.6.2見 package.json中持續(xù)被內部示例與測試依賴屬于可放心用于業(yè)務代碼的穩(wěn)定公開 API。【免費下載鏈接】ant-designAn enterprise-class UI design language and React UI library項目地址: https://gitcode.com/GitHub_Trending/an/ant-design創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 Ant Design 工具類型實戰(zhàn)：GetRef、GetProps 與 GetProp 的用法與源碼原理
Ant Design 工具類型實戰(zhàn)GetRef、GetProps 與 GetProp 的用法與源碼原理【免費下載鏈接】ant-designAn enterprise-class UI design language and React UI library項目地址: https://gitcode.com/GitHub_Trending/an/ant-designAnt Design 自5.13.0版本起提供了一組純類型層面的工具——GetRef、GetProps與GetProp用于從組件、Context 或 props 接口中精確提取類型定義。本文以 Ant Design 官方文檔Util為骨架結合倉庫中 type.ts 的完整實現、type.test.tsx 測試用例以及組件內部的真實調用示例講清這三個類型的適用場景、取值規(guī)則與底層原理幫助你在業(yè)務代碼中編寫類型安全且無需手動維護的ref、props、回調類型。一、它們解決什么問題在 React TypeScript 項目中經常會遇到以下需求給Select、DatePicker這類復雜組件的ref標注類型例如調用ref.current.focus()但BaseSelectRef等內部類型未必每個都單獨導出從Checkbox.Group這類「組件的靜態(tài)屬性」上提取 props 類型避免復制一份CheckboxGroupProps拿到SelectProps中單個屬性如options、onChange的類型尤其是「對象或函數」這種聯合類型屬性想直接拿到其函數分支的返回值。Ant Design 的答案就是這組工具類型它們全部定義在 components/_util/type.ts 中并通過包入口 components/index.ts 統(tǒng)一導出// components/index.ts export type { GetProp, GetProps, GetRef } from ./_util/type;因此使用方式就是從antd包中按import type導入零運行時開銷。二、GetRef提取組件的 ref 類型官方文檔對GetRef的定位是獲取組件的ref屬性定義對「未直接暴露Ref類型的組件」或「需要透傳給子組件的 ref」非常有用。import { Select } from antd; import type { GetRef } from antd; type SelectRefType GetReftypeof Select; // BaseSelectRef注意第二個參數傳的是typeof Select組件構造器類型而不是組件實例。典型用法const ref React.useRefGetReftypeof Select(null); // ref.current?.focus()、ref.current?.blur() 等均獲得完整的類型提示從源碼結構看GetRef的實現分為三步type.tstype 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 // 類組件ref 指向類實例本身 : T extends React.ComponentTypeinfer P ? ExtractRefAttributesRefP // 函數組件從 props 中抽出 RefAttributesRef : never;其邏輯可以拆解為類組件分支T extends React.Componentany ? T : ...類組件的 ref 天然就是類實例本身直接透傳函數組件分支React.forwardRefT, Props展開后的 props 形狀是Props React.RefAttributesT其中RefAttributesinfer P攜帶的P就是useImperativeHandle暴露的類型。ExtractRefAttributesRef正是靠條件類型infer把它摳出來兜底兩者都不滿足時返回never在類型層面顯式暴露問題。測試用例 type.test.tsx 覆蓋了這三條路徑類組件CC、forwardRef函數組件RefFC以及React.ForwardRefExoticComponentInnerProps React.RefAttributesInnerRef這種直接書寫 exotic 類型的場景驗證了GetRef對RefAttributes的提取是穩(wěn)定可靠的。三、GetProps提取組件或 Context 的 props 類型GetProps獲取組件的props屬性定義import { Checkbox } from antd; import type { GetProps } from antd; type CheckboxGroupType GetPropstypeof Checkbox.Group;Checkbox.Group是Checkbox上的靜態(tài)屬性typeof Checkbox.Group得到它的組件類型GetProps再從中推導 props從而拿到與CheckboxGroupProps完全等價、但無需依賴該類型是否被導出的結果。也支持 React.Context這是GetProps相對React.ComponentProps的獨有能力——直接提取 Context 的 value 類型import type { GetProps } from antd; interface InternalContextProps { name: string; } const Context React.createContextInternalContextProps({ name: Ant Design }); type ContextType GetPropstypeof Context; // InternalContextProps與React.ComponentProps的區(qū)別能力React.ComponentPropsGetProps原生標簽名如button支持不支持React 組件函數/類/forwardRef支持支持React.Context的 value 類型不支持支持透傳一個已有的 props 類型對象會嘗試按組件解析原樣透傳對照 type.ts 的實現四個分支一目了然export type GetPropsT extends React.ComponentTypeany | object T extends React.Contextinfer CP ? CP // 1. Context抽出 value 泛型 : T extends React.ComponentTypeinfer P ? P // 2. React 組件抽出 props 泛型 : T extends object ? T // 3. 普通對象類型原樣透傳 : never;第 3 個分支解釋了為什么GetProp的文檔示例里可以同時寫GetPropSelectProps, options直接傳接口和GetProptypeof Select, options傳組件——兩種入參都能被GetProps歸一成同一份 props 類型。四、GetProp提取單個屬性類型含 Return 分支GetProp用于獲取組件的單個props或context屬性定義。它內部封裝了NonNullable所以「屬性可選」時你不必再手動處理| undefinedimport { 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;第三個參數Return拿函數屬性的返回值Ant Design 5.x 起大量語義化屬性采用「對象或函數」的聯合類型如classNames、styles此時最常用的是通過第三個參數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 }實現上type.tsexport 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;關鍵點在于Extract..., (...args: any[]) unknown對于「對象 | 函數」的聯合類型Extract只保留函數分支再由ReturnType取出返回值。如果屬性只有對象分支沒有函數形態(tài)Extract的結果不是函數類型ReturnType會得到unknown語義上的空值——所以Return僅應對「存在函數形態(tài)」的聯合屬性使用。五、倉庫內的真實用法語義化樣式函數這三個類型并非紙面工具Ant Design 自身的 demo 就在用。以 Button 的 style-class 示例 為例styles屬性的完整形態(tài)是「對象或 (info) 對象」import type { ButtonProps, GetProp } from antd; // 函數形態(tài)的 styles返回類型直接由 GetProp 推導 const stylesFn: ButtonProps[styles] (info): GetPropButtonProps, styles, Return { if (info.props.type primary) { return { root: { backgroundColor: #171717 }, content: { color: #fff }, }; } return {}; };同樣的模式還出現在 Alert、Anchor、Badge、Card、Cascader、Checkbox、Collapse、ColorPicker 等組件的demo/style-class.tsx與__tests__/semantic.test.tsx中——從源碼結構看這是 Ant Design 為「對象或函數」型語義化屬性統(tǒng)一推薦的用戶側標注方式可以推斷它將成為后續(xù)新組件文檔的慣例寫法。六、測試如何驗證這三個類型type.test.tsx 用「類型標注 運行時斷言」的方式鎖定了行為邊界GetProps分別對函數組件FC、類組件CC、forwardRef組件RefFC提取 props確認const props: Props { bamboo: 123 }可通過編譯見 第 26-49 行GetRef類組件、forwardRef組件、ForwardRefExoticComponent三種寫法都能得到正確的 ref 類型見 第 51-81 行GetProp可選屬性自動去undefinedoptional用例、直接傳接口interface directly用例、以及classNames聯合類型下的Return提取Type is return用例均被覆蓋見 第 83-111 行。由于 TypeScript 的類型檢查發(fā)生在編譯期這類測試的價值在于把「類型推斷結果」固化進 CI一旦上游GetRef/GetProps/GetProp的實現被改動導致推斷退化測試會直接編譯失敗。七、選擇建議與參考結合 官方文檔 與源碼實際開發(fā)中的選擇策略是標注 ref 類型優(yōu)先GetReftypeof Component組件未導出XxxRef時尤其有用取組件/Context 的 props用GetProps特別是typeof Xxx.Group這類靜態(tài)屬性組件和自定義 Context取單個屬性用GetProp遇到「對象 | 函數」聯合屬性再加Return原生 DOM 標簽仍使用React.ComponentPropsbutton等官方類型GetProps不支持標簽名字符串。類型入參返回值定義位置GetRefT組件構造器類型類組件為T本身函數組件為RefAttributes中提取的 ref 類型type.ts#L84-L89GetPropsT組件類型 /React.Context/ 普通對象類型props 泛型 / Context value 泛型 / 原樣透傳type.ts#L29-L36GetPropT, K, Type?組件或 props 類型 屬性名 可選Default \| ReturnNonNullable后的屬性類型或函數分支的返回值type.ts#L57-L65以上類型自5.13.0引入在當前倉庫antd6.6.2見 package.json中持續(xù)被內部示例與測試依賴屬于可放心用于業(yè)務代碼的穩(wěn)定公開 API。【免費下載鏈接】ant-designAn enterprise-class UI design language and React UI library項目地址: https://gitcode.com/GitHub_Trending/an/ant-design創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考