How to create functional components in React with Typescript

Typescript is a JavaScript superset that promotes strict syntax for the language. Type checking, static typing, and better readability are the main features of Typescript over vanilla javascript.

Due to its features, it was declared as the 2nd most loved programming language, surpassing a language like Python. This is the best time to learn and shift to typescript for your frontend projects.

In this article, we will be — — -

Exploring ReactJS with Typescript work to create functional components.

So, let’s dive into it!

Project setup

With the following command, you can start your project with no effect. The official react create-react-app supports typescript templates.

npx create-react-app my-app --template typescript

With this installed, our project structure will look as follows.

The project has a few differences from the plain javascript. This template tsconfig.json which has the Typescript configuration options for the project.

Along with this, there are no files with js extension as it is replaced by tsx which is Typescript JSX.

The default tsconfig.json is the bare minimum for the project so to enable the best settings for the Typescript, make sure you configure tsconfig.json as follows for the best results.

"compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "sourceMap": true, 
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "incremental": true,
  },
  "include": [
    "src"
  ],
  "exclude": ["node_modules", "build"] 
}

These are the recommended settings from the react typescript cheatsheet community and all the options are explained decently in the official Typescript Handbook.

Now that we have our React and Typescript project setup, we will see how we can
create functional components in React with Typescript.

Functional Components.

Functional components are loved by the developers due to their simple and powerful nature. In Typescript, there are multiple ways of using these components and we will get to them one by one.

The most simple approach is to create a function that takes a prop. We can create it as follows.

function Example(props:ExampleProps) {
  return (
    <div>
      
   <p>{props.info1}</p>
   <p>{props.info2}</p>
    </div>
  );
}
export default Example;

Even though this approach is simpler and almost identical to our traditional one, it does not give complete information on the types. Moreover, in the case of using the children’s prop, you are out of luck here.

React provides us with an FC interface that stands for Functional Component. It tells that typescript that it is a React Functional component, not another common function.

Furthermore, we can add props as we did above to our functional component in the angle brackets.

The FC interface also automatically adds children props to your component which is considered an advantage over the above-used technique. Using the FC interface, our previously created UserCard will look as follows.

import  { FC } from 'react';

interface StudentInfo {
  Name: string;
  phoneNumber: number;
}
const StudentCard:FC<UserInfo>=({Name, phoneNumber})=> {
  return (
    <div>
      
   <p>{Name}</p>
   <p>{phoneNumber}</p>
    </div>
  );
}
export default StudentCard;

By using the FC interface with the props, we do not have to use the prop interface inside the function parameters.

This makes things look a lot cleaner and concise. In the case of a functional component that does not accept any props, we can create a stateless component using the FC interface as below.

import  { FC } from 'react';
const Example:FC=()=> {
 return (
   <div>
   </div>
 );
}
export default Example;

Type safety for the state in functional components.

Type safety for the states in functional components is very straightforward and simple.

We do not need to change our code for the purpose as it is automatically done by the useState() hook. It will automatically inherit the type from the value we have used for its initialization.

Conclusion

React and Typescript when used together can do wonders especially in large-sized projects that are expected to grow in the future.

It is true that the learning curve is not very beginner-friendly but in the long run, the effort eventually pays off.

This tutorial gives you a perfect direction for creating functional components in React with Typescript. For further exploration, you have the cheat sheet for it.

Originally published at: https://articles.jalantechnologies.com/top-form-handling-libraries-in-react/

What’s the biggest thing you’re struggling with right now that we as a technology consulting company can help you with? Feel free to reach out to us. We hope our assistance will help!