3

Me gustaría saber cómo puedo obtener el tipo de dato correcto en la respuesta de una consulta angular http get.

Por ejemplo, tengo las siguientes interfaces creadas:

export interface Person{
  name: string;
  surname: string;
}

export interface Police extends Person{
 identifier: string;
}

export interface Postman extends Person{
 city: string;
}

export interface Boy extends Person{
 age: number;
}

La consulta al servidor me devolvería sólo Police/s y Postman/s dentro del mismo array. Entonces cómo hago para diferenciar estos dos tipos de datos? Angular lo sabría parsear? Necesito un campo nuevo en Person que indique el typo?

He encontrado algún ejemplo pero no se si funcionaria, ya que no sé cómo indicarle que es un array de varias cosas:

public getPersons(): Observable<Police | Postman>{
    return this.http.get<Police | Postman>(URI);
}

Disculpad mi desconocimiento, puede que haya dicho alguna tontería.

Gracias por adelantado.

1
  • Es una buena pregunta, las interfaces, los tipos y las clases en Typescript a veces lían a los programadores. Es importante conocer la base de Javascript y qué aporta Typescript (y qué no puede aportar, todo tiene sus limitaciones) Commented el 2 oct. 2019 a las 14:02

1 respuesta 1

3

Para responderte primero debes entender algunas cosas:

  1. En runtime lo único que puede ejecutar el navegador es javascript. El typescript para poder ejecutar debe compilar primero y esto no es más que convertir el source de los ficheros .ts en código javascript por lo tanto lo primero que hace el compilador de typescript es eliminar toda la información de tipos ya que esta no tiene equivalente en su contraparte javascript.

  2. Las interfaces al ser compiladas no producen ningún código ya que consisten exclusivamente de información de tipos. Las clases por otro lado si producen funciones porque tienen código ejecutable que sí tiene equivalente.

  3. Lo que te llega del network es una cadena de caracteres que debes convertir a JSON en un proceso de serialización y de-serializacion (en el server y el cliente respectivamente). Las clases en javascript son funciones y tu no puedes serializar una función porque el formato JSON no lo soporta

    Un valor puede ser un string en comillas dobles, o un número, o true, o false, o null, o un objeto o un arreglo. Estas estructuras pueden ser anidadas.

Como ni las interfaces son funciones sino simples objetos con propiedades y lo que te llega del network son simples objetos sólo te queda como solución usar duck-typing para saber que fue lo que te llego realmente.

service.getPersons().pipe(
    tap(persons => {
       if (persons.identifier) {
           const person = persons as Police;
           // codigo para Police
       } else {
           const person = persons as Postman;
           // código para Postman
       }
    }),
).subscribe();

Recuerda que los tipos de typescript sólo te dan una idea de los tipos de datos que manejas, el servidor puede mandarte algo completamente distinto a lo que esperas y el que ejecutará ese código es el javascript que no tiene idea de lo que es un tipo.

Esta solución sólo es necesaria cuando tienes códigos diferentes para tipos diferentes. De lo contrario puedes convertir a any y omitir los tipos en ese punto de tu código si te da problemas y tratarlo todo como un mismo tipo genérico.

1
  • Muchas gracias!! Cómo se nota que vengo de JAVA y mezclo conceptos. Commented el 3 oct. 2019 a las 5:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.