Quiero tener un componente Foo que acepte dos tipos de accesorios:
Foo({a: 'a'})Foo({a: 'a', b: 'b', c:'c'}) donde se requiere {a: 'a'} .
Estos deberían ser inválidos
Foo({a: 'a', b: 'b'}) // ❌ Foo({a: 'a', c: 'c'}) // ❌Aquí está mi intento.
type BaseProps = { a: "a"; }; type VariantPrps = { b: "b"; c: "c"; } & BaseProps; function Foo(props: BaseProps): React.ReactNode; function Foo(props: VariantPrps): React.ReactNode; function Foo(props: BaseProps | VariantPrps) { // I can only access `props.a` inside return <span>{props.a}</span>; } // usage Foo({a: 'a'}) // ✅ Foo({a: 'a', b: 'b', c:'c'}) // ✅ Foo({a: 'a', b: 'b'}) // ❌ Foo({a: 'a', c: 'c'}) // ❌ funciona hasta cierto punto, pero dentro de Foo solo puedo acceder a c b Mi intención es que dentro de ese componente pueda acceder a b y c y verificar si existen o no antes de usarlos. ¿Hay una manera de hacer eso?
Considere este ejemplo:
import React from 'react' // credits goes to https://stackoverflow.com/questions/65805600/type-union-not-checking-for-excess-properties#answer-65805753 type UnionKeys<T> = T extends T ? keyof T : never; type StrictUnionHelper<T, TAll> = T extends any ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>> : never; type StrictUnion<T> = StrictUnionHelper<T, T> type BaseProps = { a: "a"; }; type VariantPrps = { b: "b"; c: "c"; } & BaseProps; function Foo(props: BaseProps): React.ReactNode; function Foo(props: VariantPrps): React.ReactNode; function Foo(props: StrictUnion<BaseProps | VariantPrps>) { props.a // "a" props.b // "b" | undefined props.c // "c" | undefined // I can only access `props.a` inside return <span>{props.a}</span>; } // usage Foo({ a: 'a' }) // ✅ Foo({ a: 'a', b: 'b', c: 'c' }) // ✅ Foo({ a: 'a', b: 'b' }) // ❌ Foo({ a: 'a', c: 'c' }) // ❌ Se le permitió usar solo a propiedad porque es propiedad común para ambos tipos. ver documentos