在打字稿中将大接口转换为小接口

Question

我有一个名为IHistoryData的接口

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

第二个小接口称为 ICurrentData，

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

ICurrentData属性是IHistoryData属性的子集。

现在我尝试使用ES6 破坏功能将IHistoryData[]转换为ICurrentData[]，但无法找到任何可行的解决方案。是否可以使用析构将大接口转换为小接口？

我正在使用 TS 2.3.3 和 Angular 4.4

Answer 1

您可以将解构作为映射的一部分，也可以只进行映射...两种方式都没有很大的差异，因此请选择最具可读性的内容。

对于所有示例，我都使用变量中的源数据input。

快速换型

如果您只需要更改类型，则实际上不需要映射，因为您可以将其分配给，input因为ICurrentData[]它是兼容类型。从技术上讲，数据仍然存在于输入中，但是当您使用output它时，它只会自动完成属性的子集。

const output: ICurrentData[] = input;

解构

如果属性名称相同，您可以像这样解构......

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

alert(JSON.stringify(output));

消极解构

您还可以通过列出您不想在解构分配中映射的项目来进行“负解构”，并使用剩余参数来获取您想要的所有内容。这是一个巧妙的技巧，但我不喜欢将“你不想要的东西”耦合起来。如果您只需要消除 20 个属性中的一两个，那么它可能是一个选择。

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

alert(JSON.stringify(output));

不同的属性名称

如果源数据的属性具有不同的名称（例如，A、B、C），您可以将其映射为解构的一部分。

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

alert(JSON.stringify(output));

简单地图

有时候，简单就是美。这是一个简单的地图，使用与前面的示例相同的属性。

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

alert(JSON.stringify(output));