首先,對不起,很難定義我的問題。
我有這樣的字串:"first.second.third"和一些value(它可以是物件、布林值或字串)。我撰寫了reduce將這兩個變數轉換為物件的函式,它看起來像這樣:
{ first: { second: { third: value } } }
這是我的功能:
const processNestedFilter = (columnField, value) => {
const fields = columnField.split('.').reverse();
const items = [value, ...fields];
const nestedFilter = items.reduce((filter, current, index) => {
if (index === 0) {
return current;
}
return { [current]: filter };
}, {});
return nestedFilter;
};
我試圖為它撰寫型別,但失敗了。我還不擅長打字稿中的遞回型別定義。有人可以解釋一下,您應該如何開始為這些不簡單的功能創建型別?任何人都可以幫我設計一個型別嗎?
反過來,我的意思是將reduce函式中的累加器更改為value,將currentValue更改為key。
您可能會在這里看到它是如何作業的:https ://codesandbox.io/s/affectionate-cache-wnlnuo?file=/src/index.js
十分感謝!
uj5u.com熱心網友回復:
因此,我們需要對processNestedFilter(columnField, value)在型別級別產生的內容進行描述。讓我們呼叫型別ProcessNestedFilter<K, V>并使其成為函式的回傳型別:
declare const processNestedFilter: <K extends string, V>(
columnField: K, value: V) => ProcessNestedFilter<K, V>;
對應于K的字串文字型別也是如此columnField,就像 "first.second.third"在您的示例中一樣;whileV是對應的型別value。
我們可以撰寫ProcessNestedFilter<K, V>為遞回條件型別,使用模板文字型別K在點字符處拆分型別".":
type ProcessNestedFilter<K extends string, V> =
K extends `${infer F}.${infer R}` ?
{ [P in F]: ProcessNestedFilter<R, V> } : { [P in K]: V }
如果K可以拆分為第一個塊F,然后是一個點".",然后是字串的其余部分R,那么我們希望ProcessNestedFilter<K, V>成為一個物件型別,F作為鍵,其值型別為ProcessNestedFilter<R, V>。我們可以把它寫成映射型別 {[P in F]: ProcessNestedFilter<R, V>};這相當于Record<F, ProcessNestedFilter<R, V>>使用實用程式型別。Record<K, V>
另一方面,如果K不能這樣拆分,那么它是一個單一的鍵,我們希望成為一個作為鍵和作為值ProcessNestedFilter<K, V>的物件型別。我們可以把它寫成映射型別;這相當于.KV{[P in K]: V }Record<K, V>
讓我們測驗一下:
const x = processNestedFilter("first.second.third", 123);
/* const x: {
first: {
second: {
third: number;
};
};
} */
看起來挺好的。的型別x是任意的{first: {second: {third: number}}}。
請注意,編譯器無法確定您的實作是否processNestedFilter滿足呼叫簽名。型別函式太復雜了。所以你需要使用型別斷言或類似的東西來說服編譯器不要警告你關于實作的事情。這也意味著您需要非常小心地檢查您的實作是否按照您所說的那樣做,因為編譯器無能為力。
它可能看起來像這樣:
const processNestedFilter = <K extends string, V>(
columnField: K, value: V) =>
columnField.split('.').reverse().reduce<any>((filter, current) => {
return { [current]: filter };
}, value) as ProcessNestedFilter<K, V>;
在這里我說這reduce()會產生型別,any因為我不希望編譯器擔心它。最后我只是斷言回傳型別是ProcessNestedFilter<K, V>.
你去吧:
console.log(x);
/* {
"first": {
"second": {
"third": 123
}
}
} */
Playground 代碼鏈接
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/476359.html
標籤:打字稿
下一篇:如何在Linux系統上刷抖音
