Latest Posts

React and TypeScript

Posted on by Rishan Solutions

Loading

React and TypeScript are a powerful combination that can help improve the development experience and code quality in your React applications. TypeScript provides static typing for JavaScript, which can prevent bugs, improve the maintainability of code, and provide better tooling and autocompletion support. When combined with React, TypeScript helps ensure that your components, state, and props are typed correctly, making it easier to build large-scale, reliable applications.

1. Why Use TypeScript with React?

Here are a few reasons why integrating TypeScript into your React projects is beneficial:

  • Type Safety: TypeScript adds static types to JavaScript, which can catch type-related bugs during development rather than at runtime.
  • Improved Developer Experience: With TypeScript, editors like VSCode provide better autocompletion, inline documentation, and type inference.
  • Better Refactoring: Refactoring becomes easier since TypeScript will help identify mismatched types or untyped variables when you make changes.
  • Integration with Modern React Features: TypeScript works seamlessly with React’s hooks, context, and other modern features.

2. Setting Up React with TypeScript

If you’re starting a new project, you can create a React app with TypeScript using Create React App:

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

This will set up a new React project with TypeScript pre-configured.

Alternatively, if you already have a React project, you can manually add TypeScript:

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

Then, rename your .js files to .tsx for components that contain JSX, or .ts for files without JSX.

3. Basic Types in TypeScript with React

3.1 Typing Props in Functional Components

One of the most common use cases for TypeScript in React is typing the props of components. Here’s how you can type props in a functional component:

import React from 'react';

// Define a type for props
type MyComponentProps = {
  name: string;
  age: number;
};

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
};

export default MyComponent;
  • React.FC (or React.FunctionComponent) is a generic type for functional components that automatically infers children prop types and provides default typing for props.
  • We define the type MyComponentProps that holds the expected types for the name and age props.

3.2 Typing State in Functional Components

To type the state in functional components, you can use useState with TypeScript. Here’s how to type the state of a component:

import React, { useState } from 'react';

const Counter: React.FC = () => {
  // Type the state to be a number
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;
  • In this example, the useState<number>(0) specifies that the state count is a number.

4. Typing Event Handlers

React’s event handlers can also be typed, ensuring that the event is properly recognized by TypeScript.

import React, { useState } from 'react';

const Button: React.FC = () => {
  const [clicked, setClicked] = useState<boolean>(false);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log(event);  // You now have full type information for the event.
    setClicked(!clicked);
  };

  return <button onClick={handleClick}>Click me!</button>;
};

export default Button;
  • React.MouseEvent<HTMLButtonElement> specifies that the event is a mouse event triggered on a button element.

5. Using TypeScript with React Hooks

TypeScript works seamlessly with React’s hooks, allowing you to define types for your state, context, and effects.

5.1 useEffect with TypeScript

When using useEffect, you can type any variables, props, or state being used inside the effect.

import React, { useState, useEffect } from 'react';

const UserProfile: React.FC = () => {
  const [user, setUser] = useState<{ name: string; age: number } | null>(null);

  useEffect(() => {
    // Simulating fetching data
    setUser({ name: 'John', age: 25 });
  }, []);

  return (
    <div>
      {user ? (
        <>
          <h1>{user.name}</h1>
          <p>Age: {user.age}</p>
        </>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default UserProfile;
  • useState<{ name: string; age: number } | null> ensures that user is either an object with name and age properties or null when loading.

6. Typing Context in React

When using React’s Context API, TypeScript can help define types for the context value and its provider.

import React, { createContext, useContext, useState } from 'react';

type ThemeContextType = {
  theme: string;
  setTheme: React.Dispatch<React.SetStateAction<string>>;
};

// Create a Context with an initial value
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  const [theme, setTheme] = useState<string>('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const ThemeConsumer: React.FC = () => {
  const { theme, setTheme } = useContext(ThemeContext)!;

  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
};

const App: React.FC = () => (
  <ThemeProvider>
    <ThemeConsumer />
  </ThemeProvider>
);

export default App;
  • createContext<ThemeContextType | undefined>(undefined) ensures that TypeScript understands the structure of the context value.

7. Typing Custom Hooks

Custom hooks can also be typed, providing types for the values they return.

import { useState } from 'react';

// Custom hook with typed state
function useCounter(initialValue: number): [number, () => void] {
  const [count, setCount] = useState<number>(initialValue);

  const increment = () => setCount(count + 1);

  return [count, increment];
}

const CounterComponent: React.FC = () => {
  const [count, increment] = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default CounterComponent;
  • useCounter returns a tuple with a number state and a function to increment that state.

8. TypeScript with Props, State, and React Hooks

One of the key benefits of TypeScript in React is ensuring that types are consistently used across props, state, and hooks. Here’s a breakdown of how to use TypeScript effectively in these areas:

  • Props: Define prop types using type or interface.
  • State: Use useState with a type argument to define the state type.
  • Context: Define context types when creating and consuming context.
  • Custom Hooks: Return the types of the values the hook provides.

9. Common TypeScript Tips for React

  • Use type for simple types and interface for complex types (like objects or props).
  • Make use of TypeScript’s Partial<T>: When you need optional properties (e.g., when updating a part of the state).
  • Use React.FC for typing functional components: This ensures the component is correctly typed and supports children by default.

Leave a Reply

Your email address will not be published. Required fields are marked *