关于 TypeScript 联合类型的困惑

如何解决关于 TypeScript 联合类型的困惑

我希望对象 (groupItems) 的某个属性是字符串数组或对象数组，因此我创建了以下接口：

 interface PanelItem {
      groupTitle: string;
      groupItems: string[] | {text: string,type: string}[];
    }

我创建了一个 TypeScript 变量 panelContent: PanelItem[] = [] 并尝试向其中添加项目

this.panelContent.push({groupTitle: 'abc',groupItems: ['item3',{text: 'item',type: 'action'},'item4']});

但 TypeScript 抱怨这句话

TS2322: Type '(string | { text: string; type: string; })[]' is not assignable to type 'string[] | { text: string; type: string; }[]'. 
  Type '(string | { text: string; type: string; })[]' is not assignable to type 'string[]'. 
    Type 'string | { text: string; type: string; }' is not assignable to type 'string'. 
      Type '{ text: string; type: string; }' is not assignable to type 'string'. 

所以我把界面改成了

 interface PanelItem {
          groupTitle: string;
          groupItems: (string | {text: string,type: 'action'})[];
        }

和 TypeScript 不再抱怨。 有人可以解释一下这两种界面语法之间的区别吗？