I am looking to create a component named Foo that can accept two different sets of props:
Foo({a: 'a'})Foo({a: 'a', b: 'b', c:'c'})
The prop {a: 'a'} is mandatory.
These scenarios should be considered invalid:
Foo({a: 'a', b: 'b'}) // ❌
Foo({a: 'a', c: 'c'}) // ❌
Below is the approach I have tried.
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) {
// Only able to access `props.a` here
return <span>{props.a}</span>;
}
// sample usage
Foo({a: 'a'}) // ✅
Foo({a: 'a', b: 'b', c:'c'}) // ✅
Foo({a: 'a', b: 'b'}) // ❌
Foo({a: 'a', c: 'c'}) // ❌
While it partially works, inside the Foo component, I can only access the prop a, not b and c. Ideally, I would like to be able to access b and c within the component and determine if they exist or not before using them. Is there a way to achieve this?