json - Add data to JavaScript Object in TypeScript - Stack Overflow

admin管理员组

文章数量:1403339

So in normal Javascript you can execute this block of code fine:

var myObj = {};
myObj['one'] = {};

console.log(myObj);
console.log(myObj.one);

But you get this error in TypeScript Property 'one' does not exist on type '{}'

Is this just by design? (e.g. I'm expected to make my own classes for this)

So in normal Javascript you can execute this block of code fine:

var myObj = {};
myObj['one'] = {};

console.log(myObj);
console.log(myObj.one);

But you get this error in TypeScript Property 'one' does not exist on type '{}'

Is this just by design? (e.g. I'm expected to make my own classes for this)

• javascript
• json
• typescript

Share Improve this question Follow edited Jun 18, 2016 at 21:11 XCS 28.2k2828 gold badges104104 silver badges153153 bronze badges asked Jun 18, 2016 at 17:40 Andrew PhamAndrew Pham 18511 silver badge1111 bronze badges 3

• Your code doesn't have anything to do with JSON. TypeScript performs static type analysis. So yes, the errors it gives you are by design. – user1106925 Commented Jun 18, 2016 at 17:45
• Oh sorry, I didn't know how to explain it. That's just the kind of data type I get back from an API response for example (res.json()). – Andrew Pham Commented Jun 18, 2016 at 17:53
• 2 A lot of people refer to normal JavaScript Objects when they say JSON. JSON refers to the actual human-readable text representation of that JavaScript Object. – XCS Commented Jun 18, 2016 at 21:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

damitij07's answer covers a bunch of ways to deal with this, but I want to point out my favorite for this kind of use case: interfaces.

interface myObj {
  one:any;
}

Now you can mark variables as the interface and Typescript will check to ensure the object meets the requirements. Pass it around as you would anything else like classes or such and it will vanish on pile. No extra work for the js engine, just pile time checking.

const myObjInstance:myObj = {one:0};
function foo(x:myObj):myObj { return x; }

And if you need the field to be optional,

interface myObj {
  one?:any;
}

Now Typescript won't plain if you don't assign to the field.

Final note, this all assumes you are trusting the object to be what you expect it to be. If you're getting this from something external, even if you own it, you should probably check at runtime if the structure is what you expect to avoid errors.

Typescript introduces type bindings error when you write code something like this by predicting the type of object when you declare it.

var myObj = {};
myObj['one'] = {};

There are many suggested methods of solving or rather coding around this ambiguity:

Creating a class object and creating a instance.

export class myObj {
  one:any;
}

let myObjInstance:myObj = new myObj();
myObjInstance.one = {};
//
console.log(myObj);
console.log(myObj.one);

Another easy way to get around can be

//set type of myObj is any
let myObj:any = {};
myObj['one'] = {};
//no error
console.log(myObj);
console.log(myObj.one);

Or possibly if you want dynamic typecasting

let myObj = {};
//cast while assigning
(<any>myObj)['one'] = {};

//no error
console.log(myObj);
console.log(myObj.one);

本文标签： jsonAdd data to JavaScript Object in TypeScriptStack Overflow