Yoooo, types in React is actually pretty damn simple! Check it:
type Props = {
label: string;
disabled?: boolean;
onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
style?: React.CSSProperties;
}
function MyButton (props: Props) {
..
}
Or
type Props = {
label: string;
startEnabled?: boolean;
disabled?: boolean;
onChange: (enabled: boolean) => void;
style?: React.CSSProperties;
}
type State = {
enabled: boolean;
}
class MyToggle extends React.Component<Props, State> {
constructor (props: Props) {
super(props);
this.state = {
enabled: !!props.startEnabled
}
}
...
}
90% of the time, the key to finding the right type is hovering over a prop in the JSX.
Obviously it can get more complicated than the above. For example, using generics in your props and writing out HOC. But for 90% of your components, it really is just going to be that simple.