How to create React functional components in TypeScript

TypeScript is a superset of JavaScript. Unlike JavaScript, Which is dynamically typed, it is statically typed.  This means you will know the types of variables used in your code at the compile time. This helps you as a developer to check for typed-related errors before the code is executed. If there are no compiled errors, the Typescript code is compiled to Javascript that the browser understands.

How to add Typescript support to your React Project

If React app is set up with

How to create functional components in JavaScript

Most developers today work with functional components in React.  You may have familiar with creating functional components with or without props in the following ways in JavaScript.

import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
};

export default MyComponent;

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default MyComponent;

import React from 'react';

export default function (props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );

}

But, creating functional components in Typescript needs a little bit more work. Let’s see how to do it.

How to create functional components in Typescript

import React from 'react';

interface Props {
  title: string;
  description: string;
}

function MyComponent(props: Props) {

  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default MyComponent;

import React from 'react';

interface Props {
  title: string;
  description: string;
}

const MyComponent: React.FC<Props> = (props) => {

  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default MyComponent;

import React from 'react';

interface Props {
  title: string;
  description: string;
}

export default function (props: Props) {

  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

I will try to explain the above code with the minimum required knowledge of Typescript required to understand to create a functional component in React.

All you need to know is 3 things

1. Declaring variables in TypesCript
2. Object Types in TypeScript
3. Functions in TypesScript

Declaring variables in TypeScript

In TypeScript, you can define variables by specifying their type explicitly as follows

let firstName: string;
const age: number;
let isMarried: boolean;

When you define a variable without an initial value, TypeScript inferred the type of variable as any, which is a special type in TypeScript that represents a value of any type.

You can also specify variable types by Inference

let firstName = 'John';
let age = 20
let isMarried = false;

The above example shows how to define variables with the primitive-types such as string, number, and boolean. 

Ok, Next Let’s see how you can define Objects in TypeScript.

Object Types in TypeScript

Have you noticed something common in the above  TypeScript code when declaring the functional component?

interface Props {
  title: string;
  description: string;
}

 Interface, now what is this interface?

Apart from Primitive types, Typescript offers Object types such as  Interfaces, Type Aliases, Classes, Objects literals, and Unions.

Therefore one common way to define Objects in TypeScript is to use the interface keyword.

If you convert the above code to JavaScript, it would be as 

const props = {
  title:'',
  description:''
}

Functions in TypeScript

You can define functions in TypeScript below

function greetings( statement: string) {
   console.log(statement);
}

As you noticed, unlike in JavaScript, you need to specify the type of the parameter. In this case, the parameter is a string.

This same concept is used when you create a functional component in React with TypeScript.

interface Props {  //we are creating a custom type named Props
  title: string;
  description: string;
}

function MyComponent(props: Props) { //using the type we created

  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

if you want to specify the return type of a function you can do it as follows.

function greetings( statement: string): string {
   return "Hi"+ statement
}

But, it is not necessary to specify the annotation because TypeScript can infer it by the return statement. Thus, you can simplify it as

function greetings( statement: string){
   return "Hi"+ statement
}

Therefore, it is not required to specify it in functional components as well.

Conclusion

TypeScript is a superset of JavaScript. If you have been working with React and JavaScript, switching to TypeScript for medium to large-size projects is recommended. This is because the type system in TypeScript is helpful in debugging and fixing errors. If you are a React developer used to working with JavaScript, the main thing you need to focus on is incorporating TypeScript’s type system into your React projects.