在 TypeScript 中创建模型类答案

【问题标题】：Creating model classes in TypeScript在 TypeScript 中创建模型类
【发布时间】：2016-05-28 23:25:21
【问题描述】：

您好，我是 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 中是否有任何选项可以做到这一点？

【问题讨论】：

标签： typescript

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您似乎试图完成的是在模型上强制执行结构。虽然在 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';

关于类型的优秀资源可以在here 找到，或者作为TypeScript: Interfaces vs Types 的答案。

【讨论】：

深入研究此问题底部链接的 SO 问题，听起来 tl;dr 是您应该普遍使用接口。听起来两者之间目前唯一的显着区别是您可以定义两次相同的接口，它们会自动合并在一起。类型不能，而且在这种情况下会出错。

【解决方案3】：

是的，你可以做到。

第 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>
 ...

注意：此代码已在 ionic 3 中测试过

【讨论】：