React Types

	TypeScript	Notes
Class Component	React.Component<P, S>	Use static defaultProps = {} inside class components.
Function Component	const MyComponent = (props: P) => {}	Do not use defaultProps. Use default parameters and mark props as optional in the interface.
Ref Functions	T | null	Example: HTMLInputElement | null
Component Props	React.ComponentProps<typeof MyComponent>	Gets type of props type from either a function component or class component.
Component Type	React.ComponentType<P>	Type representing union type of React function component or React class component. Useful when typing HOCs. const withSomething = <P extends WrappedComponentProps>(WrappedComponent: React.ComponentType<P>) => {}
React Element	React.ReactElement or JSX.Element	Type representing a concept of React Element - representation of native DOM component (e.g. <div />), or a user-defined composite component (e.g. <MyComponent />).
React Node	React.ReactNode	Type representing any possible type of React node (basically ReactElement (including Fragments and Portals) + primitive JS types).
CSS Properties	React.CSSProperties	Type representing style object in JSX (useful for css-in-js styles).
HTML Element Attributes	React.{Elm}HTMLAttributes<T>	Type representing attributes for a given DOM component. Example: React.ButtonHTMLAttributes<HTMLButtonElement>
Key	React.Key
Ref	React.Ref<typeof MyComponent>
Synthetic Event	React.SyntheticEvent<T>
Synthetic Focus Event	React.FocusEvent<T>
Synthetic Input Event	React.ChangeEvent<T>	See "React Events" resource. Know the difference between currentTarget and target.
Synthetic Keyboard Event	React.KeyboardEvent<T>
Synthetic Mouse Event	React.MouseEvent<T>

In general with synthetic events, just drop the "Synthetic" portion of the type name. See "React Event TypeScript Definitions" resource for more event types.