TypeScript编码收获（七）——可索引类型

接口约束了变量，动态添加属性，可以使用可索引类型

// 获取完整的角色信息
export const getRoleMessage = function (roles: RoleTable): RoleTable {
  return roles.map((role: IRoleTableItem) => {
    role.pageArr = [];
    pageRoleRelations.forEach((pageRoleRelation: IPageRoleRelationItem) => {
      if (role.roleId === pageRoleRelation.roleId) {
        pages.forEach((page: IPageTableItem) => {
          if (page.pageId === pageRoleRelation.pageId) {
            (role.pageArr as IPageTableItem[]).push(page);
          }
        });
      }
    });
    role.pageArr = getPageMessage(role.pageArr);
    return role;
  });
};

export const roles: RoleTable = [
  {
    roleId: 1,
    name: "管理员",
  },
  {
    roleId: 2,
    name: "普通用户",
  },
];

export interface IRoleTableItem {
  roleId: number;
  name: string;
  // 注意可索引类型必须包括这个interface所有属性的ts类型
  [pageArr: string]: IPageTableItem[] | string | number;
}
export type RoleTable = Array<IRoleTableItem>;

访问对象属性有两种方式一种“.”的形式，另一种[索引]的形式，可以使用可索引类型

	const getChildren = function (res: AxiosResponse) {
  const result:Array<RouteRecordRaw> = [];
  res.data.content.forEach((item:IPageSqlItem) => {
    if (item.component) {
      result.push({
        path: item.path,
        component: components[item.component],
        name: item.name,
        meta: item.mate,
      });
    }
  });
  return result;
};

// 远程可配置页面
export const components: {
  [k: string]: () => Promise<typeof import("*.vue")>;
} = {
  Index11,
  Index12,
  Index13,
  Index14,
  Index21,
  Index22,
  Index23,
  Index24,
  Index31,
  Index32,
  Index33,
  Index34,
  CheckResume,
  Upload,
  Home,
  Index,
  RoleManagement,
  Index35,
};