Transitioning from JavaScript to TypeScript in React: A Practical Guide

aziz sassi
2 min readMar 3, 2024

Introduction: Are you a React developer comfortable with JavaScript but curious about TypeScript? This guide is for you. TypeScript brings static typing and advanced tooling to React development, offering benefits like enhanced code quality and better developer experience. Let’s dive into some key concepts and examples to help you make the switch seamlessly.

1. Setting Up Your React + TypeScript Environment:

  • Installing Dependencies: Begin by installing TypeScript and React typings: npm install --save typescript @types/react @types/react-dom.
  • Configuring tsconfig.json: Configure TypeScript compiler options and enable JSX support in your tsconfig.json.
  • Starting a New Project: You can start a new React project with TypeScript using Create React App with TypeScript template or manually configure TypeScript in an existing project.

2. Type Annotations in React Components:

// Before:
function Greeting(props) {
return <div>Hello, {props.name}!</div>;
}
// After:
type GreetingProps = {
name: string;
};
const Greeting: React.FC<GreetingProps> = ({ name }) => {
return <div>Hello, {name}!</div>;
};

3. Interfaces for Component Props and State:

// Before:
function User(props) {
return <div>Name: {props.user.name}, Age: {props.user.age}</div>;
}
// After:
type User = {
name: string;
age: number;
};
type UserProps = {
user: User;
};
const User: React.FC<UserProps> = ({ user }) => {
return <div>Name: {user.name}, Age: {user.age}</div>;
};

4. Leveraging Generics for Reusable Components:

// Before:
function Container(props) {
return <div>{props.children}</div>;
}

// After:
const Container: React.FC<PropsWithChildren<{}>> = ({ children }) => {
return <div>{children}</div>;
};

5. Enums, Literal Types, and Union Types in React Props:

// Before:
type ButtonProps = {
variant: 'primary' | 'secondary' | 'default';
};

// After:
enum ButtonVariant {
Primary = 'primary',
Secondary = 'secondary',
Default = 'default',
}

type ButtonProps = {
variant: ButtonVariant;
};

6. Migrating Existing React Projects to TypeScript:

  • Start by renaming .js files to .tsx and gradually adding type annotations to components, props, and functions.
  • Use TypeScript’s --allowJs flag to interoperate with existing JavaScript code and refactor it incrementally to TypeScript.

7. Testing and Debugging React Components with TypeScript:

  • Integrate TypeScript with testing libraries like Jest and React Testing Library to write type-safe tests for React components.
  • Leverage TypeScript’s rich error messages and debugging tools to diagnose issues in React components quickly and efficiently.

Conclusion: By incorporating TypeScript into your React development workflow, you can improve code quality, catch errors early, and enhance developer productivity. Embrace static typing, type annotations, and advanced TypeScript features to unlock the full potential of React with TypeScript. Start small, experiment with TypeScript gradually, and enjoy a more robust and enjoyable development experience in React.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

aziz sassi
aziz sassi

Written by aziz sassi

👋 Hey! I'm Aziz, a passionate software developer from Tunisia. Let's explore the world of programming together! 🚀💻 #TechEnthusiast

No responses yet