@types typings export both "public" types meant for your use as well as "private" types that are for internal use.
Check SaltyCrane's React TypeScript Cheatsheet for a nice autogenerated complete reference.
Most Commonly Used Interfaces and Types
ReactNode- anything that is renderable inside of JSX, this is NOT the same as what can be rendered by a component!
Component- base class of all class-based components
PureComponent- base class for all class-based optimized components
FunctionComponent- a complete interface for function components, often used to type external components instead of typing your own
CSSProperties- used to type style objects
- all events: used to type event handlers
- all event handlers: used to type event handlers
- all consts:
Fragment, ... are all public and reflect the React runtime namespace
Not Commonly Used but Good to know
Ref- used to type
ElementType- used for higher order components or operations on components, e.g. Polymorphic Components
ReactElement- can be used if you want to pass it to
cloneElementaka it's pretty rarely used
ComponentType- used for higher order components where you don't specifically deal with the intrinsic components
ReactPortal- used if you specifically need to type a prop as a portal, otherwise it is part of
ComponentClass- a complete interface for the produced constructor function of a class declaration that extends
Component, often used to type external components instead of typing your own
JSXElementConstructor- anything that TypeScript considers to be a valid thing that can go into the opening tag of a JSX expression
ComponentProps- props of a component - most useful for Wrapping/Mirroring a HTML Element
ComponentPropsWithRef- props of a component where if it is a class-based component it will replace the
refprop with its own instance type
ComponentPropsWithoutRef- props of a component without its
HTMLAttributes- these are the most generic versions, for global attributes (see a list of attributes marked as "global attribute" on MDN). In general, prefer
JSX.IntrinsicElements, or specialized HTMLAttributes interfaces:
List of specialized HTMLAttributes
Note that there are about 50 of these, which means there are some HTML elements which are not covered.
- all methods:
cloneElement, ... are all public and reflect the React runtime API
@Ferdaber's note: I discourage the use of most
...Element types because of how black-boxy
JSX.Element is. You should almost always assume that anything produced by
React.createElement is the base type
Element- the type of any JSX expression. You should ideally never need to see or use this, but you do because of a limitation of TypeScript.
LibraryManagedAttributes- It specifies other places where JSX elements can declare and initialize property types. Used to resolve static
propTypeswith the internal props type of a component.
IntrinsicElements- every possible built-in component that can be typed in as a lowercase tag name in JSX. If you're using this to get the attributes for a HTML element,
React.ComponentProps<element>may be more readable as it doesn't require knowing what "Intrinsic" means.
Not commonly used but good to know
IntrinsicAttributesset of attributes that all
IntrinsicElementssupport... basically just
ElementChildrenAttributename of property that TS looks at to figure out what types of children a component supports. Basically the
ElementAttributesPropertyname of property that TS looks at to figure out what attributes a component supports. Basically the
propsproperty (for a class instance)
Anything not listed above is considered an internal type and not public. If you're not sure you can check out the source of
@types/react. The types are annotated accordingly.
Adding non-standard attributes
The attributes allowed on host components such as
img follow the
HTML living standard. New features that are not yet part of the living standard
or are only implemented by certain browsers will therefore cause a type error. If
you specifically write code for these browsers or polyfill these attributes you can
use module augmentation to still get those components type checked without having
To be written