如何在TypeScript中为对象动态分配属性？

Question

如果我想以编程方式将属性分配给Javascript中的对象,我会这样做:

var obj = {};
obj.prop = "value";

但在TypeScript中,这会产生错误:

类型"{}"的值不存在属性"prop"

我应该如何在TypeScript中为对象分配任何新属性？

Answer 1

有可能表示obj为any,但这违背了使用打字稿的整个目的.obj = {}暗示obj是一个Object.将其标记为any没有意义.为了实现所需的一致性,可以如下定义接口.

interface LooseObject {
    [key: string]: any
}

var obj: LooseObject = {};

或者使其紧凑:

var obj: {[k: string]: any} = {};

LooseObject可以接受任何字符串作为键并any键入值的字段.

obj.prop = "value";
obj.prop2 = 88;

此解决方案的真正优雅之处在于您可以在界面中包含类型安全字段.

interface MyType {
    typesafeProp1?: number,
    requiredProp1: string,
    [key: string]: any
}

var obj: MyType ;
obj = { requiredProp1: "foo"}; // valid
obj = {} // error. 'requiredProp1' is missing
obj.typesafeProp1 = "bar" // error. typesafeProp1 should be a number

obj.prop = "value";
obj.prop2 = 88;

Answer 2

或者一气呵成:

  var obj:any = {}
  obj.prop = 5;

Answer 3

我倾向于放在any另一边,即var foo:IFoo = <any>{};所以像这样的东西仍然是类型安全的:

interface IFoo{
    bar:string;
    baz:string;
    boo:string;     
}

// How I tend to intialize 
var foo:IFoo = <any>{};

foo.bar = "asdf";
foo.baz = "boo";
foo.boo = "boo";

// the following is an error, 
// so you haven't lost type safety
foo.bar = 123; 

或者,您可以将这些属性标记为可选:

interface IFoo{
    bar?:string;
    baz?:string;
    boo?:string;    
}

// Now your simple initialization works
var foo:IFoo = {};

在线尝试

Answer 4

当您的对象具有特定类型时,此解决方案很有用.就像获取对象到其他来源时一样.

let user: User = new User();
(user as any).otherProperty = 'hello';
//user did not lose its type here.

Answer 5

虽然编译器抱怨它仍然应该根据需要输出它.但是,这将有效.

var s = {};
s['prop'] = true;

Answer 6

我很惊讶没有一个答案引用 Object.assign，因为这是我在考虑 JavaScript 中的“组合”时使用的技术。

它在 TypeScript 中按预期工作：

interface IExisting {
    userName: string
}

interface INewStuff {
    email: string
}

const existingObject: IExisting = {
    userName: "jsmith"
}

const objectWithAllProps: IExisting & INewStuff = Object.assign({}, existingObject, {
    email: "jsmith@someplace.com"
})

console.log(objectWithAllProps.email); // jsmith@someplace.com

好处

• 始终键入安全，因为您不需要使用 any类型
• 使用 TypeScript 的聚合类型（由&声明类型时的表示objectWithAllProps），它清楚地表明我们正在即时（即动态地）组合一个新类型

需要注意的事项

1. Object.assign 有自己独特的方面（大多数有经验的 JS 开发人员都知道），在编写 TypeScript 时应该考虑这些方面。
   • 它可以以可变方式或不可变方式使用（我在上面演示了不可变方式，这意味着existingObject保持不变，因此没有email属性。对于大多数函数式程序员来说，这是一件好事，因为结果是唯一的新变化）。
   • Object.assign 在您拥有更扁平的对象时效果最佳。如果要组合包含可为空属性的两个嵌套对象，则最终可能会用 undefined 覆盖真值。如果您注意 Object.assign 参数的顺序，应该没问题。

Answer 7

另一个选择是将属性作为集合访问:

var obj = {};
obj['prop'] = "value";

Answer 8

迟到了，但简单的答案

let prop = 'name';
let value = 'sampath';
this.obj = {
   ...this.obj,
   [prop]: value
};

Answer 9

情况1：

var car = {type: "BMW", model: "i8", color: "white"};
car['owner'] = "ibrahim"; // You can add a property:

案例2：

var car:any = {type: "BMW", model: "i8", color: "white"};
car.owner = "ibrahim"; // You can set a property: use any type

Answer 10

您可以使用传播运算符基于旧对象创建新对象

interface MyObject {
    prop1: string;
}

const myObj: MyObject = {
    prop1: 'foo',
}

const newObj = {
    ...myObj,
    prop2: 'bar',
}

console.log(newObj.prop2); // 'bar'

TypeScript将推断原始对象的所有字段，而VSCode将执行自动补全，等等。

Answer 11

你可以使用这个：

this.model = Object.assign(this.model, { newProp: 0 });

Answer 12

这是 的一个特殊版本Object.assign，它会随着每个属性的变化自动调整变量类型。不需要额外的变量、类型断言、显式类型或对象副本：

function assign<T, U>(target: T, source: U): asserts target is T & U {
    Object.assign(target, source)
}

const obj = {};
assign(obj, { prop1: "foo" })
//  const obj now has type { prop1: string; }
obj.prop1 // string
assign(obj, { prop2: 42 })
//  const obj now has type { prop1: string; prop2: number; }
obj.prop2 // number

//  const obj: { prop1: "foo", prop2: 42 }

注意：示例使用了 TS 3.7断言函数。的返回类型assign是void，与 不同Object.assign。

Answer 13

为了确保类型是Object（即键值对），请使用：

const obj: {[x: string]: any} = {}
obj.prop = 'cool beans'

Answer 14

可以通过以下方式将成员添加到现有对象

1. 扩展类型（阅读：扩展/专业化接口）
2. 将原始对象转换为扩展类型
3. 将成员添加到对象

interface IEnhancedPromise<T> extends Promise<T> {
    sayHello(): void;
}

const p = Promise.resolve("Peter");

const enhancedPromise = p as IEnhancedPromise<string>;

enhancedPromise.sayHello = () => enhancedPromise.then(value => console.info("Hello " + value));

// eventually prints "Hello Peter"
enhancedPromise.sayHello();

Answer 15

Javascript：

myObj.myProperty = 1;

打字稿：

myObj['myProperty'] = 1;

Answer 16

最简单的将是

const obj = <any>{};
obj.prop1 = "value";
obj.prop2 = "another value"