React 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 Redux sample, to TypeScript.

Here is the jsx version:

import React, { PropTypes } from 'react'

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

export default Todo

And here is the TypeScript version:

/// <reference path="../typings/browser.d.ts" />

import React, { PropTypes } from 'react';

interface TodoProps {
    onClick: any;
    completed: boolean;
    text: string;
}

const Todo: React.StatelessComponent<TodoProps> = ({ onClick, completed, text }) => (
    <li onClick={ onClick } style = {{ textDecoration: completed ? 'line-through' : 'none' }} > { text } </li>
);

Todo.propTypes = {
    onClick: PropTypes.func.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
}

export default Todo

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.