Functional components are one of the ways to create a UI component in React. You can check another way how to create a typescript react class component.

Functional components are stateless components that are similar to Functions in javascript.

Functional components are normal function that takes props and returns JSX Element

It can be created in many ways in Typescript

  • Normal functions with typed props
  • React.FunctionComponent or React.FC Interface

Functional components react typescript example

There are many we can create Functional Components in typescript. In Typescript React Component, Function takes props object and returns JSX data.

Let’s create a props object of type MessageProps

interface MessageProps {
    message: string;
}

Also, Can use type in place of the interface

type MessageProps {
    message: string;
}

Let’s see multiple ways to create Typescript functional components

  • Normal Function with typed props arguments

Declare Normal Function with props parameters of the type above MessageProps(use type or interface).

Here is an example

import React, { FC } from 'react';

interface MessageProps {
    message: string;
}


function FunctionalComponent(props:MessageProps){
    return (
        <>
            <h1>Welcome {props.message}</h1>
        </>
    );
};

export default FunctionalComponent;
  • Normal Function with ES6 props destructuring assignment props object is declared with destructuring assignment syntax.

    You have full control over optional parameters

    In the below, Component, MessageProps contains a message and optional user.

    with destructuring syntax, you can pass the properties names with optional parameters as seen below

  import React, { FC } from 'react';

interface MessageProps {
    message: string;
    user?: string
}


function FunctionalComponent({message,user="loggeduser"}:MessageProps){
    return (
        <>
            <h1>Welcome {message} - {user}</h1>
        </>
    );
};

export default FunctionalComponent;
  • use FunctionComponent or FC

Another way to create a functional component is to import the FunctionComponent or FC type.

The disadvantage of this approach is

  • Implicit type of children
  • Don’t support generics
  • default static properties such defaultProps are not typed

Here is an code using React FC example

import React, { FC } from 'react';

interface MessageProps {
    message: string;
}

const FunctionalComponent: FC<MessageProps> = ({ message }) => {
    return (
        <>
            <h1>Welcome {message}</h1>
        </>
    );
};

export default FunctionalComponent;

FC is an alias for FunctionComponent. Also, can use in creating components.

Here is an code using React FunctionComponent example

import React, { FunctionComponent } from 'react';

interface MessageProps {
    message: string;
}

const FunctionalComponent21: FunctionComponent<MessageProps> = ({ message }) => {
    return (
        <>
            <h1>Welcome {message}</h1>
        </>
    );
};

export default FunctionalComponent21;

All the above functional components are called with below syntax in other parent components.

      <FunctionalComponent message={"john"}></FunctionalComponent>

Typescript Functional Components features

  • Each component is similar to Normal Functions with typed props object
  • props data are accessed using this.props.counter
  • can also use hooks to manage component state
  • Functions can also be arrow functions