TypeScript with React: Benefits and Best Practices

When used with React, TypeScript improves development speed, maintainability, and scalability by adding static typing, which provides better error detection and enhanced code clarity.

Setting Up TypeScript in a React Project

To get started with TypeScript in React, you can either create a new React app with TypeScript or add TypeScript to an existing project.

1. Create a New React App with TypeScript

To create a new React app with TypeScript, run:

npx create-react-app my-app --template typescript
cd my-app
npm start

2. Adding TypeScript to an Existing React Project

To add TypeScript to an existing project, run:

npm install --save-dev typescript @types/react @types/react-dom @types/node

Update tsconfig.json to configure TypeScript settings.

Best Practices for Using TypeScript in React

Below are the best practices for using typescript in react:

1. Use Type Annotations for Props and State

Output:

Intial Render:

Hello, Mahima!
[ Show Birthday Greeting ] ← (button)

After clicking the Button

Hello, Mahima!

🎉 Happy Birthday! 🎉

2. Use React.FC for Functional Components

Output:

Hello, Mahima !
🎉 Happy Birthday! 🎉

3. Define Types for Event Handlers

Output:

4. Use Enums for Constants

Output:

5. Use Interfaces for Complex Objects

Output:

{
 id: 1,
 name: 'Mahima',
 email: 'mahima@example.com',
 isActive: true,
 address: {
 street: '123 Main St',
 city: 'Delhi',
 state: 'DL',
 zipCode: '110001'
 },
 hobbies: [ 'Reading', 'Coding' ],
 company: {
 name: 'GeeksforGeeks',
 location: {
 street: '456 AI Street',
 city: ',Noida'
 state: 'KA'
 }
 }
}

6. Use Generics for Reusable Components

Output:

Fruit List
1. Apple
2. Banana
3. Cherry

7. Use Type Assertions Cautiously

Output:

8. Enable Strict Mode in TypeScript

{
 "compilerOptions": {
 "strict": true
 }
}

Common TypeScript Errors in React and How to Fix Them

Here are some common TypeScript errors you may encounter in React and the solutions to resolve them.

1. Error: Property Does Not Exist on Type

Problem: Trying to access the undefined property

interface User {
 name: string;
}
const user: User = { name: 'John' };
console.log(user.age); // Error: Property 'age' does not exist

Solution: In the interface define all the properties

2. Error: Argument is Not Assignable to Parameter Type

Problem: Wrong prop types are passed

const User: React.FC<{ name: string }> = ({ name }) => <p>{name}</p>;

<User name={123} />; // Error: Type 'number' is not assignable to type 'string'

Solution: Make sure that the passed props matches the expected type

3. Error: Object is Possibly Undefined

Problem: Trying to access properties of an undefined object.

let user: { name?: string };
console.log(user.name.length); // Error

Solution: Use optional chaining ?. or provide a default value.

console.log(user?.name?.length ?? 0);