0

Estoy haciendo un desarrollo con angular + typescript.

Tengo un Componente al que le pueden llegar 3 tipos de listas.

¿Es posible saber el tipo de objeto que estoy recibiendo en el componente?

El porque de este uso es porque he creado un componente "Tabla", que lo utilizo para mostrar todas las tablas que tengo en la web y puede ser de esos 3 tipos

Clase Panel, de esta clase bindeo el content hacia el componente "Tabla"

import { Bike } from './bike.class';
import { Club } from './club.class';
import { Shoe } from './shoe.class';

export class Panel {
    disabled: boolean = false;
    name: string = '';
    content: (Club | Shoe | Bike)[];

    constructor(
        disabled: boolean,
        name: string,
        content: (Club | Shoe | Bike)[]
    ) {
        this.disabled = disabled;
        this.name = name;
        this.content = content;
    }
}

El componente "Tabla" que es donde quiero identificar el tipo de objeto que le estoy pasando para pintar unas columnas u otras en el grid

import { Component, Input, Type } from '@angular/core';
import { BaseComponent } from '../../base/base.component';
import { Bike } from '../../../core/models/bike.class';
import { Club } from '../../../core/models/club.class';
import { Shoe } from 'src/app/core/models/shoe.class';

@Component({
    selector: 'ui-table',
    templateUrl: './table.component.html',
    styleUrls: ['./table.component.scss'],
})
export class TableComponent extends BaseComponent {
    @Input() items: (Club | Shoe | Bike)[] = [];
    ngOnInit() {
    }
}

El objetivo sería saber que tipo recibe el ítems

10
  • Mira este ejemplo que te dejo: stackblitz.com/edit/…
    – Legna
    Commented el 11 dic. 2021 a las 16:31
  • Puede que tu problema venga de que no estas creando una clase como tal, si no un objeto.
    – Legna
    Commented el 11 dic. 2021 a las 16:33
  • Pues tenéis toda la razón, son objetos. Es posible el hacer esto mismo que comento, pero para saber el tipo de objeto que compone la lista?
    – Diego
    Commented el 11 dic. 2021 a las 18:16
  • Comprobar tipos en Typescript puede ser algo complejo, sobre todo si los elementos que deseamos comprobar no han sido definidos correctamente, por ejemplo, esto: items: Collection[] = [] podrías convertirlo a: items: Bike[] | Club[] | Shoe[] = []; Por otro lado, debes verificar que cada elemento de la lista sea del tipo que esperas. En principio tienes 4 tipos: Club, Bike, Shoe y Collection. Toma en cuenta que todo elemento de tipo Bike, Club o Shoe también es de tipo Collection. Commented el 11 dic. 2021 a las 18:21
  • Además, al momento de iniciar el componente, si la lista está vacía, ¿cómo pretendes saber el tipo de elemento que tendrá la misma? No me queda claro lo que pretendes comprobar realmente. El hecho de definir un tipo para una lista vacía sólo te ayudará al momento de añadir elementos a la misma durante la codificación, ya que Typescript te advertirá que no puede añadir un elemento con tipo diferente del esperado. Pero en tiempo de ejecución las cosas cambian. Commented el 11 dic. 2021 a las 18:28

1 respuesta 1

0

En el caso de clases

class Employee {
  constructor(
    public identifier: string
  ) {}
  getIdentifier() {
    return this.identifier;
  }

  isSameEmployeeAs(employee: Employee) {
    return this.identifier === employee.identifier;
  }
}


class Warehouse {
  constructor(
     public identifier: string,public size:string
  ) {}
}
const Joaquin=new Employee('jefe');
const Alameda=new Warehouse('Grande','1000 metros cuadrados');
const empleados:Employee[]=[Joaquin];
const depositos:Warehouse[]=[Alameda];
let items: (Employee| Warehouse)[] = [Joaquin];
console.log(items[0]instanceof Warehouse);//false
console.log('typeof items[0] ',typeof items[0].identifier);
console.log(items[0] instanceof Employee);//true
 console.log('Warehouse.prototype.constructor.name',Warehouse.prototype.constructor.name);
console.log('Employee.prototype.constructor.name',Employee.prototype.constructor.name);

console.log( 'Joaquin.constructor.name',Joaquin.constructor.name);
console.log('Alameda.constructor.name', Alameda.constructor.name);

Podemos distinguir a los objetos por sus propiedades

  
interface Club {
socio:number
}
interface Zapato{
  numero:number,
  marca:string

}
interface Bicicleta{
  precio:number
}
let items:(Club | Zapato | Bicicleta)[] = [];
let belgrano:Club[]=[{socio:124}];
let otro:Zapato[]=[{marca:'tres',numero:42}];
  
const tg = (x: any): x is Club => x.socio;
console.log(tg(belgrano[0]));//124
console.log(tg(otro[0]));//undefine

function determina(x: Club | Zapato | Bicicleta): x is Club {
  if((x as Club).socio){
  
    return true
  }
  return false
}
console.log('determina',determina(belgrano[0]));//true
console.log('determina',determina(otro[0]));//false
Con clase Base instanceof nos dira

class Mascota {
  constructor(private name:string) {
    this.name = name;
  }
}
const miMascota = new Mascota('Ancry');
class Pajaro extends Mascota {
  constructor(name:string, private color:string) {
    super(name);
    this.color = color;
  }
}
const miPajaro = new Pajaro('rex', 'red');
console.log('miPajaro instanceof Mascota',miPajaro instanceof Mascota);// true

En las clases si chequeamos de esta forma tener en cuenta las propiedades que distinguen a cada clase

   const isEmployeeIdentifier=(check:any):check is Employee =>
(check as Employee).identifier !==undefined;
console.log('is Employee',isEmployeeIdentifier(Alameda));// true 

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.