在 Typescript 对象中添加新属性

Question

I'm trying to add new property in object, but typescript given error.

error TS2339: Property 'qty' does not exist on type 'Object'.

product: Object = {qty: Number};

foo(){
  this.product.qty = 1;
}

Answer 1

Object is the wrong annotation. Change your annotation:

product: {qty: number} = {qty: 0};

foo(){
  this.product.qty = 1;
}

Answer 2

Number is a data type not a value. the object only accept the value not datatype. So you can't declare number as a value

try this simple way

product: any;

foo(){
  this.product.qty = 1;
}

Answer 3

Seems that you've tried to do this:

product: {qty: number} = {};

foo(){
  this.product.qty = 1;
}

This won't work, although, because the object you've started with is incomplete. You should either mark the property as optional:

product: {qty?: number} = {};

foo(){
  this.product.qty = 1;
}

Or provide some default value:

product: {qty: number | null} = {qty: null};
// or just {qty: number}, if you don't use strict null checks

foo(){
  this.product.qty = 1;
}

If default value is a number too, you can even simplify this by using type inference:

product = {qty: 0};

foo(){
  this.product.qty = 1;
}

All these three examples will work (if you provide proper value for this in function foo , of course, but I assume that you'll do it anyway).

Answer 4

Change Object to any type

product: any = {qty: Number};

foo(){
  this.product.qty = 1;
}

Answer 5

Use this

product = {qty: null};

OR

product = {qty: 0};

instead of this -

product: Object = {qty: Number};

Because you initializing your object with key and value as type which is number so instead of assigning type you need to set some value which is anything say 0 or null or anything you want as the default value.

Answer 6

You can also do like this and add as many as new properties you want in a product

product: Object = new Object();

foo(){
  this.product['qty'] = 1;
}

Answer 7

A solution without extra code would be a config option to allow the creation of new properties with the assignment operator but since there is no such property i patched the typescript code to allow it.

Do this on both tsc.js and typescript.js, those files are in node_modules/typescript

Find this line

 if (right.escapedText && !checkAndReportErrorForExtendingInterface(node)) 

And paste this right under it

return getTypeOfSymbol(right);

I have to admit that im not a typescript src code developer and i havent tested extensively the side effects of doing this but it works for my projects

The linter will show an error but it will compile fine