元素隐式具有 'any' 类型，因为类型 'number' 的表达式不能用于索引类型“{}”。 .ts(7053) VUEJS

Question

我知道有多个此类问题，但我尝试了几乎所有方法，但仍然出现此错误。我在 vue 项目 中工作。我将我的数据定义如下：

data(){
    return{
      nodes: {},
      edges:{},
      nextNodeIndex: 0,
      nextEdgeIndex: 0,
      selectedNodes: [],
      selectedEdges: [],
      graph: ref<vNG.Instance>() 
    }
  }

现在在一个方法中，我正在编写一个函数来添加节点

 addNode() {
      const nodeId = this.nextNodeIndex
      this.nodes[nodeId] = {
        name: String(nodeId),
        size: 16,
        color: "blue",
        label: true
      }

行 this.nodes[nodeId] 给出了错误 Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{}'.。我发现的大多数解决方案都告诉我将 dict 定义为 const dict = {key:string} 但由于我在 data 中定义节点，所以我不能使用 const.

非常感谢任何建议。

Answer 1

您可以显式键入 data 的 return 类型：

data(): { nodes: ..., ... } {

}

但这意味着您将不得不编写大量 TypeScript 可以推断的类型。

我会接受一个断言：

nodes: {} as { [key: number]: { name: string; size: number; ... } },

甚至可能 edges:

edges: {} as { [key: number]: ... },

但是，看到键是数字，您可能要考虑使用数组而不是对象。

Answer 2

在不声明任何内容的情况下注释类型和初始值的一种简单方法是使用准系统 class 数据：

class Data {
  // TODO: Fill in correct types instead of `unknown`
  nodes: Record<number, unknown | undefined> = {};
  edges: Record<number, unknown | undefined> = {};
  nextNodeIndex = 0;
  nextEdgeIndex = 0;
  selectedNodes: unknown[] = [];
  selectedEdges: unknown[] = [];
  graph = ref<vNG.Instance>() 
}

然后在你的数据方法中 return 一个实例：

data() {
  return new Data();
}

这有点误导，因为您不想实际使用此 class 作为 class 之外的 class 或向其添加方法，但这是最不冗长的方式。只要不误用就很好用

元素隐式具有 'any' 类型，因为类型 'number' 的表达式不能用于索引类型“{}”。 .ts(7053) VUEJS

Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{}'. .ts(7053) VUEJS

typescript

vue.js