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.