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

197

Recientemente vi un tutorial sobre 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é?

I_LIKE_FOO
fuente
13
Use una clase cuando necesite un inicio lógico personalizado; de lo contrario, use siempre una interfaz, ya que solo está disponible en tiempo de compilación. Una interfaz mecanografiada no está compilada para javascript, ya que no existe en javascript.
Dieterg
66
Tenga en cuenta que las interfaces NO funcionarán con la inyección de dependencia en Angular 2. Aquí tendrá que usar clases.
jlang

Respuestas:

137

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:

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);
      });
    });
Thierry Templier
fuente
27
Gracias por tu respuesta detallada. Si la interfaz solo se usa en tiempo de compilación, ¿cómo puede el compilador verificar la estructura del archivo JSON sin examinar realmente el http get? Si no puede, ¿cuál es el punto de molestarse con una interfaz?
I_LIKE_FOO
77
@I_LIKE_FOO el compilador no necesita examinar la llamada get. Solo le importa verificar los tipos que conoce y que están correctamente alineados. var data = res.json();es realmente var data: any = res.json();para el compilador, así que perdemos todo tipo de verificación data. Lo que sería más útil aquí sería algo así como var data: ProductDto[] = res.json();la ProductDtode ser una interfaz que los modelos de la estructura de datos en el JSON devuelto.
GFoley83
3
Más: Angular style guide says not to use interfaces.Always use classes.Ver angular.io/guide/styleguide#style-03-03
Sampath
44
Sí, pero el problema es que no son los dioses gurú quienes diseñaron el mecanografiado. Eso sería Microsoft y compañía. Tienden a favorecer las interfaces y las clases cuando corresponde. También puntos de bonificación ... uno es tiempo de ejecución y otro es en tiempo de compilación
Tom Stickel
11
@Sampath Quizás la guía de estilo Angular se haya actualizado ya que ahora veo este "Considere usar una interfaz para modelos de datos". Implica preferir interfaz sobre clase para modelos de datos.
Mikezx6r
40

los 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.

pietro909
fuente
4

Como dijo @ThierryTemplier para recibir datos del servidor y también transmitir el modelo entre los componentes (para mantener la lista 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.

M_Farahmand
fuente
-22

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 de clase más. (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.

de la Guía de estilo angular

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

Sajith Mantharath
fuente
10
La Guía de estilo angular actualmente dice: “ Considere usar una interfaz para modelos de datos. "
Alex Peters
@AlexPeters Proporcione cualquier enlace auténtico. Gracias de antemano
Anand Phadke
@AnandPhadke seguro, aquí hay un enlace de Wayback Machine a la Guía de Estilo Angular en el momento de mi comentario anterior.
Alex Peters