Tengo un objeto que tendrá productos de campo, este campo se completará con la respuesta devuelta por diferentes puntos finales, cada uno de los cuales devolverá un tipo de producto. algo como:
const products = { // each of this kind of products comes from endpoint response someProduct: {}, someOtherProduct: {} anotherProduct: {} }Puedo escribir todos los tipos de productos como este, de acuerdo con esta respuesta :
interface BaseProduct { name: string; description: string; price: number; type: string; } interface SomeProduct extends BaseProduct { genericAttrOne: string; genericAttrTwo: string; } interface OtherProduct extends BaseProduct { anAttributeOne: string; anAttributeTwo: string; } interface AnotherProduct extends BaseProduct { anotherAttributeOne: string; anotherAttributeTwo: string; } type Product = SomeProduct | OtherProduct | AnotherProduct; const productsAsArray: Product[] = []; la situación aquí es que a veces reviso todos los tipos de productos (productsAsArray), y los renderizo, luego el usuario hace clic en algún producto y lo tomo como productSelected . ¿Cómo debo escribir este productSelected si puede ser de cualquier tipo de producto? y para este producto selectedProduct accederé a las propiedades específicas del producto...
Use uniones discriminadas para ayudarlo a reducir su tipo.
Aquí hay un ejemplo:
interface Base { type: string; baseProp: string; } interface T1 extends Base { type: "t1"; t1prop: string; } interface T2 extends Base { type: "t2"; t2prop: string; } interface T3 extends Base { type: "t3"; t3prop: string; } type union = T1 | T2 | T3; function list(arr: union[]) { const randomArrItem = arr[Math.floor(Math.random() * arr.length)]; specificMethod(randomArrItem); } function specificMethod(t: union) { const { type } = t; switch (type) { case "t1": console.log(t.t1prop); // console.log(t.t2prop); // error: Property 't2prop' does not exist on type 'T1'. Did you mean 't1prop'?(2551) break; case "t2": console.log(t.t2prop); break; case "t3": console.log(t.t3prop); break; default: throw new Error("wrong type"); } }Ver TS Playground: https://tsplay.dev/wj4obm
Dado que tienen la misma firma, agregue un nuevo type de propiedad que sea una enumeración.
La razón para usar una enumeración es que puede verificarla con un caso if o switch.
const enum ProductType { one = "ONE", two= "TWO", three= "THREE", } interface BaseProduct { name: string; description: string; price: number; } type ProductOne = BaseProduct & { type: ProductType.one, prop1: string, prop2: string } type ProductTwo = BaseProduct & { type: ProductType.two, prop1: string, prop2: string } type ProductThree = BaseProduct & { type: ProductType.three, prop1: string, prop2: string } type Product = ProductOne | ProductTwo | ProductThree ; function handleProductSwitch(product: Product){ switch(product.type){ case ProductType.one: // handle ProductOne case ProductType.two: // handle ProductTwo case ProductType.three: // handle ProductThree case default: } } function handleProductIf(product: Product){ if(product.type === ProductType.one) productOneHandler(product); if(product.type === ProductType.two) productTwoHandler(product); if(product.type === ProductType.three) productThreeHandler(product); }