元素隐式具有“any”类型，因为类型为“string”的表达式不能用于索引

尝试一个React项目的TypeScript，我被这个错误困住了:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }'.
  No index signature with a parameter of type 'string' was found on type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }'

当我试图在我的组件中过滤数组时出现

.filter(({ name }) => plotOptions[name]);

到目前为止，我查看了文章“在TypeScript中索引对象”(https://dev.to/kingdaro/indexing-objects-in-typescript-1cgi)，因为它有类似的错误，但我尝试将索引签名添加到类型plotTypes，我仍然得到相同的错误。

我的组件代码:

import React, { Component } from "react";
import createPlotlyComponent from "react-plotly.js/factory";
import Plotly from "plotly.js-basic-dist";
const Plot = createPlotlyComponent(Plotly);

interface IProps {
  data: any;
}

interface IState {
  [key: string]: plotTypes;
  plotOptions: plotTypes;
}

type plotTypes = {
  [key: string]: boolean;
  train_1: boolean;
  train_2: boolean;
  train_3: boolean;
  train_4: boolean;
};

interface trainInfo {
  name: string;
  x: Array<number>;
  y: Array<number>;
  type: string;
  mode: string;
}

class FiltrationPlots extends Component<IProps, IState> {
  readonly state = {
    plotOptions: {
      train_1: true,
      train_2: true,
      train_3: true,
      train_4: true
    }
  };
  render() {
    const { data } = this.props;
    const { plotOptions } = this.state;

    if (data.filtrationData) {
      const plotData: Array<trainInfo> = [
        {
          name: "train_1",
          x: data.filtrationData.map((i: any) => i["1-CumVol"]),
          y: data.filtrationData.map((i: any) => i["1-PressureA"]),
          type: "scatter",
          mode: "lines"
        },
        {
          name: "train_2",
          x: data.filtrationData.map((i: any) => i["2-CumVol"]),
          y: data.filtrationData.map((i: any) => i["2-PressureA"]),
          type: "scatter",
          mode: "lines"
        },
        {
          name: "train_3",
          x: data.filtrationData.map((i: any) => i["3-CumVol"]),
          y: data.filtrationData.map((i: any) => i["3-PressureA"]),
          type: "scatter",
          mode: "lines"
        },
        {
          name: "train_4",
          x: data.filtrationData.map((i: any) => i["4-CumVol"]),
          y: data.filtrationData.map((i: any) => i["4-PressureA"]),
          type: "scatter",
          mode: "lines"
        }
      ].filter(({ name }) => plotOptions[name]);
      return (
        <Plot
          data={plotData}
          layout={{ width: 1000, height: 1000, title: "A Fancy Plot" }}
        />
      );
    } else {
      return <h1>No Data Loaded</h1>;
    }
  }
}

export default FiltrationPlots;

当前回答

对于将来偶然发现这个的人:

如果你得到TypeScript错误

“…字符串类型的表达式不能用于索引…

然后简单地指定“string类型的表达式”是该对象类型的键。例如,

const someObj:ObjectType = data;
const field = 'username';

// This gives an error
const temp = someObj[field];

// Solution 1: When the type of the object is known
const temp = someObj[field as keyof ObjectType]

// Solution 2: When the type of the object is not known
const temp = someObj[field as keyof typeof someObj]

2021-09-15 19:08:59

其他回答

我对Alex McKay的函数/用法做了一些小改动，我认为这样可以让它更容易理解为什么它可以工作，同时也遵循了定义前不使用的规则。

首先，定义这个函数来使用:

const getKeyValue = function<T extends object, U extends keyof T> (obj: T, key: U) { return obj[key] }

在我写它的方式中，函数的泛型首先列出对象，然后是对象上的属性(这些可以以任何顺序出现，但如果你在T扩展对象之前指定U扩展T的key，你就打破了定义前不使用的规则，而且对象在前，属性在后也是有意义的。最后，我使用了更常用的函数语法，而不是箭头操作符(=>)。

不管怎样，通过这些修改，你可以像这样使用它:

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "John Smith",
  age: 20
};

getKeyValue(user, "name")

同样，我觉得这样更有可读性。

2020-10-25 16:07:15

作为最后的手段，你可以通过在tsconfig.json中设置"suppressImplicitAnyIndexErrors": true来消除这个错误

{
  "compilerOptions": {
    "suppressImplicitAnyIndexErrors": true,
  }
}

2022-12-14 10:29:50

// bad
const _getKeyValue = (key: string) => (obj: object) => obj[key];

// better
const _getKeyValue_ = (key: string) => (obj: Record<string, any>) => obj[key];

// best
const getKeyValue = <T extends object, U extends keyof T>(key: U) => (obj: T) =>
  obj[key];

坏-错误的原因是对象类型默认为空对象。因此，不可能使用字符串类型来索引{}。

更好的是，错误消失的原因是因为现在我们告诉编译器obj参数将是字符串/值(string/any)对的集合。然而，我们正在使用任何类型，所以我们可以做得更好。

Best - T扩展空对象。U扩展了T的键，所以U在T上永远存在，所以它可以作为一个查找值。

下面是一个完整的例子:

我已经切换了泛型的顺序(U extends keyof T现在出现在T extends object之前)，以突出泛型的顺序并不重要，你应该选择一个对你的函数最有意义的顺序。

const getKeyValue = <U extends keyof T, T extends object>(key: U) => (obj: T) =>
  obj[key];

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "John Smith",
  age: 20
};

const getUserName = getKeyValue<keyof User, User>("name")(user);

// => 'John Smith'

替代语法

const getKeyValue = <T, K extends keyof T>(obj: T, key: K): T[K] => obj[key];

2020-02-18 05:49:17

public getUserName():字符串{

const accessToken = this.getAccessToken();
const claims:any = this.getUserClaims();
console.log('access token ',accessToken);
this.getUserInfo();
return claims['sub'].split('@')[0];

}

//给变量任何类型

2022-02-10 19:35:02

TypeScript需要确保这些值存在于trainInfo中，否则它将全部读取为字符串

而不是这样做

interface trainInfo {
  name: string;
  x: Array<number>;
  y: Array<number>;
  type: string;
  mode: string;
}

这样做

interface trainInfo {
  name: "train_1" | "train_2" | "train_3"| "train_4";
  x: Array<number>;
  y: Array<number>;
  type: string;
  mode: string;
}

2022-12-14 08:35:14

元素隐式具有“any”类型，因为类型为“string”的表达式不能用于索引

推荐文章

最新文章

标签