React
Last updated
Was this helpful?
Last updated
Was this helpful?
Our . Here are the key highlights.
Use files with the extension .tsx
(instead of .ts
).
Use "jsx" : "react"
in your tsconfig.json
's compilerOptions
.
Install the definitions for JSX and React into your project : (npm i -D @types/react @types/react-dom
).
Import react into your .tsx
files (import * as React from "react"
).
React can either render HTML tags (strings) or React components. The JavaScript emit for these elements is different (React.createElement('div')
vs. React.createElement(MyComponent)
). The way this is determined is by the case of the first letter. foo
is treated as an HTML tag and Foo
is treated as a component.
An HTML Tag foo
is to be of the type JSX.IntrinsicElements.foo
. These types are already defined for all the major tags in a file react-jsx.d.ts
which we had you install as a part of the setup. Here is a sample of the the contents of the file:
You can define function components simply with the React.FunctionComponent
interface e.g.
Components are type checked based on the props
property of the component. This is modeled after how JSX is transformed i.e. the attributes become the props
of the component.
The react.d.ts
file defines the React.Component<Props,State>
class which you should extend in your own class providing your own Props
and State
interfaces. This is demonstrated below:
React can render a few things like JSX
or string
. These are all consolidated into the type React.ReactNode
so use it for when you want to accept renderables e.g.
The react type definitions provide React.ReactElement<T>
to allow you to annotate the result of a <T/>
class component instantiation. e.g.
Of course you can use this as a function argument annotation and even React component prop member.
The type React.Component<Props>
consolidates React.ComponentClass<P> | React.StatelessComponent<P>
so you can accept something that takes type Props
and renders it using JSX e.g.
It works exactly as expected. Here is an example:
Something like the following works fine:
However, using an arrow generic function will not:
Workaround: Use extends
on the generic parameter to hint the compiler that it's a generic, e.g.:
You basically initialize a variable as a union of the ref and null
and then initialize it as as callback e.g.
And the same with ref's for native elements e.g.
Stateful components with default props: You can tell TypeScript that a property will be provided externally (by React) by using a null assertion operator (this isn't ideal but is the simplest minimum extra code solution I could think of).
SFC with default props: Recommend leveraging simple JavaScript patterns as they work well with TypeScript's type system e.g.
If you are using a web component the default React type definitions (@types/react
) will not know about it. But you can declare it easily e.g. to declare a webcomponent called my-awesome-slider
that takes Props MyAwesomeSliderProps
you would:
Now you can use it in TSX:
As of , you can use a new React.VoidFunctionComponent
or React.VFC
type if you wish to declare that a component does not take children
. This is an interim solution until the next major version of the type defs (where VoidFunctionComponent will be deprecated and FunctionComponent will by default accept no children).
Use as Foo
syntax for type assertions as we .