如何在JSON数据中添加新属性,而无需使用typescript或JavaScript添加接口

lmyy7pcs  于 2023-11-20  发布在  TypeScript
关注(0)|答案(1)|浏览(126)

我尝试在josn数据中添加新属性,而不添加接口。但我无法添加它。那么,如何在json数据中添加新属性。这可能吗?
app.component.ts:

export class AppComponent {
  data1: Candle[] = [
    {
      name: 'john',
      place: 'forest',
      phone: '124-896-8963'
    },
    {
      name: 'Jay',
      place: 'City',
      phone: '124-896-1234'
    },
    {
      name: 'Joseph',
      place: 'sky',
      phone: '124-896-9632'
    },
  ];

  foo() {
    const modifiedData = this.data1.map(d => {
      d.expanded1 = false; // error! 
      //~~~~~~~~~ Property 'expanded1' does not exist on type 'Candle'.
      d.expanded2 = false; // error! 
      //~~~~~~~~~ Property 'expanded2' does not exist on type 'Candle'.
      return d;
    });

    console.log(modifiedData);
  }
}
interface Candle {
  name: string,
  place: string,
  phone: string
}

字符串

jrcvhitl

jrcvhitl1#

TypeScript并不真的喜欢让你改变一个值的 type,并且向一个对象添加新的属性,而这个对象的类型并不知道有这些属性,这会给你给予一个编译器错误(这很可能是一个错误)。解决这个问题的一种方法是使用the Object.assign() method,它通过添加其余参数的属性来改变其第一个参数。TypeScript对Object.assign()的调用签名返回输入类型的交集,这意味着已知输出具有所有输入的所有属性。
这意味着我们可以将您的代码更改为

const modifiedData = this.data1.map(d => {
  return Object.assign(d, { expanded1: false, expanded2: false });
});
/* const modifiedData: (Candle & {
expanded1: boolean;
expanded2: boolean;
})[] */

字符串
现在modifiedData是一个数组,其元素是Candle对象,并根据需要具有两个额外的boolean属性。
Playground链接到代码

相关问题