Learn TypeScript 3 by Building Web Applications

Functional Components with TypeScript

Let's initiate our discussion with a basic example:

import React from 'react'; 
 
export const HelloWorldTSFunctionalComponent = () => ( 
    <span>Hello world from our TS Functional Component</span> 
); 

This is the simplest TypeScript-based Functional Component that you can imagine. As you can see, there's really nothing visible to distinguish it from what we saw earlier in this chapter in pure JS.

As with class components, we could add types here and there, such as : FC<Props> (that is, Functional Component) for the component type or : JSX.Element for the component function's return type, but it would not help us at all; it would just hinder the readability.

Compare the previous example with the following: ...