Creating model classes in TypeScript
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.
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.
import { DonutChartModel } from '../../models/donut-chart-model;
Step 3: Set one of the properties values:
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.
...
<ion-list>
<button ion-item *ngFor="let donut of myDonuts">
{{donut.myPropertyToSet}}
</button>
</ion-list>
...
Note: This code has been tested in ionic 3
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 type
or an 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, or as answers to TypeScript: Interfaces vs Types.
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;
}