javascript - 如何动态地为 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

当你为了类型检查的目的创建类时 - 我猜你混淆了 javascript 的 class 和 typescript 的 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;
    }
}

使用接口(interface)，你可以说你拥有的名称数组是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));

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

您实际上可以将两者混合起来，如上所示初始化 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 类内的函数)。