在typescript中创建模型类

Question

嗨,我是typescritpt的新手,我来自C#和Javascript背景.我正在尝试创建一种方法,允许我创建类似于我们在C#中可以做的类模型.这是我尝试过的:

export class DonutChartModel {
    dimension: number;
    innerRadius: number;
    backgroundClass: string;
    backgroundOpacity: number;
}

我希望这能生成一个公开声明属性的javascript模型,但这些模型只生成一个没有声明属性的函数DonutChartModel.

在查看文档后,我注意到为了公开属性,我必须添加一个构造函数,从那里初始化属性.虽然这可能有效,但是对于每个模型可能有20个或更多特性的情况,初始化在我看来可能看起来比较安全,并且还会降低可读性.

我希望有一种方法可以做这样的事情而不传递构造函数params:

var model = new DonutChartModel();
model.dimension = 5
model.innerRadius = 20
....

那么打字稿中是否有任何选项可以做到这一点？

Answer 1

您试图实现的目的是在模型上强制执行结构.虽然在C#中使用类来实现这一点是有意义的,但在TypeScript中,最好的方法是创建一个type或一个interface.

以下是两者的示例(为简洁而减少的属性)

类型

type DonutChartModel = {
    dimension: number;
    innerRadius: number;
};
var donut: DonutChartModel = {
    dimension: 1,
    innerRadius: 2
};

接口

interface IDonutChartModel {
    dimension: number;
    innerRadius: number;
}
var donut: IDonutChartModel = {
    dimension: 1,
    innerRadius: 2
};

何时使用:

接口可以从类扩展,也可以通过类扩展,最适合定义属性

类型可以组合使用,应该更多地用于非复合属性.一个很好的例子是使用类似的东西:

type Direction = 'up' | 'down' | 'left' | 'right';

这里可以找到优秀的类型资源.

Answer 2

是的,你可以做到.

第1步:使用" 类 " 创建模型.虽然TypeScript具有可以提供此功能的接口,但Angular团队建议仅使用具有强类型实例变量的裸ES6类.ES6类允许您(可选)围绕模型构建功能,并且不需要将您锁定到TypeScript特定功能.由于这些原因,建议使用类来创建模型.

export class DonutChartModel {

//Fields 
dimension: Number
innerRadius: Number
backgroundClass: Number
backgroundOpacity: Number
myPropertyToSet: String 

constructor (dimension: Number, innerRadius: Number){
   this.dimension = dimension
   this.innerRadius = innerRadius
}}

第2步:将其导入您的组件.这将为您提供在多个位置重用数据模型的额外好处.

import { DonutChartModel } from '../../models/donut-chart-model;

第3步:设置其中一个属性值:

export class MenuSelectionPage {

 myDonuts: DonutChartModel[] = [];

 constructor(public navCtrl: NavController, public navParams: NavParams) {
  this.FillLocalData()
  this.myDonuts[this.myDonuts.length - 1].myPropertyToSet = "I am your father" 
 } 

//Aux Methods
FillLocalData() {
let dimensions = [8.32, 5, 17];
let defaultInnerRadius = 2;
for (let i = 0; i < dimensions.length; i++) {
  let donut = new DonutChartModel (dimensions[i], defaultInnerRadius * i)
  this.myDonuts.push(donut)
}}}

第4步(可选):在html中使用它.

 ...
 <ion-list>
    <button ion-item *ngFor="let donut of myDonuts">
    {{donut.myPropertyToSet}}
     </button>
 </ion-list>
 ...

注意:此代码已在离子3中进行了测试

Answer 3

提供字段默认值应该可以满足您的需求.

export class DonutChartModel {
    dimension: number = 0;
    innerRadius: number = 0;
    backgroundClass: string = "";
    backgroundOpacity: number = 0;
}