0

Estoy trabajando con Strava. Tengo todas las clases creadas, para trabajar con POO y mi duda es la siguiente.

Como veis en la imagen siguiente, tengo bien tipado el Athlete que recibo, pero no soy capaz de tipar los array que tiene dentro (en este caso se ve bikes, que es de tipo Array, pero debería de ser de tipo Bike)

Código de la respuesta de strava

Me podéis ayudar de como tipar la respuesta de una api en base a las clases ya creadas? Para una vez recibida la respuesta, taparla completamente y poder usar los tipos de las propiedades?

Servicio y clases

Servicio desde donde invoco a la API de strava, quiero que de este servicio ya llegue a los controladores la respuesta, un objeto de tipo Athlete que contiene 3 listas (a parte de sus propiedades especificas), una de ellas sería una lista de Club, no un Array genérico

async getAthlete() {
        return this.interactionService
            .get<Athlete>('/athlete', headers)
            .pipe(map((resp) => new Athlete({ ...resp })));
    }

Esto devuelve un objeto Athlete, como se ve en la consola

Pues bien ahora me gustaría conseguir eso mismo con las listas que contiene, porque luego, en otras partes de la aplicación necesito saber que tipo de objeto me llega para hacer ciertas funciones.

Clase Athlete

import { AthleteBase } from './athlete-base.class';
import { Bike } from './bike.class';
import { Club } from './club.class';
import { Shoe } from './shoe.class';

export class Athlete extends AthleteBase {
    can_follow: boolean = false;
    follower_count: number = 0;
    friend_count: number = 0;
    mutual_friend_count: number = 0;
    athlete_type: number = 0;
    date_preference: string = '';
    measurement_preference: string = '';
    clubs: Club[] = new Array<Club>();
    ftp: number = 0;
    bikes: Bike[] = new Array<Bike>();
    shoes: Shoe[] = new Array<Shoe>();

    constructor(athlete?: Athlete) {
        super(athlete);

        if (athlete != null) {
            this.can_follow = athlete.can_follow;
            this.follower_count = athlete.follower_count;
            this.friend_count = athlete.friend_count;
            this.mutual_friend_count = athlete.mutual_friend_count;
            this.athlete_type = athlete.athlete_type;
            this.date_preference = athlete.date_preference;
            this.measurement_preference = athlete.measurement_preference;
            this.clubs = new Array<Club>(...athlete.clubs);
            this.ftp = athlete.ftp;
            this.bikes = new Array<Bike>(...athlete.bikes);
            this.shoes = new Array<Shoe>(...athlete.shoes);
        }
    }
}

Como veis contiene las 3 listas, os dejo el código de la clase Club, por no saturar la pregunta y una vez conseguida tipar esa lista, poder actuar igual con el resto

Clase Club

export class Club {
    id: number = 0;
    resource_state: number = 0;
    name: string = '';
    profile_medium: string = '';
    profile: string = '';
    cover_photo?: null | string = '';
    cover_photo_small?: null | string = '';
    sport_type: string = '';
    city: string = '';
    state: string = '';
    country: string = '';
    private: boolean = false;
    member_count: number = 0;
    featured: boolean = false;
    verified: boolean = false;
    url: string = '';
    membership: string = '';
    admin: boolean = false;
    owner: boolean = false;

    constructor(club?: Club[]) {
        if (Array.isArray(club)) {
            club.forEach((club) => {
                this.id = club.id;
                this.resource_state = club.resource_state;
                this.name = club.name;
                this.profile_medium = club.profile_medium;
                this.profile = club.profile;
                this.cover_photo = club.cover_photo;
                this.cover_photo_small = club.cover_photo_small;
                this.sport_type = club.sport_type;
                this.city = club.city;
                this.state = club.state;
                this.country = club.country;
                this.private = club.private;
                this.member_count = club.member_count;
                this.featured = club.featured;
                this.verified = club.verified;
                this.url = club.url;
                this.membership = club.membership;
                this.admin = club.admin;
                this.owner = club.owner;
            });
        }
    }
}

El objetivo final es el de conseguir una aplicación angular + typescript en POO. Sólo lo estoy haciendo para aprender y sacarme las estadísticas de mi entrenamientos, carreras, etc y si luego en un futuro a alguien le sirve, pues genial. Por eso no busco ningún "apaño" sino meter tiempo en afianzar ese conocimiento.

Cualquier cosa que veais mal en el código, será de agradecer que lo comentéis.

11
  • 1
    La captura que muestras es de la consola del navegador, en donde Typescript no se ejecuta, sino Javascript. Exactamente ¿qué te propones? Una cosa es cómo manejas los tipos durante el desarrollo y otra muy deiferente cómo los recibes durante la ejecución. Typescript no se ejecuta directamente en el navegador. El navegador no entiende de tipos, interfaces, ni nada de las estructuras añadidas a Typescript. En el navegador se ejecuta Javascript (al menos hasta la fecha de este comentario). Lo que llamas tapar (entiendo te refieres a asignar un tipo), sólo ocurre durante la etapa de desarrollo. Commented el 26 dic. 2021 a las 9:16
  • De la documentación: Typescript añade sintaxis adicional a Javascript para permitir una integración más estrecha con su editor. Capture errores pronto en su editor. Cuando el código en Typescript es transpilado a JS, todo tipo se pierde, ya que los tipos son exclusivos de Typescript. ¿Podrías aclarar qué quieres hacer exactamente? Saludos Commented el 26 dic. 2021 a las 9:26
  • 1
    Trataré de darte una respuesta para intentar aclarar un poco más el porqué lo que intentas hacer no funciona como esperas, y alguna alternativa a cómo lograrlo, aprovechando lo que sí funciona en JS. Saludos Commented el 26 dic. 2021 a las 12:48
  • 1
    Si las clases son solo contenedores de datos, sin comportamiento, es una perdida de tiempo que los mapees a clases, pero para los anidados tienes que hacer lo mismo que has hecho con Athlete. Para el caso de Club tendrías que hacer algo así this.clubs = athlete.clubs.map(club => new Club(club));
    – akotech
    Commented el 27 dic. 2021 a las 7:45
  • 1
    hay operadores typeof, instanceof..>function createInstance(TheClass: typeof Bike,, parametros que requiere) { return new TheClass(parametros que requiere); }-->const bike = createInstance(Bike, parametros); assert.ok(point instanceof Bike);alligator.io/typescript/instanceof-guard
    – nestdan
    Commented el 27 dic. 2021 a las 18:19

1 respuesta 1

0

Debes generar una interface para el objeto bike, el siguiente código cumple con dicho proposito:



interface Bike {
    id: string;
    primary:  string;
    name:  string;
    resource_state:  string;
  }
  
  interface Athlete {
    id: string;
    username:  string;
    athlete_type:  string;
    bikes:  Bike[] | null;
  }
  
  var json = '{"id":579974,"username":"Roger","athlete_type":2,"bikes":[{"id":91460,"primary":"true","name":"bike_David","resource_state":5},{"id":54301,"primary":"true","name":"bike_Aaron","resource_state":9}]}'
  
  var athlete:Athlete = JSON.parse(json);
  
  console.log(athlete);

Para que se te facilite la generación de las respectivas interfaces puedes usar esta herramienta que genera interfaces desde un JSON.

Saludos :)

1
  • Tengo todo montado con clases, de hecho, estoy intentando montar una aplicación POO. Te dejo el código de todo lo relacionado con la pregunta en el primer post.
    – Diego
    Commented el 26 dic. 2021 a las 12:01

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.