ReactJS stateless functional components in TypeScript

React 1.5 introduced stateless components, declared as pure functions. Sometimes, these components are referred as “functional components”.

It is indeed a very nice way to define rendering components that have no state and no side effects.

I tried to implement those using TypeScript and found that there are no samples how to do this, plain jsx file won’t compile do to undefined propTypes element and the whole type goodness was somewhat lost.

I looked at the React type definition file and found that proper typing is available for this type of components. Here, you can find out how to convert a basic Todo component from Redus sample, to TypeScript.

Here is the jsx version:

And here is the TypeScript version:

As you can see, there is a special generic type for this style of components, that you need to use. Declaring props as an interface applies proper typing on the function arguments, on propTypes and defaultState functions.

Originally published at on March 21, 2016.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.