在 Typescript 中指定参数类型的值

Question

I have these interfaces:

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

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

interface IMain {
  components: IComponents
}

And it is working fine! But now I need to add a new component called "caneta".
SO I'll access this with .components.caneta . But this new component will have a single attribute:

interface IComponentCaneta {
  property: string;
}  

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

The problem is I have a method that do some work depending on the attribute type like:

//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'
  }
})
}

When I add the new component caneta , Typescript complains saying:

Property 'type' does not exist on type 'IComponentCaneta'.

Tried to make type optional, but didn't work.

What would be the right thing to do in this situation?
Is there a way to explicitly say that "The attribute of type IComponent will be 'X' 'Y' or 'Z'. Something like

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

Things I tried and failed:

// 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') {...}

Answer 1

I found a solution using Object Entries and forEach .
I don't know if there is a "down side" yet. I just wanted a way to iterate through the components and make typescript happy.
The only solution I could think of was try to infer the object so TS could "see" the right attributes.

function myFunc (components: IComponents) {
    Object.entries(components).forEach(([key, value], index) => {
        if (key === 'caneta') {
            components[key].property = 'Hello World';
        } else if(value?.type === 'text') {  <--- No longer gives me errors
            components[key].type = 'NEW TYPE'
        }
    });
}

One thing that kind worries me is that when I was trying this code on Typescript Playground it gave me the following error/warning:

Object is possibly 'undefined'.

on the following lines:

components[key].property = 'Hello World';

and
components[key].type = 'NEW TYPE'

No errors on my vscode/lint though