TypeScript - ts(7053) : Element implicitly has an 'any' type because expression of type 'string' can't be used to index

问题

In TypeScript, I declare an interface like this:

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;
}

With a function, I would like to access the value of a property, whose name is contained in a variable.

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;
}

Unfortunately, TypeScript gives me the following error message :

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'MyDTO'. No index signature with a parameter of type 'string' was found on type 'MyDTO'.ts(7053)

Anyone have an idea, please ?

Thank you

回答1:

The reason for this is because MyDTO has explicitly named properties, but you're using a generic string as an index, so TypeScript is saying that it can't guarantee that whatever string is passed into your doSomething function will actually match a property name on your interface.

An excellent workaround for this that was introduced in TypeScript 2.1 is keyof. This allows you to explicitly type something as a key of a certain class/interface.

This will A. get rid of the TS error you're seeing, and B. also check to make sure that any callers of your function actually pass a valid key.

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

回答2:

@mhodges, with your suggestions, here is my modified function which seems to work well. However in the following case, I had to add the "as string" otherwise I have the following error:

Type 'string | keyof V 'cannot be used to index type' 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;
  }

来源：https://stackoverflow.com/questions/62759505/typescript-ts7053-element-implicitly-has-an-any-type-because-expression