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