typescript - 有什么方法可以指定一个数组同时包含父类和子类项

Question

假设我有以下层次结构:

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;
}

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

Answer 1

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

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

这是一个包含Cmp 和ContainerCmp 的数组。

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

编辑:在答案中添加了@NitzanTomer 建议。