TypeScript 4.4.3（Angular13）：如何通过字符串键提取对应值

核心错误分析 #

1. 类型不匹配：TempArray的定义与实际数据不符，且listOfTempArray被错误声明为数组类型（数组只能用数字索引，字符串索引会触发类型错误）
2. 属性拼写错误：代码中使用x.names，但Item类的属性是name
3. 键值逻辑错误：试图用对象的name值（如Radha）作为键，实际键应为class2/class3/class4这类字符串
4. 未明确数组类型：listOfDiseaseNames未声明类型，被TypeScript推断为never[]，导致push操作报错

修复后的完整代码 #

model.ts

export class Item {
    name: string;
    age: string;
    Id: number;
}

// 用类型别名定义索引对象，键为字符串，值为单个Item（匹配实际数据结构）
export type TempArray = { 
  [key: string]: Item;
};

component.ts

import { Item, TempArray } from './model';

// 修正类型：声明为TempArray对象（而非数组）
listOfTempArray: TempArray = {
  'class2': { name: 'abc', age: 'ten', Id: 3398 },
  'class3': { name: 'Radha', age: 'two', Id: 9876 },
  'class4': { name: 'hjgf', age: 'five', Id: 8766 }
};

listOfItems: Item[] = [];
// 明确声明为字符串数组，避免推断为never[]
listOfDiseaseNames: string[] = [];

FetchData() {
    // 传入目标键，这里用'class4'，可替换为从ngModel获取的字符串
    const targetKey: keyof TempArray = 'class4'; 
    // 若listOfItems是数组，需将单个Item包装为数组赋值；若只需单个对象，可修改listOfItems类型为Item
    this.listOfItems = [this.listOfTempArray[targetKey]];

    this.listOfItems.forEach(item => {
      const lowerCaseName = item.name.toLowerCase();
      if (this.listOfDiseaseNames.indexOf(lowerCaseName) === -1) {
        this.listOfDiseaseNames.push(lowerCaseName);
      }
    });
}

关键修复点说明 #

1. 修正索引对象类型：将TempArray从类改为类型别名，明确值类型为Item，同时把listOfTempArray的类型从数组改为TempArray对象，这样就能用字符串键正常索引
2. 修正属性名：把x.names改为item.name，匹配Item类的属性定义
3. 明确数组类型：给listOfDiseaseNames加上string[]类型声明，解决never类型赋值错误
4. 修正键值逻辑：使用正确的对象键（如class4）而非属性值作为索引

内容的提问来源于stack exchange，提问作者gow_r