打字稿在类中创建数组然后推送到数组答案

【问题标题】：Typescript create array in class then push onto array打字稿在类中创建数组然后推送到数组
【发布时间】：2017-08-26 02:21:05
【问题描述】：

我有一些艺术品想要放入数组中。每件艺术品都有我试图用一个类来描述的属性。我想用类创建类型并将数据推送到数组中。我也不确定构造函数在做什么？我认为它应该提供一种创建类的新实例的方法？

我的ts代码如下：

class Artwork {
    private _artTitle: string;
    private _slideUrl: string;
    private _artPrice: string; 
    private _artMedium: string; 
    private _artDimensions: string; 
    private _artDesc: string;


  constructor(
        artTitle: string,
        slideUrl: string,
        artPrice: string,
        artMedium: string,
        artDimensions: string,
        artDesc: string
    ){

    this._artTitle = artTitle;
    this._slideUrl = slideUrl;
    this._artPrice = artPrice;
    this._artMedium = artMedium;
    this._artDimensions = artDimensions;
    this._artDesc = artDesc;

    }

  }

    let Artwks: string [];

    Artwks.push(new Artwork());

    Artwks[0].slideUrl = './assets/SBI_Slide_1.jpg';
    Artwks[0].artTitle = "'Surprising Breakfast Ideas'";
    Artwks[0].artPrice = "£400";
    Artwks[0].artMedium = "Acrylic on canvas";
    Artwks[0].artDimensions = '7" x 12"';
    Artwks[0].artDesc = '...Inspired by trailing clauses and footling concerns, this latest injunction into the darkened forest of prevarication yields a miasma of plethoras, tantalising us with a fleeting array of nuances...';



    console.log(Artwks);

【问题讨论】：

仅供参考，您可以在构造函数中将某些内容定义为private/protected/public，然后访问它，而无需单独声明类变量，然后将构造函数中的值分配给它们。例如。 constructor(private _artTitle: string)

标签： arrays class typescript

【解决方案1】：

你需要像这样声明变量并调用类的构造函数：

   let Artwks: Artwork []=[];

    Artwks.push(new Artwork("'Surprising Breakfast Ideas'", '', '', '', '', ''));

但是，如果您的类只有数据，我建议将其设为接口并使用 json 文字来创建数组元素：

interface Artwork {

    artTitle: string;
    slideUrl?: string; //optional memeber 
    artPrice: string;
    artMedium?: string;
    artDimensions?: string;
    artDesc?: string
}

let Artwks: Artwork []=[];

Artwks.push({
    artTitle: '',
    artPrice: '',
    artDesc: '',
    artDimensions:''
});

这个版本更具可读性，并且可以更简单地屏蔽一些可选成员

【讨论】：

好的，界面选项是我更喜欢的选项，但是你的代码对我不起作用——我错过了什么吗？
此代码不起作用，因为您没有初始化变量
我正在使用带有 angular-cli 的 Angular 4 - 我不确定如何将接口放入组件中？我需要将其放入服务中吗？
你需要创建数组。我编辑了代码以反映这一点
您不需要将接口放在服务中。只需在模块中声明它并导出它，然后将其作为任何其他类型导入。

【解决方案2】：

以下代码应该可以工作：

 let artworks: Artwks[] = [];

 artworks.push(new Artwork(
 "'Surprising Breakfast Ideas'",
 './assets/SBI_Slide_1.jpg',
 "£400",
 "Acrylic on canvas",
 '7" x 12"',
  '...Inspired by trailing clauses and footling concerns, this latest injunction into the darkened forest of prevarication yields a miasma of plethoras, tantalising us with a fleeting array of nuances...';
 ));

您必须填写构造函数中的所有参数才能创建类的新实例

【讨论】：

【解决方案3】：

您可以将参数传递给构造函数以创建具有您指定的属性的新实例，如下所示：

在将 Artwork 对象推送到它之前，您还需要启动新的空数组。

let Artwks:Array<Artwork>=[];

let artwk = new Artwork("'Surprising Breakfast Ideas'",'./assets/SBI_Slide_1.jpg', "£400", "Acrylic on canvas", '7" x 12"', '...Inspired by trailing clauses and footling concerns, this latest injunction into the darkened forest of prevarication yields a miasma of plethoras, tantalising us with a fleeting array of nuances...');

Artwks.push(artwk);

console.log(Artwks);

【讨论】：