React Functional Component with Typescript

Typescript and React have been a powerful combination

• I've found that people are afraid to move to typescript because they think that writing typescript requires a lot of boilerplate.
• Believe me, i was one of those people. I used to think the same way until i met typescript. I'll agree that at the beginning it was a bit intimidating with all the types and everything but it's fun once you get the hang of it.
• Once you start using typescript, going back to Javascript feels like you've lost some power😅.At least that's what i found in my experience.
• I want to take out your fear of using typescript with react and help you get started in a way that you don't feel so intimidated.
• We are going to write a Functional Component using react and typescript.
  
  

Functional components with TypeScript

• You can create functional components in TypeScript just like you would in JavaScript.

• The main difference is the FC interface, which stands for Function Component. We use this to tell TypeScript that this is a React function component and not just a regular function.

• Optionally, we can add types for the props by defining an interface and passing it to the generic FC.

• A functional component then typically looks like this:
  

       

  
  

      import React from 'react';

  
  

      var Customer:React.FC =()=>{

        return(

          <div>

            <h2>Custom React Typescript </h2>

          </div>

        )

      }

  
  

      export default Customer;
• React TypeScript Boilerplate Extension for VS Code editor