import { Equal, Expect } from "../helpers/type-utils";
interface Button<T> {
value: T;
label: string;
}
interface ButtonGroupProps<T> {
buttons: Button<T>[];
onClick: (value: T) => void;
}
const ButtonGroup = <T extends string>(props: ButtonGroupProps<T>) => {
return (
<div>
{props.buttons.map((button) => {
return (
<button
key={button.value}
onClick={() => {
props.onClick(button.value);
}}
>
{button.label}
</button>
);
})}
</div>
);
};
<>
<ButtonGroup
onClick={(value) => {
type test = Expect<Equal<typeof value, "add" | "delete">>;
}}
buttons={[
{
value: "add",
label: "Add",
},
{
value: "delete",
label: "Delete",
},
]}
></ButtonGroup>
</>;
It is important to use <T extends string>, otherwise Typescript cannot infer the exact value
The type flow down from ButtonGroup to Button, infer the value of `add | delete`, then bubble up to ButtonGroupProps, set onClick(value: T); then bubble up to ButtonGroup component, set generic type T.
- Typescript Inference Multiple Generic Helperstypescript inference multiple generic react typescript inference fixing componentprops typescript inference satisfies typescript generic reduce write typescript cleanup generic wrapper typescript built-in possible generic typescript component function generic helpers parameter helpers core to helpers文件helm tpl