initialize - Cuándo usar la interfaz y el modelo en TypeScript/Angular2

interface angular 6

Question

Recientemente vi un Tutorial en Angular 2 con TypeScript, pero no estoy seguro de cuándo usar una interfaz y cuándo usar un modelo para contener estructuras de datos.

Ejemplo de interfaz:

export interface IProduct {
ProductNumber: number;
ProductName: string;
ProductDescription: string;
}

Ejemplo de modelo:

export class Product {
constructor(
public ProductNumber: number,
public ProductName: string,
public ProductDescription: string
){}
}

Quiero cargar datos JSON desde una URL y enlazar a la interfaz / modelo. En algún momento quiero un solo objeto de datos, otras veces quiero mantener una matriz del objeto.

¿Cuál debo usar y por qué?

Answer 1

Como dijo @ThierryTemplier para recibir datos del servidor y también transmitir el modelo entre componentes (para mantener la lista de intellisense y cometer un error de tiempo de diseño), está bien usar la interfaz, pero creo que para enviar datos al servidor (DTO) es mejor usar la clase para tomar ventajas del mapeo automático DTO del modelo.

Answer 2

La interfaz describe un contrato para una clase o un nuevo tipo . Es un elemento mecanografiado puro, por lo que no afecta a Javascript.

Un modelo, y es decir, una clase , es una función JS real que se está utilizando para generar nuevos objetos.

Quiero cargar datos JSON desde una URL y enlazar a la interfaz / modelo.

Elija un modelo, de lo contrario, seguirá siendo JSON en su Javascript.

Answer 3

Las interfaces son solo en tiempo de compilación. Esto solo le permite comprobar que los datos esperados recibidos siguen una estructura particular. Para esto, puede transmitir su contenido a esta interfaz:

this.http.get(''...'')
.map(res => <Product[]>res.json());

Ver estas preguntas:

• ¿Cómo convierto un objeto JSON en una clase de mecanografiado
• Cómo obtener el objeto Date de json Response en mecanografiado

Puede hacer algo similar con la clase, pero las principales diferencias con la clase son que están presentes en el tiempo de ejecución (función del constructor) y puede definir métodos en ellas con el procesamiento. Pero, en este caso, debe crear instancias de objetos para poder usarlos:

this.http.get(''...'')
.map(res => {
var data = res.json();
return data.map(d => {
return new Product(d.productNumber,
d.productName, d.productDescription);
});
});

Answer 4

Use Class en lugar de Interface, que es lo que descubrí después de toda mi investigación.

¿Por qué? Una clase sola es menos código que una interfaz class-plus. (de todos modos, puede requerir una clase para el modelo de datos)

¿Por qué? Una clase puede actuar como una interfaz (use implementos en lugar de extensiones).

¿Por qué? Una clase de interfaz puede ser un token de búsqueda de proveedores en la inyección de dependencia angular.

angular.io/guide/styleguide#style-03-03

Básicamente, una clase puede hacer todo, lo que hará una interfaz. Por lo tanto, es posible que nunca necesite usar una interfaz .