資訊專欄INFORMATION COLUMN
摘要：中類型推導(dǎo)部分預(yù)期想實(shí)現(xiàn)的效果在中對(duì)應(yīng)的類型是對(duì)應(yīng)的類型是對(duì)應(yīng)的類型是但是，我們想要實(shí)現(xiàn)的是轉(zhuǎn)換成小寫(xiě)的所以我們寫(xiě)個(gè)泛型來(lái)轉(zhuǎn)換預(yù)覽鏈接定義的類型留個(gè)泛型是給復(fù)雜類型做兼容復(fù)雜的類型定義函數(shù)接收的類型最關(guān)鍵的一步根據(jù)輸入的類型計(jì)算出來(lái)函
rfc 中類型推導(dǎo)部分 Type Inference預(yù)期想實(shí)現(xiàn)的效果
createComponent({
props: {
foo: {
type: String,
required: true
},
bar: {
type: Number
},
boo: Boolean,
options: (null as any) as { msg: string },
requiredOptions: {
type: (null as any) as { msg: string },
required: true
}
} as const,
setup(props) {
props.foo; // string
props.bar; // number | undefined
props.boo; // boolean | undefined
props.options; // {msg: string } | undefined
props.requiredOptions; // {msg: string }
}
});
String -> string 、 Number -> number 、 Boolean -> boolean
在 ts 中
String對(duì)應(yīng)的類型是StringConstructor
Number對(duì)應(yīng)的類型是NumberConstructor
Boolean對(duì)應(yīng)的類型是BooleanConstructor
但是，我們想要實(shí)現(xiàn)的是轉(zhuǎn)換成小寫(xiě)的string | number | boolean
所以我們寫(xiě)個(gè)泛型來(lái)轉(zhuǎn)換
type NormalizeType= T extends StringConstructor ? string : T extends NumberConstructor ? number : T extends BooleanConstructor ? boolean : T;
playground 預(yù)覽鏈接
定義 prop 的類型type BuiltInType= | StringConstructor | NumberConstructor | BooleanConstructor | T;
留個(gè)泛型是給復(fù)雜類型做兼容
rfc 復(fù)雜的 prop 類型
type DefaultType最關(guān)鍵的一步根據(jù)輸入的props類型計(jì)算出來(lái)setup函數(shù)接收的形參props類型= { [key: string]: | { type?: BuiltInType ; require?: boolean; } | BuiltInType ; };
