解决打字稿错误的最佳方法 - 类型上不存在属性

Posted 2023-03-13

【中文标题】解决打字稿错误的最佳方法 - 类型上不存在属性

【英文标题】：Best way to solve typescript error - property does not exist on type

【发布时间】：2017-02-09 13:13:29

【问题描述】：

我有几种不同的情况，我试图在 typescript 中的数组或对象上定义自制属性，但通常会出现错误：

“对象类型（或数组类型）上不存在属性 x”

例如，我在 Angular 中使用 typescript，并根据 Angular 类型定义文件定义了范围：

scope:ng.IScope

但是当我尝试通过执行以下操作在范围上创建新属性时：

scope.anotherProperty = "string";

我收到上述错误。我知道我可以通过执行以下操作之一来解决它：

scope["anotherProperty"] = "string";

或

(<any>scope).anotherProperty = "string;

另一个例子是当我的 d3 图表中有这样的东西时：

function panZoomNode (node:any) 
            for (var i = 0; i < renderedNodes.length; i++) 
                if (node.id === renderedNodes[i].id) 

                    
                
        

理想情况下，我想将 (node:any) 参数更改为：

(node:Object)

但是当我这样做时，我收到一条错误消息，提示“对象类型上不存在属性 ID”。我知道我可以用上面提到的解决方案来纠正它，但这对我来说似乎有点草率。有没有更好的方法或最好的打字稿方法让它们对数组和对象都正确运行？

谢谢

【问题讨论】：

你能从 ng.IScope 继承，在定义中添加另一个属性并使用它吗？后一个问题是由 Object 没有 id 属性引起的。要么将其松散地输入任何类型，要么创建一个类/接口。

是的，我应该能够继承它，那么添加定义的最佳方法是什么？那是否允许我做类似“scope.anotherProperty = string”的事情。另外，如果我要添加一个接口，我是否只想设置节点对象可能具有的所有属性，或者如果我只是使用 id，我最好只添加 id？然后在参数定义中调用它。谢谢

我在下面添加了一个答案。您可以扩展它，而不是从 ng.IScope 继承。

【参考方案1】：

您可以通过将以下内容添加到您的代码中，将额外的属性添加到ng.IScope 接口：

interface ng.IScope 
    anotherProperty?:string;

这将允许您调用

scope.anotherProperty = "string";

在没有看到您的其余代码并且不知道 node 实际代表什么的情况下，我只能说，为了让编译器满意，您只需在 TS 代码中包含您引用的成员。如果你做得正确，那么创建一个包含所有成员的类。如果它派生自现有类或实现现有接口，那么您应该从类定义中的那些继承。

编辑：如果您还没有，您应该查看 D3 定义的 distinctlyTyped GitHub 存储库。假设 node 是 D3 类型，您可以使用它来解决您的问题并避免编写自己的类。

【讨论】：

是的，我最终只是扩展了 ng.IScope 并添加了我需要访问的其他属性。这很好用。我的编辑不喜欢只使用您在回答中描述的界面。对于节点，我确实查看了 D3 类型定义，但在我的情况下，节点没有任何作用，因为我使用的是 dagre-d3 以及特定属性。我刚刚创建了一个界面并添加了我需要的属性，这对我有用。谢谢