I want to make my props be either type A, or B. For example
export default function App() {
type Checkbox = {
type: "checkbox";
checked: boolean;
};
type Dropdown = {
type: "dropdown";
options: Array<any>;
selectedOption: number;
};
type CheckboxOrDropdown = Checkbox | Dropdown;
const Component: FC<CheckboxOrDropdown> = (props) => {
return <>"...correct component"</>;
};
// these returns are just examples
return <Component type="checkbox" checked={true} />;
return <Component type="dropdown" options={[]} selectedOption={0} />;
}
Here's a fiddle
How can I achieve the same, but without the "type" prop? So that TS recognizes the type based on other props?
You can overload your component. By overloading here I mean intersection of two functional components:
import React, { FC } from 'react'
export default function App() {
type Checkbox = {
checked: boolean;
};
type Dropdown = {
options: Array<any>;
selectedOption: number;
};
const Component: FC<Checkbox> & FC<Dropdown> = (props) => {
return <>"...correct component"</>;
};
return [<Component checked={true} />, <Component options={[]} selectedOption={0} />];
}
This is the less verbose version I know.
If you have a lot of component types and you don't want to manually intersect them, you can use distributivity.
import React, { FC } from 'react'
export default function App() {
type Checkbox = {
checked: boolean;
};
type Dropdown = {
options: Array<any>;
selectedOption: number;
};
// credits goes to https://stackoverflow.com/a/50375286
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
k: infer I
) => void
? I
: never;
type Overload<T> = UnionToIntersection<T extends any ? FC<T> : never>
const Component: Overload<Checkbox | Dropdown> = (props) => {
return <>"...correct component"</>;
};
return [<Component checked={true} />, <Component options={[]} selectedOption={0} />];
}