typescript 在打字稿中创建模型类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35453630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating model classes in typescript
提问by aleczandru
Hi I am new to typescritpt and I come from both a C# and Javascript background. I am trying to create a way that allows me to create class models similar to what we can do in C#. Here is what I have tryed:
嗨，我是 typecritpt 的新手，我有 C# 和 Javascript 背景。我正在尝试创建一种方法，允许我创建类似于我们在 C# 中可以做的类模型。这是我尝试过的：
export class DonutChartModel {
dimension: number;
innerRadius: number;
backgroundClass: string;
backgroundOpacity: number;
}
I expected this to generate a javascript model that exposes the properties declared but these generates only a function DonutChartModel with no properties declared.
我希望这会生成一个 javascript 模型，该模型公开声明的属性，但这些模型仅生成一个没有声明属性的函数 DonutChartModel。
After looking at the docs I noticed that in order to expose the properties I have to add a constructor an initialize the properties from there. While this may work it does not help situations where you may have 20 or more propeties per model the initialization might look preety cluncky in my opinion and it also reduces readability a bit.
查看文档后，我注意到为了公开属性，我必须添加一个构造函数并从那里初始化属性。虽然这可能有效，但在每个模型可能有 20 个或更多属性的情况下无济于事，在我看来，初始化可能看起来很笨拙，而且还会降低可读性。
I am hoping there is a way to do something like this without passing constructor params:
我希望有一种方法可以在不传递构造函数参数的情况下执行此类操作：
var model = new DonutChartModel();
model.dimension = 5
model.innerRadius = 20
....
So is there any option in typescript to do this?
那么打字稿中是否有任何选项可以做到这一点？
回答by Brocco
What it appears you are attempting to accomplish is to enforce a structure on a model. While it makes sense to use a class in C# to accomplish this, in TypeScript the best approach is to create either a typeor an interface.
看起来您试图完成的是在模型上强制执行结构。虽然在 C# 中使用类来实现这一点很有意义，但在 TypeScript 中最好的方法是创建一个type或interface.
Here are examples of both (reduced properties for brevity)
以下是两者的示例（为简洁起见，减少了属性）
Type
类型
type DonutChartModel = {
dimension: number;
innerRadius: number;
};
var donut: DonutChartModel = {
dimension: 1,
innerRadius: 2
};
Interface
界面
interface IDonutChartModel {
dimension: number;
innerRadius: number;
}
var donut: IDonutChartModel = {
dimension: 1,
innerRadius: 2
};
When to Use:
何时使用：
Interfaces can be extended from/by classes and are best for when you are defining properties
接口可以从/通过类扩展，最适合在定义属性时使用
Types can be combined and should be used more for non-composite properties. A good example would be to use types for something like this:
类型可以组合，并且应该更多地用于非复合属性。一个很好的例子是将类型用于这样的事情：
type Direction = 'up' | 'down' | 'left' | 'right';
An excellent resource on types can be found here.
可以在这里找到关于类型的优秀资源。
回答by Ariel Antonio Fundora
Yes, you can do it.
是的，你可以做到。
Step 1:Create your model using “Classes”. While TypeScript has interfaces that can provide this functionality, the Angular team recommends just using a bare ES6 class with strongly typed instance variables. ES6 classes allow you to (optionally) build out functionality around your models and also doesn't require you to be locked into a TypeScript specific feature. For these reasons, it's advisable to use classes for creating models.
第 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
}}
Step 2:Import it into your component. This will give you the added benefit of reuse the data model in multiple places.
第 2 步：将其导入到您的组件中。这将为您提供在多个地方重用数据模型的额外好处。
import { DonutChartModel } from '../../models/donut-chart-model;
Step 3:Set one of the properties values:
步骤 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)
}}}
Step 4 (Optional): Use it in html.
第 4 步（可选）：在 html 中使用它。
...
<ion-list>
<button ion-item *ngFor="let donut of myDonuts">
{{donut.myPropertyToSet}}
</button>
</ion-list>
...
Note: This code has been tested in ionic 3
注意：此代码已在 ionic 3 中测试
回答by Joe Clay
Giving the fields default values should do what you're looking for.
为字段提供默认值应该可以满足您的需求。
export class DonutChartModel {
dimension: number = 0;
innerRadius: number = 0;
backgroundClass: string = "";
backgroundOpacity: number = 0;
}
