在打字稿中动态创建对象答案

【问题标题】：Dynamically creating objects in typescript在打字稿中动态创建对象
【发布时间】：2020-12-01 07:16:47
【问题描述】：

我正在尝试根据传递给它的参数的数量和类型来创建动态数量的对象

我的一般骨架是这样的

interface KeyValue {
  key: string;
  value: string;
}

class CreateObjects {
  //example of how im tyring to make the objects look
  propertyTest: KeyValue = {key: 'Example', value: 'Object'};

  //function that creates objects like above but does so dynamically with unique and iterative property names
  methodTest: ([dynamic number of arguments]){
    [dynamicproperty1]: KeyValue = {key: 'Example', value: argument};
  }

我不知道这一切是否都错了，但基本上我不知道会通过多少个参数。它可以是无、1 或 50+。该参数仅更改“值”键/值对，并且该对象需要可作为其他函数的参数访问。

我觉得我错过了一些关于创建对象的基本知识，这使得这项任务变得如此困难

谢谢

【问题讨论】：

标签： typescript class object interface properties

【解决方案1】：

你需要解决这个难题。

首先，我们需要添加允许我们在类上设置任何属性的类型。我们可以这样做：

class CreateObjects {
    propertyTest: KeyValue = {key: 'Example', value: 'Object'};
    [key: string]: any;

当我们定义我们的方法时，我们希望将所有参数作为一个数组。我们可以使用...args，它会创建一个名为 args 的数组，其中每个参数都传递给数组：

methodTest(...args: any[]) { }

我没有使用“参数”这个名称，因为这是 JavaScript 中的 reserved keyword。它可以用来解决这个问题，但我认为使用 TypeScript 会更复杂。

最后，我们需要遍历每个参数，并在类上设置一个属性。我们可以这样做：

for (let i = 0; i < args.length; i = i + 1) {
    this['Example' + i] = {key: 'Example', value: args[i]};
}

希望您能认出 for 循环。我们使用“this”来访问类的属性。这种方法的一个警告是，如果从类外部调用该方法，则“this”绑定会有所不同，并且属性可能会设置在其他东西上。

最后，所有的东西都放在一起了，底部有一些测试代码可以看到它的工作原理：

interface KeyValue {
  key: string;
  value: string;
}

class CreateObjects {
  //example of how im tyring to make the objects look
  propertyTest: KeyValue = {key: 'Example', value: 'Object'};
  [dynamicProperty: string]: any;

  //function that creates objects like above but does so dynamically with unique and iterative property names
  methodTest(...args: any[]) {
    for (let i = 0; i < args.length; i = i + 1) {
        this['Example' + i] = {key: 'Example', value: args[i]};
    }
  }
}

const example = new CreateObjects();
example.methodTest("a", 1);
console.log(example.Example0);
console.log(example.Example1);

我不会说我特别喜欢在这样的类上设置属性。您可能想考虑是否可以更改设计以提高从 TypeScript 获得的安全性。例如，您能否改为使用一个属性来存储这些对象的数组？

【讨论】：