typescript - 从窄类型和宽类型数组推断类型

Question

type ItemNew = { text: string };
type ItemExist = { text: string, id: number };
 
function fn(
  itemsNew: Array<ItemNew>,
  itemsExist: Array<ItemExist>
) {
  const items = [...itemsNew, ...itemsExist];
  // const items: ItemNew[]
}

为什么 items是ItemNew[]而不是 Array<ItemNew | ItemExist> ？似乎有关宽类型 ( ItemExist) 的信息完全丢失了。

Answer 1

考虑这个例子:

type ItemNew = { text: string };
type ItemExist = { text: string, id: number };

type Union = ItemNew | ItemExist
declare var union: Union

const elem = union.text // only text property is allowed

因为 text对于您被允许获得的两种元素都很常见 text属性(property)。

因为没有人知道var union包含 id或不。允许id prop 在这种情况下将是不健全的(可能导致运行时错误)。

让我们回到你的例子:

type ItemNew = { text: string };
type ItemExist = { text: string, id: number };

function fn(
    itemsNew: Array<ItemNew>,
    itemsExist: Array<ItemExist>
) {
    const items =  [...itemsNew, ...itemsExist];
}

事实上items是 Array<ItemNew> | Array<ItemExist> 的并集.应用相同的规则。属性(property)text是唯一一个安全的属性。

如果你想能够得到id Proeprty 你可能不会使用这个助手:

type ItemNew = { text: string };
type ItemExist = { text: string, id: number };

// credit goes to https://stackoverflow.com/questions/65805600/type-union-not-checking-for-excess-properties#answer-65805753
type UnionKeys<T> = T extends T ? keyof T : never;
type StrictUnionHelper<T, TAll> =
    T extends any
    ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>> : never;

type StrictUnion<T> = StrictUnionHelper<T, T>


function fn(
    itemsNew: Array<ItemNew>,
    itemsExist: Array<ItemExist>
) {
    const items: Array<StrictUnion<ItemNew | ItemExist>> = [...itemsNew, ...itemsExist];
    items[0].text // ok
    items[0].id // number | undefined
}