Section 4: @types/react and @types/react-dom APIs

The @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.

@types/react

Link to .d.ts

Namespace: React

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
• FC, 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: Children, Fragment, ... are all public and reflect the React runtime namespace

Not Commonly Used but Good to know

• Ref - used to type innerRef

• 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 cloneElement aka 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 ReactNode

• 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 ref prop with its own instance type

• ComponentPropsWithoutRef - props of a component without its ref prop

• HTMLProps and HTMLAttributes - these are the most generic versions, for global attributes (see a list of attributes marked as "global attribute" on MDN). In general, prefer React.ComponentProps, JSX.IntrinsicElements, or specialized HTMLAttributes interfaces:

  <details>

  <summary>

  List of specialized HTMLAttributes

  </summary>

  Note that there are about 50 of these, which means there are some HTML elements which are not covered.

  - `AnchorHTMLAttributes`

  - `AudioHTMLAttributes`

  - `AreaHTMLAttributes`

  - `BaseHTMLAttributes`

  - `BlockquoteHTMLAttributes`

  - `ButtonHTMLAttributes`

  - `CanvasHTMLAttributes`

  - `ColHTMLAttributes`

  - `ColgroupHTMLAttributes`

  - `DataHTMLAttributes`

  - `DetailsHTMLAttributes`

  - `DelHTMLAttributes`

  - `DialogHTMLAttributes`

  - `EmbedHTMLAttributes`

  - `FieldsetHTMLAttributes`

  - `FormHTMLAttributes`

  - `HtmlHTMLAttributes`

  - `IframeHTMLAttributes`

  - `ImgHTMLAttributes`

  - `InsHTMLAttributes`

  - `InputHTMLAttributes`

  - `KeygenHTMLAttributes`

  - `LabelHTMLAttributes`

  - `LiHTMLAttributes`

  - `LinkHTMLAttributes`

  - `MapHTMLAttributes`

  - `MenuHTMLAttributes`

  - `MediaHTMLAttributes`

  - `MetaHTMLAttributes`

  - `MeterHTMLAttributes`

  - `QuoteHTMLAttributes`

  - `ObjectHTMLAttributes`

  - `OlHTMLAttributes`

  - `OptgroupHTMLAttributes`

  - `OptionHTMLAttributes`

  - `OutputHTMLAttributes`

  - `ParamHTMLAttributes`

  - `ProgressHTMLAttributes`

  - `SlotHTMLAttributes`

  - `ScriptHTMLAttributes`

  - `SelectHTMLAttributes`

  - `SourceHTMLAttributes`

  - `StyleHTMLAttributes`

  - `TableHTMLAttributes`

  - `TextareaHTMLAttributes`

  - `TdHTMLAttributes`

  - `ThHTMLAttributes`

  - `TimeHTMLAttributes`

  - `TrackHTMLAttributes`

  - `VideoHTMLAttributes`

  - `WebViewHTMLAttributes`

  </details>

• all methods: createElement, 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 React.ReactElement.

Namespace: JSX

• 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 defaultProps and propTypes with 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

• IntrinsicAttributes set of attributes that all IntrinsicElements support... basically just key.
• ElementChildrenAttribute name of property that TS looks at to figure out what types of children a component supports. Basically the children property
• ElementAttributesProperty name of property that TS looks at to figure out what attributes a component supports. Basically the props property (for a class instance)

Don't use/Internal/Deprecated

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.

• SFCElement
• SFC
• ComponentState
• LegacyRef
• StatelessComponent
• ReactType

Adding non-standard attributes

The attributes allowed on host components such as button or img follow the HTML living standard. New features that are not yet part of specification or are only implemented by certain browsers will therefore cause a type error. If you specifically write code for these browsers or polyfill this attributes you can use module augmentation to still get those components type checked without having to use any or @ts-ignore.

In this example we'll add the loading attribute which adds support for lazy-loading images on Chrome:

// react-unstable-attributes.d.ts

import "react";

declare module "react" {

interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {

loading?: "auto" | "eager" | "lazy";

}

}

@types/react-dom

To be written