我有这些接口：

interface IComponent {
  type: string;
  text: string;
}

interface IComponents {
  cc: IComponent;
  lajota: IComponent;
}

interface IMain {
  components: IComponents
}

而且它工作得很好！但是现在我需要添加一个新的叫做“caneta”的component。
所以我用.components.caneta来访问它，但是这个新组件只有一个属性：

interface IComponentCaneta {
  property: string;
}  

// Add the new component to be used on IMain
interface IComponents {
  cc?: IComponent;
  lajota?: IComponent;
  caneta?: IComponentCaneta;
}

问题是我有一个方法，它根据属性type执行一些工作，例如：

//for each component I have in components objects 
function myFunc(component: IComponent) {
_.each(components (val, key) => {
  if (key === 'cc') {...}
  else if (value?.type === 'xxx') {  <---- HERE flags error
    components[key].type = 'xxxx'
  }
})
}

当我添加新组件caneta时，Typescript抱怨说：
类型“IComponentCaneta”上不存在属性“type”。
尝试将type设置为可选，但不起作用。
在这种情况下，什么是正确的做法？
有没有一种方法可以显式地说明“类型IComponent的属性将是'X' 'Y'或'Z'。

function myFunc(component: IComponent ['cc' or 'lajota'])

我尝试过但失败了：

// make type optional
interface IComponent {
  type?: string;
  text: string;
}

// try to infer the object (cc, loja, caneta)
switch (type) {
  case 'cc':
    // ...
    break;
  case 'lajota':
    // ...
    break;
  default: //'caneta'
    // ...
    break;
}

//using IF/ELSE 
if (type === 'cc') {.../}
else if(type === 'lajota') {...}
else if(type === 'caneta') {...}