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
create-react-app
For new projects:
npx create-react-app my-app --template typescript
For existing projects:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
You can find more information on create-react-app in their documentation.
Next.js
For new projects
npx create-next-app@latest --ts
For existing projects
You can create an empty tsconfig.json file in the root folder of the Next.js project. After that Next.js will automatically set up this file with default values.
You can find more information on Next.js documentation.
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
Declaring variables in TypeScript
In TypeScript, you can define variables by specifying their type explicitly as follows
let name: 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 name: string = 'John';
const age: number = 20;
let isMarried: boolean = false;
The above example 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.