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

Question

我知道有这种类型的多个问题，但我尝试了几乎所有的东西，我仍然得到这个错误。我在一个vue项目工作．我已经定义了我的数据如下:

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

现在在一个方法中，我写了一个函数到addNode

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 '{}'.。我发现的大多数解决方案都告诉我将字典定义为const dict = {key:string}，但由于我在data中定义节点，所以我不能使用const。

Answer 1

您可以显式地键入data的返回类型:

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

但是这意味着你必须写很多TypeScript可以推断的类型。

我宁愿用断言来代替:

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

甚至edges:

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

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

Answer 2

不用两次声明就可以同时标注类型和初始值的简单方法是为data使用一个barebones类:

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>() 
}

然后在data方法中返回一个实例:

data() {
return new Data();
}

这可能会有一点误导，因为你并不想把这个类作为类之外的类使用，也不想给它添加方法，但这是最简单的方法。只要你不误用，它是很方便的。