Modelklassen maken in TypeScript

Hallo, ik ben nieuw bij TypeScript en ik heb zowel een C#- als JavaScript-achtergrond. Ik probeer een manier te creëren waarmee ik klassenmodellen kan maken die lijken op wat we in C# kunnen doen.

Dit is wat ik heb geprobeerd:

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

Ik verwachtte dat dit een JavaScript-model zou genereren dat de gedeclareerde eigenschappen blootlegt, maar dit genereert alleen een functie DonutChartModelzonder gedeclareerde eigenschappen.

Na het bekijken van de documenten merkte ik op dat ik een constructor moet toevoegen en de eigenschappen vanaf daar moet initialiseren om de eigenschappen zichtbaar te maken. Hoewel dit misschien werkt, helpt het niet situaties waarin je 20 of meer eigenschappen per model hebt, omdat de initialisatie er naar mijn mening nogal onhandig uit kan zien, en het vermindert ook de leesbaarheid een beetje.

Ik hoop dat er een manier is om zoiets te doen zonder de constructorparameters door te geven:

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

Is er een optie in TypeScript om dit te doen?


Antwoord 1, autoriteit 100%

Het lijkt erop dat u probeert een structuur op een model af te dwingen. Hoewel het logisch is om hiervoor een klasse in C# te gebruiken, is de beste aanpak in TypeScript om ofwel een typeof een interfacete maken.

Hier zijn voorbeelden van beide (gereduceerde eigenschappen voor de beknoptheid)

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

Wanneer te gebruiken:

Interfaces kunnen worden uitgebreid van/per klassen en zijn het beste voor wanneer u eigenschappen definieert.

Typen kunnen worden gecombineerd en zouden meer moeten worden gebruikt voor niet-samengestelde eigenschappen. Een goed voorbeeld zou zijn om typen te gebruiken voor zoiets als dit:

type Direction = 'up' | 'down' | 'left' | 'right';

Een uitstekende bron over typen is hierte vinden, of als antwoorden op TypeScript: interfaces versus typen.


Antwoord 2, autoriteit 29%

Ja, u kunt het.

Stap 1:Maak uw model met behulp van “Klassen“. Hoewel TypeScript interfaces heeft die deze functionaliteit kunnen bieden, raadt het Angular-team aan om alleen een kale ES6-klasse te gebruiken met sterk getypeerde instantievariabelen. Met ES6-klassen kunt u (optioneel) functionaliteit rond uw modellen bouwen en hoeft u ook niet vast te zitten aan een TypeScript-specifieke functie. Om deze redenen is het raadzaam klassen te gebruiken voor het maken van modellen.

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
}}

Stap 2:Importeer het in uw component. Dit geeft u het extra voordeel dat u het gegevensmodel op meerdere plaatsen kunt hergebruiken.

import { DonutChartModel } from '../../models/donut-chart-model;

Stap 3:Stel een van de eigenschappen in:

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)
}}}

Stap 4 (optioneel): gebruik het in html.

...
 <ion-list>
    <button ion-item *ngFor="let donut of myDonuts">
    {{donut.myPropertyToSet}}
     </button>
 </ion-list>
 ...

Opmerking: deze code is getest in ionic 3


Antwoord 3, autoriteit 18%

Als u de velden standaardwaarden geeft, zou dat moeten doen wat u zoekt.

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

Other episodes