Skapa modellklasser i TypeScript

Hej, jag är ny på TypeScript och jag kommer från både en C#- och JavaScript-bakgrund. Jag försöker skapa ett sätt som tillåter mig att skapa klassmodeller på liknande sätt som vi kan göra i C#.

Här är vad jag har försökt:

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

Jag förväntade mig att detta skulle generera en JavaScript-modell som exponerar de deklarerade egenskaperna, men detta genererar endast en funktion DonutChartModel utan några deklarerade egenskaper.

Efter att ha tittat på dokumentationen märkte jag att för att exponera egenskaperna måste jag lägga till en konstruktor och initiera egenskaperna därifrån. Även om detta kan fungera, hjälper det inte i situationer där du kan ha 20 eller fler egenskaper per modell, eftersom initialiseringen kan se ganska klumpig ut, enligt min åsikt, och det minskar också läsbarheten lite.

Jag hoppas att det finns ett sätt att göra något liknande utan att skicka konstruktörsparametrar:

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

Finns det något alternativ i TypeScript för att göra detta?

Svar #1

Det verkar som att du försöker åstadkomma att upprätta en struktur för en modell. Även om det är logiskt att använda en klass i C# för att åstadkomma detta, är det bästa tillvägagångssättet i TypeScript att skapa antingen en type eller ett interface.

Här är exempel på båda (förkortade egenskaper för korthetens skull)

Typ

type DonutChartModel = {
    dimension: number;
    innerRadius: number;
};
var donut: DonutChartModel = {
    dimension: 1,
    innerRadius: 2
};

Gränssnitt

interface IDonutChartModel {
    dimension: number;
    innerRadius: number;
}
var donut: IDonutChartModel = {
    dimension: 1,
    innerRadius: 2
};

När man ska använda:

Gränssnitt kan utökas från/av klasser och är bäst när du definierar egenskaper.

Typer kan kombineras och bör användas mer för icke-komposit-egenskaper. Ett bra exempel skulle vara att använda typer för något som detta:

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

En utmärkt resurs om typer kan hittas här, eller som svar på TypeScript: Gränssnitt vs Typer.

Svar #2

Ja, du kan göra det.

Steg 1: Skapa din modell med hjälp av “Klasser”. Även om TypeScript har gränssnitt som kan ge denna funktionalitet, rekommenderar Angular-teamet att man bara använder en enkel ES6-klass med starkt typade instansvariabler. ES6-klasser tillåter dig att (valfritt) bygga ut funktionalitet kring dina modeller och kräver även att du inte är låst till en TypeScript-specifik funktion. Av dessa skäl är det att rekommendera att använda klasser för att skapa modeller.

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

Steg 2: Importera det till din komponent. Detta ger dig den ytterligare fördelen att återanvända datamodellen på flera ställen.

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

Steg 3: Ange ett av egenskapsvärdena:

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

Steg 4 (Valfritt): Använd det i html.

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

Observera: Denna kod har testats i Ionic 3

Svar #3

Att ge fälten standardvärden bör göra det du letar efter.

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