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.

Alexey is the Event Sourcing and Domain-Driven Design enthusiast and promoter. He works as a Developer Advocate at Event Store and Chief Architect at ABAX.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store