我正在嘗試解決代碼：
type Wrap<T> = {
value: T
}
function wrapIt<T>(t: T): Wrap<T> {
return { value: t}
}
const arr: Array<string|number> = ["a", 1]
const arr2: Array<Wrap<string|number>> = arr.map(wrapIt)
const arr3: Array<Wrap<string>|Wrap<number>> = arr.map(wrapIt) // <--- Doesn't compile
編譯器說：
Type 'Wrap<string | number>[]' is not assignable to type '(Wrap<string> | Wrap<number>)[]'.
Type 'Wrap<string | number>' is not assignable to type 'Wrap<string> | Wrap<number>'.
Type 'Wrap<string | number>' is not assignable to type 'Wrap<string>'.
Type 'string | number' is not assignable to type 'string'.
Type 'number' is not assignable to type 'string'.
arr3是我與我不擁有的其他代碼兼容所需要的。此外，從概念上講，它似乎更正確。
是否有一些打字稿黑魔法讓它按照我想要的方式運行？現在我將使用as.
編輯：Array<string|number>只是作為一個例子，我經常使用這種模式，所以我想解決作業Array<T>哪里T是任意的，可以像工會string|number，但不僅僅是。
uj5u.com熱心網友回復：
您可以T在回傳型別時更改要分發的函式的定義。所以這意味著當映射一個聯合（例如number | string）時，您將獲得Wrapped每個聯合成分的實體化的聯合（所以Wrapped<number> | Wrapped<string>）而不是聯合的實體化Wrapped（所以不是Wrapped<string | number>）
type DistraibutiveWrapped<T> = T extends T ? Wrap<T> : Wrap<T>
function wrapIt<T>(t: T): DistraibutiveWrapped<T> {
return { value: t} as DistraibutiveWrapped<T>
}
游樂場鏈接
uj5u.com熱心網友回復：
使用顯式型別檢查？
type Wrap<T> = {
value: T
}
function wrapIt<T>(t: T): Wrap<T> {
return { value: t }
}
const arr: Array<string | number> = ["a", 1]
const arr2: Array<Wrap<string | number>> = arr.map(wrapIt)
const arr3: Array<Wrap<string> | Wrap<number>> = arr.map(x => {
switch (typeof x) {
case 'string':
return wrapIt<string>(x);
case 'number':
return wrapIt<number>(x);
default:
return wrapIt(x);
}
});
uj5u.com熱心網友回復：
您可以創建額外的功能并多載它：
type Wrap<T> = {
value: T
}
function wrapIt<T>(t: T): Wrap<T> {
return { value: t }
}
const arr: Array<string | number> = ["a", 1]
function map<Item,>(arr: Item[]): Array<Wrap<string> | Wrap<number>>
function map<Item,>(arr: Item[]) {
return arr.map(wrapIt)
}
// (Wrap<string> | Wrap<number>)[] which is equivalent to Array<Wrap<string> | Wrap<number>>, just different syntax
const result = map(['hello', 42])
操場
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/407272.html
標籤：