如果我尝试使用 Angular 中的方括号动态访问属性值，Typescript 将显示错误

Question

How to Fix No index signature with a parameter of type 'string' issue in Angular

Getting ESLint error here: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Client'. No index signature with a parameter of type 'string' was found on type 'Row'

dynamic-table.component.html

<table>
  <tr>
    <th *ngFor="let i of headers">
      {{i.name}}
    </th>
  </tr>
  <tr *ngFor="let row of rows">
    <td *ngFor="let head of headers">
      {{row[head.name]}} <!-- Getting ESLint error here : Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Client'.
  No index signature with a parameter of type 'string' was found on type 'Row'. -->
    </td>
  </tr>
</table>

dynamic-table.component.ts

interface Header {
 displayName: string,
 name: string
}

interface Row {
 empId: string,
 empName: string,
 salary: string
}

@Component({
  selector: "dynamic-table",
  templateUrl: "./dynamic-table.component.html",
  styleUrls: []
})
export class DynamicTableComponent {
  title = "Dynamic Table";

  headers: Header[] = [];
  rows: Row[] = [];

  constructor() {
    this.headers = [
      {
        displayName: "Emp Name",
        name: "empName"
      },
      {
        displayName: "Emp ID",
        name: "empId"
      },
      {
        displayName: "Salary",
        name: "salary"
      }
    ];
    this.rows = [
      {
        empId: "1",
        empName: "red",
        salary: "10000"
      },
      {
        empId: "1",
        empName: "red",
        salary: "50000"
      },
      {
        empId: "1",
        empName: "red",
        salary: "30000"
      }
    ];
  }
}

Answer 1

In version 13 Angular CLI enables TypeScript strict mode on newly created projects. That enables (among other) the noImplicitAny flag.

Since header.name could be any string TypeScript has no way to know the type of row[header.name] so it's assigning it to any (and is complaining about that).

To solve the issue you can do any of the followings:

(1) declare an index signature on your Row interface:

interface Row {
  [key: string]: string,
  empId: string,
  empName: string,
  salary: string
}

Here you're telling TS that any property on Row accessed through a string will have a string type.

(2) restrict the type of Header.name to a literal union of Row 's keys:

interface Header {
    displayName: string,
    name: keyof Row
}

Here you're declaring the type of Header.name as "empId" | "empName" | "salary" "empId" | "empName" | "salary" "empId" | "empName" | "salary" (no other value will be allowed).

(3) Disable the noImplicitAny flag by setting "noImplicitAny": false in your tsconfig.json (obviously this will disable the check at all).