Typescript convert a type described by an Interface to another?

Question

I know that types exists for a reason.

But my collegues'd like to hide the leaky abstraction i have in one of my component. I am using a big config interface to hold all the information my main component needs to work and one of the properties is an array or listable elements that'll form a multiselect. Basically my array has a type like this:

export interface Column {
  label: string;
  property: string;
}

But we are using a 3rd party multiselect component , which accepts only it's own typed array as options. Like:

export interface IMultiSelectOption {
  id: any;
  name: string;
  disabled?: boolean;
  isLabel?: boolean;
  parentId?: any;
  params?: any;
  classes?: string;
  image?: string;
}

In our case id -> property , and name -> label . But! In order for the select option to work it needs to have this key-value pairs to work.

How can I convert our own type to the type of the expected multiselect to work? I can't just make another list as type IMultiselectOption b/c that wouldn't solve the leaky abstraction issue. I cannot convert it in my recieving component where all the magic happens (basically this is the curtain that hides all the magic) b/c type Column[] props doesn't exists on type IMultiselectOption[]

Answer 1

In my case I also had to use several type for the same data, but represented/organised diferently for frontend and backend uses.

I just have a Helper Service conversion where I convert my Object like so:

ColumnToIMultiSelectOption(column: Column): IMultiSelectOption {
   return <IMultiSelectOption>{
      id: column.property,
      name: column.label,
   }
}

Answer 2

The issue is solved by embedding the 3rd party component into another helper component. This way I was able to manipulate the data and tweak it as multiselect component needs it. Thanks to @Eliseo this idea was the winner.

Nothing fancy. Just a 3 input 1 output component which emits the changes then listens to them in the consuming component.