convert an large interface to an small interface in typescript

Question

I have an interface called IHistoryData

export interface IHistoryData {
    CourseId: string,
    CourseName: string,
    Duration: number,
    IsMandatory: boolean,
    CompetencyList: string[],
    IsActive:boolean
}

and a second small interface called ICurrentData,

export interface ICurrentData {
    CourseId: string,
    CourseName: string,
    Duration: number,
}

ICurrentData properties are subset of IHistoryData properties.

Now I am trying to convert a IHistoryData[] into ICurrentData[] using ES6 destructing feature but unable to find any working solution. Is it possible to convert a large interface into a small interface using destructing??

I am using TS 2.3.3 and angular 4.4

Answer 1

You can destructure as part of the mapping, or you could just map... there isn't a huge amount of difference either way so choose what is most readable.

For all the examples, I'm using the source data in the variable input.

Quick Type Change

If you just need to change the type, you don't actually need to map as you can assign the input to ICurrentData[] because it is a compatible type. The data technically still exists on input, but when you use output it will only autocomplete the the subset of properties.

const output: ICurrentData[] = input;

Destructuring

Where the property names are the same, you can destructure like this...

const output: ICurrentData[] = input.map((history) => {
  const { CourseId, CourseName, Duration } = history;
  return {
    CourseId,
    CourseName,
    Duration
  };
});

alert(JSON.stringify(output));

Negative Destructuring

You could also do a "negative destructuring" by listing the items you don't want to map in the destructuring assignment- and using a rest argument to grab everything you do want. It's a neat trick, but I don't like the coupling to "stuff you don't want". If you only need to eliminate one or two properties out of 20, it could be an option.

const output: ICurrentData[] = input.map((history) => {
  const { IsMandatory, CompetencyList, IsActive, ...data } = history;
  return data;
});

alert(JSON.stringify(output));

Different Property Names

If the source data has different names for the properties (for example, A, B, C) you can map that as part of the destructuring.

const output: ICurrentData[] = input.map((history) => {
  const { A: CourseId, B: CourseName, C: Duration } = history;
  return {
    CourseId,
    CourseName,
    Duration
  };
});

alert(JSON.stringify(output));

Simple Map

Sometimes, simple is beautiful. This is a simple map, using the same properties as the previous example.

const output: ICurrentData[] = input.map((history) => {
  return {
    CourseId: history.A,
    CourseName: history.B,
    Duration: history.C
  };
});

alert(JSON.stringify(output));