javascript - Best way to solve typescript error - property does not exist on type - Stack Overflow

I have several different situations where I am trying to define a self made property on an array or object in typescript but monly get the error:

"Property x does not exist on type Object (or type Array)"

For example I am using typescript in Angular and have a defined scope based on the Angular type definition file:

scope:ng.IScope

But then when I try to create a new property on scope by doing:

scope.anotherProperty = "string";

I get the error mentioned above. I know I can solve it by doing one of the following:

scope["anotherProperty"] = "string";

OR

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

Another example is when I have something like this within my d3 graph:

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

                    }
                }
        }

Ideally, I would like to change that (node:any) parameter to something like:

(node:Object)

But when I do that, I get an error saying "property id does not exist on type Object". I know I can correct it with the solutions I mentioned above but that seems kind of sloppy to me. Is there a better way or best typescript way of getting those to run correctly for both arrays and objects?

Thanks

I have several different situations where I am trying to define a self made property on an array or object in typescript but monly get the error:

"Property x does not exist on type Object (or type Array)"

For example I am using typescript in Angular and have a defined scope based on the Angular type definition file:

scope:ng.IScope

But then when I try to create a new property on scope by doing:

scope.anotherProperty = "string";

I get the error mentioned above. I know I can solve it by doing one of the following:

scope["anotherProperty"] = "string";

OR

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

Another example is when I have something like this within my d3 graph:

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

                    }
                }
        }

Ideally, I would like to change that (node:any) parameter to something like:

(node:Object)

But when I do that, I get an error saying "property id does not exist on type Object". I know I can correct it with the solutions I mentioned above but that seems kind of sloppy to me. Is there a better way or best typescript way of getting those to run correctly for both arrays and objects?

Thanks

• javascript
• jquery
• angularjs
• d3.js
• typescript

Share Follow asked Sep 30, 2016 at 21:25 bschmittybschmitty 1,21833 gold badges2121 silver badges4949 bronze badges 3

• 2 Can you inherit from ng.IScope, add another property to the definition and the use that? The latter problem is caused by Object not having the id property. Either you leave it loosely types with any or create a class/interface. – Dan Def Commented Sep 30, 2016 at 21:34
• Yea I should be able to inherit from that, what is the best way to go about adding a definition then? Would that then allow me to do something like "scope.anotherProperty = string". Also, if I was going to add an interface there would I want to just set all the properties the node object could potentially have or if I'm just using id is i best to just add id? and then call that in the parameter definition. Thanks – bschmitty Commented Sep 30, 2016 at 22:29
• 1 I have added an answer below. Rather than inheriting from ng.IScope you can just extend it. – Dan Def Commented Oct 1, 2016 at 6:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You can add the extra property to the ng.IScope interface by adding the following to your code:

interface ng.IScope {
    anotherProperty?:string;
}

This would allow you to call

scope.anotherProperty = "string";

Without seeing the rest of your code and knowing what node actually represents I can only say that to make the piler happy you need to just include the members you refer to in your TS code. If you were doing it properly then create a class that contains all members. If it derives from an existing class or implements an existing interface then you should inherit from those in your class definition.

Edit: If you haven't already, you should look in the DefinitelyTyped GitHub repo for the D3 definitions. Assuming node is a D3 type, you can use that to solve your problem and avoid writing your own class.