0

estoy queriendo hacer una unión de 2 interfaces y quisiera saber si conocen alguna forma, ademas de la que esta comentada en el codigo, de acceder e inicializar una propiedad de alguna de las interfaces que se declaran en la Union '|'. En este sandBox use extends en 'c' y normal en 'b' para ver si eso cambiaba algo. El resultado fue el mismo pero lo aclaro para el descarte.

//Union
interface a {
    prop1: string;
    prop2: number;
}
interface b {
    prop1: string;
    prop2: number;
    prop3: boolean;
}

interface c extends a {
    prop3: boolean;
}

type AoB = a | b | c;


let q: AoBoC;

Cuando intento acceder a q. solo muestra prop1 y prop2. Necesito acceder a prop3 sin usar intersección '&' que me permite acceder a las propiedades de otra interface pero necesito que se pueda acceder solo cuando se lo determine o se lo llama de determinado lugar por eso pienso que la forma es el tipo Union. De todas formas indíquenme si hay una forma sea como sea de cumplir con la idea.

Adjunto foto del 'sandBox' introducir la descripción de la imagen aquí

Editado: Agrego esto por las respuestas y para ver si se entiende un poco mejor. En efecto el punto es ¿Por que de base, sin declarar nada, queda con solo un valor? dejándome solo acceder a 'A'. Si aun no inicialice ni decidí de que tipo va a ser pero de forma predeterminada solo me deja acceder a las propiedades de 'A'.

Algo que puede ser util, ¿cuales son todas las formas en que decide que tipo va a usar de las uniones? Con los datos primitivos es fácil por que es cuestión de una comprobación de tipo, pero en el caso de una interfaz como arriba no lo estoy consiguiendo. Gracias.

Editado: Respuesta de Jaime menendez: "Tanto si es de tipo A, como si es de tipo B, como si es de tipo C, SIEMPRE existirán los tipos prop1 y prop2, al menos de la forma que los estás declarando. Typescript te va a autocompletar esas dos propiedades porque, sin importar el tipo de objeto que inicialices, SIEMPRE existen esas propiedades en los 3 objetos. Typescript sabe, que sea el tipo que sea, tendrá prop1 y prop2, porque A tiene prop1 y prop2, B tiene prop1 y prop2 y C al extender a A también tiene prop1 y prop2. Por tanto, SIEMPRE van a estar ahí, lo cual no significa que ts esté forzando a que sea del tipo A, simplemente es la definición de union."

3
  • 1
    ¿O sea quieres crear una unión que se comporte como una intersección? Eso no tiene ningún sentido. Explica para que lo necesitarías porque yo lo que veo que quieres es una intersección pero sin que sea intersección. Si quieres unir dos interfaces con una nueva propiedad usa por ejemplo interface c extends a, b { prop3: boolean;} y declara q de tipo c.
    – Jaime
    Commented el 2 may. 2022 a las 21:49
  • Lo que pasa es que en el ambito donde lo quiero aplicar la interfaz AoB son los valores que puede tomar una propiedad que forma parte a su vez de otra y la estructura de las interfaces "padre" se mantiene igual en todos los lugares donde se usa a excepción de algunas propiedades que se agregan y/o cambian su valor. Exactamente es una propiedad denominada "values" y cada grafico me agrega propiedades exclusivas de su ámbito. La intersección funciona pero no queda del todo bien por que me da acceso a todas las propiedades sea de donde sea y sea que se llame y como sea que lo declare.
    – BCBB
    Commented el 3 may. 2022 a las 12:17
  • Si uso una interseccion al poder acceder a todo desde cualquier lugar pierde el sentido. Cuando uno crea Uniones dependiendo las comprobaciones y la forma en que se declare tomara uno U otro valor y dependiendo el valor que tome tendra acceso a 'x' o 'y' propiedades. ¿Que ocurre? es que como dije arriba esta interfaz que tendra varios tipos se encuentra dentro de otras 2 y resulta que esa estructura se mantiene igual para todos a exepcion de esta propiedad "values" que puede cambiar agregando mas propiedades.
    – BCBB
    Commented el 3 may. 2022 a las 12:24

2 respuestas 2

2

Para que que Typescript sea capaz de darse cuenta de qué tipo concreto es debemos preguntar por propiedades que definimos expresamente para que los reconozca En tu código TypeScript te muestra el acceso a las propiedades comunes que son prop1 y prop2 no te muestra expresamente todas las de la interface "a" Te muestra las comunes a todas ellas. Si "a" tuviera otra propiedad exclusiva por ejemplo prop3 que no fuera común al resto no te daría acceso directo a ella sin una comprobación ya que no sabría a cual interface se pretende acceder de forma segura

    interface a {
    prop1: string;
    prop2: number;
    prop3: boolean
}
interface b {
    prop1: string;
    prop2: number;
}

interface c extends a {
    prop3: boolean;
}

type AoB = a | b | c;


let q: AoB;
//q.--> te da como opciones solo a prop1 y prop2 comunes
    

Entonces se requiere comprobar incluyendo a una propiedad común Sea llamar a una función mediante un parámetro cuya interface puede ser cualquiera de las interfaces definidas en al unión hay que incluir una propiedad común como el tipo en cada interface para que asi Typescript pueda comprobar a cual interface acceder

interface jugador {
    type: 'jugador'| 'suplente';
    nombre: string;
    goles: number;
  }
  interface arbitro {
    type: 'arbitro';
    nombre: string;
    rojas: number;
    disponible: boolean;
  }
  interface suplente extends jugador {
     type:'suplente';
    lesionado: boolean
  }
  
  type AoB = (jugador | arbitro | suplente);
  

  function print(obj: AoB): void {
  
    switch (obj.type) {
      case 'jugador':
        {
          console.log(`Jugador  :${obj.nombre} goles :${obj.goles}`);
          break
        }
        case 'suplente':
        {
          console.log(`Jugador Suplente :${obj.nombre} goles :${obj.goles}lesionado:${obj.lesionado}`);
          break
        }
      case 'arbitro':
        {
          console.log(`Arbitro :${obj.nombre} rojas :${obj.rojas} disponible:${obj.disponible} `);
          break
        }
    }
  }


  const alvarez: AoB = {
    type: 'jugador',
    nombre: 'Alvarez',
     goles:12
  } as jugador
  const suarez: AoB = {
    type: 'suplente',
    nombre: 'Suarez',
    goles:10,
    lesionado: true
  } as suplente
  
  const polo: AoB = {
    type: 'arbitro',
    nombre: 'Polo',
    rojas: 3,
    disponible: true
  } as arbitro
  print(alvarez);
  print(suarez);
  print(polo);

Mostrara:

[LOG]: "Jugador  :Alvarez goles :12" 
[LOG]: "Jugador Suplente :Suarez goles :10lesionado:true" 
[LOG]: "Arbitro :Polo rojas :3 disponible:true " 

Referencias:Tutorial -->UNION TYPE Tambien en la pagina de Typescript Discriminating Unions

5
  • 1
    Bien ahí, un escenario simple de entender a simple lectura, tenga su +1.
    – fredyfx
    Commented el 3 may. 2022 a las 20:52
  • Lo que ocurre es que ahí ya los instanciaste. Arriba mismo en la foto hay una linea comentada que es 'q' instanciada como tipo 'b'. Una vez instanciado toma el tipo según las propiedades del objeto. Esta perfecto lo que me pasas pero si no lo instancias la marca de error persiste. En el espacio de trabajo en lugar de un "type" tengo un "chartType" (tipo de grafico) según el tipo de chart será una misma estructura para los datos pero con una o 2 propiedades mas en cierto objeto child. De todas formas lo testie pero no funciono, es cuestión de que hay que instanciarlo. Gracias igual.
    – BCBB
    Commented el 4 may. 2022 a las 12:31
  • Para poder acceder e inicializar una propiedad de alguna de las interfaces que se declaran en la Union que es lo que comentas una forma es la que muestro si eso no resuelve el problema pensaría que los elementos con los que quiero resolverlo no son los adecuados igual miro un poco mas tu consulta pero no veo otra forma que no sea lo que mencionas como instanciarlo antes ya que typescript no lo va a reconocer
    – nestdan
    Commented el 4 may. 2022 a las 14:04
  • Segun entiendo para lo que requerís tener acceso sin instanciar según tu comentario no veo forma salvo otras del tipo que ya te comentaron. Plantearía otra forma quizás con clases
    – nestdan
    Commented el 4 may. 2022 a las 14:04
  • estas usando esto-->github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/…
    – nestdan
    Commented el 4 may. 2022 a las 15:03
0

Esta parte marea por donde la veas:

Necesito acceder a prop3 sin usar intersección '&' que me permite acceder a las propiedades de otra interface pero necesito que se pueda acceder solo cuando se lo determine o se lo llama de determinado lugar por eso pienso que la forma es el tipo Union.

El motivo es simple, ¿quieres cruzar los tipos intersectados pero que sean diferentes?

Luego de darle vueltas varias veces, quizás lo que buscas es que "encaje" en alguno de los tipos. Y bueno, para ello vas a tener que hacer todas las propiedades Nullable con el ?, de lo contrario TypeScript te va a exigir que le asignes valores a dichas propiedades.

interface a {
    prop1?: string;
    prop2?: number;
}
interface b {
    prop1?: string;
    prop2?: number;
    prop3?: boolean;
}

interface c extends a {
    prop4?: boolean;
}

type AoB = c | b | a;
const q: AoB = {
prop3: true,
};
console.log(q);

Otra cosa a considerar es que puedes extender una interface con múltiples interfaces:

interface a {
    prop1?: string;
    prop2?: number;
}
interface b {
    prop1?: string;
    prop2?: number;
    prop3?: boolean;
}

interface c extends b,a { // 1. Nótese que estás generando una extensión de B y de A.
    prop4?: boolean;
}

type AoB = c | a; // 2. Y como B está incluida en C, tranquilamente puedes usar sus propiedades.
const q: AoB = {
prop3: true,
};
console.log(q);

Lo único que me preocupa es que tengas una interfaz de este modo, darle mantenimiento hará que los desarrolladores hagan una pausa para entender qué se quiere lograr. Sería interesante que coloques el escenario para tener una idea más clara. Considera que los tipos que vienen por TypeScript deben hacer más eficiente el desarrollo de software.

13
  • ¿Para que crear type AoB = c | a si c extiende directamente de a y b? ¿Por qué no usar simplemente la interfaz c? Por otro lado el primer script es lo mismo que tiene el usuario definido, igual no obtendrá la propiedad prop4 de la interfaz c a menos que lo declare explícitamente. El problema no es tu respuesta, es que creo que el mismo no sabe ni lo que quiere.
    – Jaime
    Commented el 2 may. 2022 a las 22:24
  • 1
    Ni idea hermano, para ser sincero, me pareció interesante el escenario enredado y pues, intenté tratar de desenredarlo un poco.
    – fredyfx
    Commented el 2 may. 2022 a las 23:05
  • 1
    @BCBB "Si aun no inicialice ni decidi de que tipo va a ser pero de forma predeterminada solo me deja acceder a las propiedades de 'A'." Aquí tienes un error. NO es que te esté dejando acceder a las propiedades de A ni lo esté inicializando en A, es más simple que eso. Tanto si es de tipo A, como si es de tipo B, como si es de tipo C, SIEMPRE existirán los tipos prop1 y prop2, al menos de la forma que los estás declarando. Typescript te va a autocompletar esas dos propiedades porque, sin importar el tipo de objeto que inicialices, SIEMPRE existen esas propiedades en los 3 objetos.
    – Jaime
    Commented el 3 may. 2022 a las 13:24
  • 1
    Typescript sabe, que sea el tipo que sea, tendrá prop1 y prop2, porque A tiene prop1 y prop2, B tiene prop1 y prop2 y C al extender a A también tiene prop1 y prop2. Por tanto, SIEMPRE van a estar ahí, lo cual no significa que ts esté forzando a que sea del tipo A, simplemente es la definición de union.
    – Jaime
    Commented el 3 may. 2022 a las 13:26
  • 1
    perfecto, lo comprobé y es como comentas. Aparecen las propiedades comunes a todos los tipos de la unión.
    – BCBB
    Commented el 3 may. 2022 a las 13:35

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.