javascript - Cum să transformi datele API în DTO (Obiect de Transfer de Date) în TypeScript

Am un șir de vehicule ca mai jos.

export const fetchDataFromApi = () => {
  return [
    { vehicleId: 1, vehicleType: 'car', seats: 4, wheelType: 'summer', updatedAt: new Date().toISOString },
    { vehicleId: 2, vehicleType: 'plane', seats: 200, maxAltitude: 8000, updatedAt: new Date().toISOString },
    { vehicleId: 3, vehicleType: 'train', seats: 1200, railType: 'whatever', updatedAt: new Date().toISOString },
  ];
};

Am creat clasele Vehicle, Car, Plane și Train. Dar nu sunt sigur dacă acestea ar putea fi și Interfețe.

Acest răspuns API ar trebui gestionat cu un DTO care definește tipul răspunsului și permite conversia răspunsului în tipul DTO.

Deci, cum pot transforma datele într-un DTO tipizat? Mai jos sunt definițiile claselor mele, dar nu sunt sigur cum să le implementez..

class Vehicle {
      vehicleId: number;
      vehicleType: string;
      seats: number;
      updatedAt: string;

      constructor(vehicleId: number, vehicleType: string, seats: number, updatedAt: string) {
        this.vehicleId = vehicleId;
        this.vehicleType = vehicleType;
        this.seats = seats;
        this.updatedAt = updatedAt;
      }
    }

    class Car extends Vehicle {
      wheelType: string;

      constructor(vehicleId: number, vehicleType: string, seats: number, updatedAt: string, wheelType: string) {
        super(vehicleId, vehicleType, seats, updatedAt);
        this.wheelType = wheelType;
      }
    }

    class Plane extends Vehicle {
      maxAltitude: number;
      constructor(vehicleId: number, vehicleType: string, seats: number, updatedAt: string, maxAltitude: number) {
        super(vehicleId, vehicleType, seats, updatedAt);
        this.maxAltitude = maxAltitude;
      }
    }

    class Train extends Vehicle {
      railType: string;
      constructor(vehicleId: number, vehicleType: string, seats: number, updatedAt: string, railType: string) {
        super(vehicleId, vehicleType, seats, updatedAt);
        this.railType = railType;
      }
    }

Răspuns #1

Trebuie doar să creezi un mapper pentru a transforma setul de date.

const fetchDataFromApi = (): Vehicle[] => {
    return [
      { vehicleId: 1, vehicleType: 'car', seats: 4, wheelType: 'summer', updatedAt: new Date().toISOString },
      { vehicleId: 2, vehicleType: 'plane', seats: 200, maxAltitude: 8000, updatedAt: new Date().toISOString },
      { vehicleId: 3, vehicleType: 'train', seats: 1200, railType: 'whatever', updatedAt: new Date().toISOString },
    ];
  };
  
  class Vehicle {
        vehicleId: number;
        vehicleType: string;
        seats: number;
        updatedAt: string;
  
        constructor(vehicleId: number, vehicleType: string, seats: number, updatedAt: string) {
          this.vehicleId = vehicleId;
          this.vehicleType = vehicleType;
          this.seats = seats;
          this.updatedAt = updatedAt;
        }
      }
  
      class Car extends Vehicle {
        wheelType: string;
  
        constructor(vehicleId: number, vehicleType: string, seats: number, updatedAt: string, wheelType: string) {
          super(vehicleId, vehicleType, seats, updatedAt);
          this.wheelType = wheelType;
        }
      }
  
      class Plane extends Vehicle {
        maxAltitude: number;
        constructor(vehicleId: number, vehicleType: string, seats: number, updatedAt: string, maxAltitude: number) {
          super(vehicleId, vehicleType, seats, updatedAt);
          this.maxAltitude = maxAltitude;
        }
      }
  
      class Train extends Vehicle {
        railType: string;
        constructor(vehicleId: number, vehicleType: string, seats: number, updatedAt: string, railType: string) {
          super(vehicleId, vehicleType, seats, updatedAt);
          this.railType = railType;
        }
      }
  
  
  const vehicleMapper = (vehicle: Vehicle) => {
    const {vehicleId, vehicleType, seats, updatedAt} = vehicle;
    switch(vehicle.vehicleType) {
      case 'car':
        const {wheelType} = vehicle as Car;
        return new Car(vehicleId, vehicleType, seats, updatedAt, wheelType);
      case 'plane':
        const {maxAltitude} = vehicle as Plane;
        return new Plane(vehicleId, vehicleType, seats, updatedAt, maxAltitude);
      case 'train':
        const {railType} = vehicle as Train;
        return new Train(vehicleId, vehicleType, seats, updatedAt, railType);
      default:
        return new Vehicle(vehicleId, vehicleType, seats, updatedAt);
    }
  }



const data = fetchDataFromApi();
const vehicles = data.map(vehicleMapper);