在TypeScript中创建模型类

Question

嗨，我是TypeScript新手，我来自C#和JavaScript背景。我正在尝试创建一种方法，使我能够创建类似于C#的类模型。

以下是我尝试过的：

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

我希望这会生成一个JavaScript模型，公开声明的属性，但这只生成一个函数DonutChartModel，没有声明属性。

在查看文档之后，我注意到为了公开属性，我必须添加一个构造函数并从中初始化属性。虽然这可能会起作用，但在每个模型可能有20个或更多属性的情况下，这并没有帮助，因为在我看来，初始化可能看起来相当笨拙，而且它还稍微降低了可读性。

我希望有一种方法可以在不传递构造函数参数的情况下执行类似操作：

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

TypeScript中是否有任何选项可以执行此操作？

Answer 1

为字段提供默认值应该符合您的要求。

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

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

您试图完成的似乎是在模型上强制执行结构。虽然在C语言中使用类来实现这一点是有意义的，但在TypeScript中，最好的方法是创建类型或接口。

以下是两者的示例（为简洁起见，减少了属性）

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';

关于类型的优秀资源可以在这里找到，或者作为TypeScript的答案：接口与类型。