如何在 TypeScript 中为对象数组中的对象动态添加值？

Question

如何在 Typescript 中为对象数组中的对象添加值？

假设我有一个这样的对象数组：

[{name:'John',age:20}, {name:'Sam',age:26}, {name:'Will',age:2}]

我想要的是在数组的每个对象中动态生成的属性，如下所示：

[{name:'John',age:20, value:'John 20'}, {name:'Sam',age:26, value:'Sam 26' }, {name:'Will',age:2, value:'Will 2'}]

这是我尝试过的：我创建了一个用于类型检查的模型，并在其中创建了一个返回值的方法。

export class Names {
    name: string;
    age: number;
    constructor() {
    }
    getConcat() {
        return this.name + ' ' + this.age;
    }
}

虽然当我从Names[] 类型的服务器获取数据时，我无法获取动态生成的值。我正在尝试获得这样的值：

this.somevariable:Names[]=[];  //declarartion
this.somevariable[0].getConcat() // inside a method after api call

我该怎么做？任何帮助将非常感激。谢谢！

Answer 1

如果你想插入新属性，那么你应该这样写：arr[i].value = arr[i].name + ' '+ arr[i].age;。从 API 获取数据后，将其存储在数组中，然后按如下所示更新数组。

以下是工作示例：

arr = [{name:'John',age:20}, {name:'Sam',age:26}, {name:'Will',age:2}];

for(let i=0;i<3;i++){
    arr[i].value = arr[i].name + ' '+ arr[i].age;
}

console.log(arr);

Answer 2

arr = [{name:'John',age:20}, {name:'Sam',age:26}, {name:'Will',age:2}];



const generateValue = (items) => {
  return items.map(x=> {
    return {...x, value: `${x.name} ${x.age}`};
  });
};

arr = generateValue(arr);
console.log(arr);

你可以像这样创建函数

Answer 3

当您出于类型检查的目的创建课程时 - 我猜您将 javascript 的 class 和 typescript 的 interface 混淆了：

interface 仅在开发期间出现，并在您的实际生产应用程序中消失。 class 是一个活生生的 js 对象，它在你的应用程序中被编译成一个功能对象。

类型检查的接口可能如下所示：

interface Name {
  name: string;
  age: number;
  getConcat: () => string; // hints about the presence of a function that returns a string, within the typed object - but is not a function by itself!
}

虽然一个类需要一些修改

export class Names {
    name: string;
    age: number;

    constructor(name: string, age: number) { // pass arguments to initialize the class object
      this.name = name;
      this.age = age;
    }

    getConcat() {
        return this.name + ' ' + this.age;
    }
}

使用interfaces，您可以说您拥有的名称数组的类型为Name[]，意思是：

function getConcat () {
   return this.name + ' ' + this.age
}

const names: Name[] = [{name: 'a', age: 1, getConcat: getConcat }, {name: 'b', age: 2, getConcat: getConcat },...];

在您的代码开发过程中，您将被提示已预设的 getConcat 方法，如果现在或将来不存在，则会收到警告。

但为了使用该类进行类型检查和getConcat 函数，您必须将每个对象映射到一个类中：

const objects = [{name: 'a', age: 1}, {name: 'b', age: 2}];
const names: Name[] = objects.map(obj => new Name(obj.name, obj.age));

现在您可以访问您在 Name 类中声明的任何方法，用于 names 数组中的每个项目。

您实际上可以将两者混合起来，如上所示初始化 js 类，同时对 class 本身进行类型检查：

export class Name implements NameInterface {
    name: string;
    age: number;

    constructor(name: string, age: number) { 
      this.name = name;
      this.age = age;
    }

    getConcat() {
        return this.name + ' ' + this.age;
    }
}

现在，如果您的 class 对象没有实现 NameInterface 声明成员的任何成员（例如您忘记在类中添加 getConcat 函数），您将收到警告。