typescript - 有没有办法指定一个数组同时包含父类和子类项

假设我有以下层次结构：

interface Cmp {
  guid: string;
}

interface ContainerCmp extends Cmp {
  layout: string;
}

现在，我有一个可以是Cmp或ContainerCmp类型的项数组。这意味着数组中的某些项将缺少layout属性。
现在typescript不允许我为items指定这两种类型：

const items: Cmp[] | ContainerCmp[] = [];
items.forEach((item) => {
  if (isContainerCmp(item)) {
    console.log(item.layout);
  }
});

产生错误：

Error:(28, 1) TS2349:Cannot invoke an expression whose type lacks a call signature.
Type '{ (callbackfn: (this: void, value: Cmp, index: number, array: Cmp[]) => void): void;
(callbackfn:...' has no compatible call signatures.

所以我指定了最上面的Cmp类型并使用类型保护：

const items: Cmp[] = [];
items.forEach((item) => {
  if (isContainerCmp(item)) {
    console.log(item.layout);
  }
});

function isContainerCmp(cmp: Cmp | ContainerCmp): cmp is ContainerCmp {
  return (<ContainerCmp>cmp).layout !== undefined;
}

我想知道这是否是正确的方法，是否有其他方法可以为数组指定这两种类型？

最佳答案

这是一个只有Cmp或ContainerCmp的数组。

const items: Cmp[] | ContainerCmp[] = [];

这是一个同时具有Cmp和ContainerCmp的数组。

const items: (Cmp | ContainerCmp)[] = [];
// or
const items: Array<Cmp | ContainerCmp> = [];

编辑：在答案中添加了@nitzantomer建议。

关于typescript - 有没有办法指定一个数组同时包含父类和子类项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44695905/