TypeScript - ts(7053)：元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引

Question

在 TypeScript 中，我声明了一个这样的接口：

 export default interface MyDTO {
    readonly num: string;
    readonly entitle: string;
    readonly trb: string;
    readonly ucr: string;
    readonly dcr: string;
    readonly udm?: string;
    readonly ddm?: string;
}

通过一个函数，我想访问一个属性的值，该属性的名称包含在一个变量中。

 private doSomething(dto: MyDTO, property: string): any {
    let label: any;

    if (['dcr', 'ddm'].includes(property)) {
        label = doSomethingElse(dto[property]);
    } else {
        label = dto[property];
    }

    return label;
}

不幸的是，TypeScript 给我以下错误信息：

元素隐式具有“任何”类型，因为类型“字符串”的表达式不能用于索引类型“MyDTO”。在类型“MyDTO”上找不到参数类型为“string”的索引签名.ts(7053)

有人有想法吗？

谢谢

原文由 Answerrer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这样做的原因是因为 MyDTO 具有明确命名的属性，但您使用的是通用字符串作为索引，因此 TypeScript 表示它不能保证将任何字符串传递到您的 doSomething 函数将实际匹配您界面上的属性名称。

TypeScript 2.1 中引入的一个很好的解决方法是 keyof 。这允许您明确键入某些内容作为某个类/接口的键。

这将 A. 消除您看到的 TS 错误，并且 B. 还检查以确保函数的任何调用者实际上传递了有效密钥。

 export default interface MyDTO {
    readonly num: string;
    readonly entitle: string;
    readonly trb: string;
    readonly ucr: string;
    readonly dcr: string;
    readonly udm?: string;
    readonly ddm?: string;
}

function doSomething(dto: MyDTO, property: keyof MyDTO): any {
    let label: any;

    if (['dcr', 'ddm'].includes(property)) {
        label = doSomethingElse(dto[property]);
    } else {
        label = dto[property];
    }

    return label;
}

doSomething(obj, "foo") // is a TS error
doSomething(obj, "num") // is valid

原文由 mhodges 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

@mhodges，根据您的建议，这是我修改后的功能，它似乎运行良好。但是在以下情况下，我必须添加“as string”，否则会出现以下错误：

输入’字符串| keyof V ‘不能用于索引类型 ‘V’.ts (2536)

 public getDefaultComparator(property: keyof V | string, v1: V, v2: V): number {
    let compareReturn = 0;
    if (v1.hasOwnProperty(property)) {
      const compareValue1 = v1[property as string];
      const compareValue2 = v2[property as string];
      if (compareValue1 > compareValue2) {
        compareReturn = 1;
      } else if (compareValue1 < compareValue2) {
        compareReturn = -1;
      }
    }

    return compareReturn;
  }

原文由 Answerrer 发布，翻译遵循 CC BY-SA 4.0 许可协议