typescript - interfaz - que es una interface en angular

Creando clases modelo en mecanografiado

Question

Hola, soy nuevo en typescritpt y provengo de un fondo de C # y Javascript. Estoy tratando de crear una manera que me permita crear modelos de clase similares a lo que podemos hacer en C #. Esto es lo que he intentado:

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

Esperaba que esto generara un modelo javascript que expone las propiedades declaradas, pero éstas generan solo una función DonutChartModel sin propiedades declaradas.

Después de mirar los documentos, noté que para exponer las propiedades tengo que agregar un constructor e inicializar las propiedades desde allí. Si bien esto puede funcionar, no ayuda en situaciones en las que puede tener 20 o más propiedades por modelo, la inicialización puede parecer bastante compleja en mi opinión y también reduce un poco la legibilidad.

Espero que haya una manera de hacer algo como esto sin pasar parámetros de constructor:

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

Entonces, ¿hay alguna opción en mecanografiado para hacer esto?

Answer 1

Dar los valores predeterminados de los campos debe hacer lo que estás buscando.

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

Answer 2

Lo que parece que estás intentando lograr es imponer una estructura en un modelo. Si bien tiene sentido usar una clase en C # para lograr esto, en TypeScript, el mejor enfoque es crear un type o una interface .

Aquí hay ejemplos de ambos (propiedades reducidas por brevedad)

Tipo

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

Interfaz

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

Cuándo usar:

Las interfaces pueden extenderse desde / por clases y son mejores para cuando está definiendo propiedades

Los tipos se pueden combinar y se deben usar más para propiedades no compuestas. Un buen ejemplo sería usar tipos para algo como esto:

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

Un excelente recurso sobre los tipos se puede encontrar here .

Answer 3

Si, puedes hacerlo.

Paso 1: Crea tu modelo usando " Clases ". Si bien TypeScript tiene interfaces que pueden proporcionar esta funcionalidad, el equipo de Angular recomienda simplemente usar una clase básica de ES6 con variables de instancia fuertemente tipadas. Las clases de ES6 le permiten (opcionalmente) desarrollar la funcionalidad en torno a sus modelos y tampoco requieren que esté bloqueado en una función específica de TypeScript. Por estas razones, es recomendable usar clases para crear modelos.

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

Paso 2: Importarlo en su componente. Esto le dará el beneficio adicional de reutilizar el modelo de datos en múltiples lugares.

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

Paso 3: Establecer uno de los valores de propiedades:

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

Paso 4 (Opcional): Utilízalo en html.

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

Nota: Este código ha sido probado en ionic 3.