Создание классов моделей в typescript

Привет Я новичок в typescritpt, и я исхожу из фона С# и Javascript. Я пытаюсь создать способ, который позволяет мне создавать модели классов, аналогичные тем, что мы можем делать на С#. Вот что я пробовал:

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

Я ожидал, что это создаст модель javascript, которая предоставляет объявленные свойства, но они генерируют только функцию DonutChartModel без объявленных свойств.

После просмотра документов я заметил, что для того, чтобы разоблачить свойства, я должен добавить конструктор, чтобы инициализировать свойства оттуда. Хотя это может сработать, это не помогает в ситуациях, когда у вас может быть 20 или более предложений на модель, инициализация может показаться сложной, по моему мнению, и она также немного уменьшает читаемость.

Я надеюсь, что есть способ сделать что-то подобное без передачи параметров конструктора:

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

Итак, есть ли опция typescript для этого?

Ответы

Ответ 1

То, что, по-видимому, вы пытаетесь выполнить, - это принудительное исполнение структуры модели. Хотя имеет смысл использовать класс в С# для достижения этого, в 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';

Отличный ресурс по типам можно найти здесь.

Ответ 2

Предоставление значений по умолчанию для полей должно делать то, что вы ищете.

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

Ответ 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