javascript - 在 TypeScript 中键入对象数组

Question

使用 typescript 键入对象数组:

接口(interface)如下:

export interface IUser {
  id: string;
  order: number;
}

export interface IUsersLogin {
  result: number;
  UserId: string;
}

export interface IUsersUsers {
  id: number;
  order: number;
}

export interface IOriginalData {
  Users?: IUser[];
  UsersLogins?: IUsersLogin[];
  UsersUsers?: IUsersUsers[];
}

这里我使用这个接口(interface)创建了一个对象:

const originalData: IOriginalData = {
  Users: [
    {
      id: "e4e2bb46-c210-4a47-9e84-f45c789fcec1",
      order: 1
    },
    {
      id: "b95274c9-3d26-4ce3-98b2-77dce5bd7aae",
      order: 2
    }
  ],
  UsersLogins: [
    {
      result: 1,
      UserId: "e4e2bb46-c210-4a47-9e84-f45c789fcec1"
    },
    {
      result: 0,
      UserId: "b95274c9-3d26-4ce3-98b2-77dce5bd7aae"
    }
  ],
  UsersUsers: [
    {
      id: 1,
      order: 0
    },
    {
      id: 2,
      order: 0
    }
  ]
};

在这里我操纵这个对象的数据将它插入另一个对象:

interface IPushedDataItem {
  data: IUser | IUsersLogin | IUsersUsers;
}

type TypePushedData = Array<IPushedDataItem>;

let pushedData: TypePushedData = [];
Object.keys(originalData).forEach(item => {
  pushedData.push({
    data: originalData[item]
  });
});

在这个过程中，我无法正确输入pushedData，它会提示data:originalData[item]。

您可以在 TypeScript playgound 中找到它:

http://www.typescriptlang.org/play/#code/KYDwDg9gTgLgBASwHY2FAZgQwMbDgSQFUBnNOAbwCg5EATALjmJimQHMBuauaWtRpAFcAtgCM0XAL6VKoSLEQo0WXARJpiAGQhtkFblGDFBAGxgCR4qFxrqo+BkxbspMudHjJUGHHiKkoYjtifRoERyExCW5efjhIq1dZcA9FbxU-AHlWXSRMEwARTBhMULhggH5GfzQAbQBdG3KArR1kYiq1Fu1chqbgyuqBlr7KaUpsCCRmHhzkfKKS6uyEXIXi0oBeMuDGWu4aKhpjukYAImAAFmAAJlFRS4A2AFpsG4BGAAZny8xLgHZngBOYAADkuz3QlwArNh-qCgehcNh3mcADQHY6xKCMd6YyQYk5HE6nOBnURA6E3f6XbBA54AZloNxetOADOBoNEN2e-3+tFw0NEtH+mEwwHRmJo2MYN3x3HqhOaGh67T2mOJJ0MxjMuKVJzsDnOV1u9yerw+31+AOBYIhUNh8MRyNR+P1ZS1RlM5jgn3dtgCRrJFKpNLpjOZrNwHKBXJ5fIFwCFIrFEvlNEV3GGGnVRKlpPe-tmfBxvrdGvz4VlRZlZZO0gzYy4lC8yl8BAACoJiAALYC0RaYfCoYRlWgbIYBOAAHy6KraSBnc8CwSSMAAnmA8AAVTfALu9-uDuDbACCUCgmHXAB58Ae+wONsPgMIAHzNkzAeBgbsPweMXct3vI8NhPOBRkyUQACtgGwGAADoAGtgHXYgAApoFWeZCg2ABKeD0GgABRHAezQhARxPV8yh-Q9HxKeDaLIzU4HHJZZiwvIcJKWoKJfepuEkXCpGEyggA

欢迎任何帮助!

Answer 1

1. 扩展 originalData 的定义以支持索引器:

const originalData: IOriginalData & { [key: string]: (IUser | IUsersLogin | IUsersUsers)[] }

1. 在将它们添加到 pushedData 时，您必须遍历按键访问的项目数组，因为它不是单个项目:

Object.keys(originalData).forEach(item => {
  const subItems = originalData[item];
  if (subItems) {
    for (const subItem of originalData[item]) {
      pushedData.push({
        data: subItem
      });
    }
  }
});

整体代码如下:

export interface IUser {
  id: string;
  order: number;
}

export interface IUsersLogin {
  result: number;
  UserId: string;
}

export interface IUsersUsers {
  id: number;
  order: number;
}

export interface IOriginalData {
  Users?: IUser[];
  UsersLogins?: IUsersLogin[];
  UsersUsers?: IUsersUsers[];
}

const originalData: IOriginalData & { [key: string]: (IUser | IUsersLogin | IUsersUsers)[] } = {
  Users: [
    {
      id: "e4e2bb46-c210-4a47-9e84-f45c789fcec1",
      order: 1
    },
    {
      id: "b95274c9-3d26-4ce3-98b2-77dce5bd7aae",
      order: 2
    }
  ],
  UsersLogins: [
    {
      result: 1,
      UserId: "e4e2bb46-c210-4a47-9e84-f45c789fcec1"
    },
    {
      result: 0,
      UserId: "b95274c9-3d26-4ce3-98b2-77dce5bd7aae"
    }
  ],
  UsersUsers: [
    {
      id: 1,
      order: 0
    },
    {
      id: 2,
      order: 0
    }
  ]
};

interface IPushedDataItem {
  data: IUser | IUsersLogin | IUsersUsers;
}

type TypePushedData = Array<IPushedDataItem>;

let pushedData: TypePushedData = [];
Object.keys(originalData).forEach(item => {
  const subItems = originalData[item];
  if (subItems) {
    for (const subItem of originalData[item]) {
      pushedData.push({
        data: subItem
      });
    }
  }
});

更新

如果你想对字符串键进行更严格的检查，你可以使用in keyof语法来定义它:

const originalData: IOriginalData & { [key in keyof IOriginalData]: (IUser | IUsersLogin | IUsersUsers)[] }

尽管它还需要将 Object.keys(originalData) 的结果转换为 (keyof IOriginalData)[]。

整体代码如下:

export interface IUser {
  id: string;
  order: number;
}

export interface IUsersLogin {
  result: number;
  UserId: string;
}

export interface IUsersUsers {
  id: number;
  order: number;
}

export interface IOriginalData {
  Users?: IUser[];
  UsersLogins?: IUsersLogin[];
  UsersUsers?: IUsersUsers[];
}

export type OriginalDataUnion = IUser | IUsersLogin | IUsersUsers;

const originalData: IOriginalData & { [key in keyof IOriginalData]: OriginalDataUnion[] } = {
  Users: [
    {
      id: "e4e2bb46-c210-4a47-9e84-f45c789fcec1",
      order: 1
    },
    {
      id: "b95274c9-3d26-4ce3-98b2-77dce5bd7aae",
      order: 2
    }
  ],
  UsersLogins: [
    {
      result: 1,
      UserId: "e4e2bb46-c210-4a47-9e84-f45c789fcec1"
    },
    {
      result: 0,
      UserId: "b95274c9-3d26-4ce3-98b2-77dce5bd7aae"
    }
  ],
  UsersUsers: [
    {
      id: 1,
      order: 0
    },
    {
      id: 2,
      order: 0
    }
  ]
};

interface IPushedDataItem {
  data: OriginalDataUnion;
}

type TypePushedData = Array<IPushedDataItem>;

let pushedData: TypePushedData = [];
for (const item of Object.keys(originalData) as (keyof IOriginalData)[]) {
  const subItems = originalData[item];
  if (subItems) {
    for (const subItem of subItems) {
      pushedData.push({
        data: subItem
      });
    }    
  }
}