Question

您好我是typescritpt的新手，我来自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
....

那么打字稿中有没有选项可以做到这一点？

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

可以找到关于类型的优秀资源here。

Answer 2

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

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

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

注意：此代码已在离子3

中进行了测试

在typescript

3 个答案:

类型

接口

何时使用：