React TypeScript

What is TypeScript, and why would you use it in a React project?

TypeScript is a statically-typed superset of JavaScript that adds optional static typing and other language features like interfaces, enums, and advanced type inference. In a React project, TypeScript helps prevent bugs by catching errors during development, improves code quality with type checking, and enhances developer productivity by providing better autocompletion, refactoring tools, and clearer documentation.

How do you set up TypeScript in a new or existing React project?

To set up TypeScript in a new React project, you can use the following command to create a TypeScript React app:

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

To add TypeScript to an existing React project:

1. Install TypeScript and the necessary type definitions for React:

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

1. Rename your JavaScript files from .js to .tsx for components (or .ts for non-JSX files).
2. TypeScript will automatically begin checking your files for type errors.

What is the difference between .ts and .tsx files in a React TypeScript project?

The main difference between .ts and .tsx files is that .tsx files allow the inclusion of JSX syntax. In a React project, you use .tsx for components that contain JSX elements, while .ts files are used for regular TypeScript files that don't include JSX (e.g., utility functions or types).

How do you define types for component props in TypeScript?

To define types for component props, you can use TypeScript interfaces or types. You can define the props as an object with specific types and use them in the function signature of your React component.

Example of typing props with an interface:

interface ButtonProps {
    label: string;
    onClick: () => void;
}

function Button({ label, onClick }: ButtonProps) {
    return <button onClick={onClick}>{label}</button>;
}

In this example, the Button component receives two props: label (a string) and onClick (a function).

How do you type state in a React component using TypeScript?

To type state in a React component, you can use the useState hook with a type argument. You provide the type of the state value as a generic to useState, ensuring that the state has the correct type.

Example of typing state in TypeScript:

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState<number>(0);

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

In this example, the useState hook is typed as number, meaning the state count will always be a number.

How do you type React events in TypeScript?

In React, you can type events using the types provided by TypeScript for DOM events, such as React.ChangeEvent for input changes or React.MouseEvent for click events.

Example of typing a form event:

function InputForm() {
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        console.log(event.target.value);
    };

    return <input type="text" onChange={handleChange} />;
}

In this example, handleChange is typed as a React.ChangeEvent for an HTMLInputElement to provide type safety when handling form events.

How do you type default props in TypeScript?

To type default props in TypeScript, you can define them directly in the props interface or type, and then assign default values to them in the component. TypeScript allows you to use default values when props are not provided by the parent component.

Example of typing default props:

interface ButtonProps {
    label: string;
    disabled?: boolean; // Optional prop
}

function Button({ label, disabled = false }: ButtonProps) {
    return <button disabled={disabled}>{label}</button>;
}

In this example, disabled is an optional prop with a default value of false if it is not provided by the parent component.

How do you type functional components in TypeScript?

To type functional components in TypeScript, you can use the React.FC (or React.FunctionComponent) type, or you can manually type the component's props without using the React.FC type. It is common to define props using an interface or type and pass them to the component.

Example of typing a functional component using React.FC:

interface CardProps {
    title: string;
    content: string;
}

const Card: React.FC<CardProps> = ({ title, content }) => {
    return (
        <div>
            <h1>{title}</h1>
            <p>{content}</p>
        </div>
    );
};

In this example, the Card component is typed using React.FC, and the props are defined by the CardProps interface.

What are the advantages of using TypeScript in a React project?

Key advantages of using TypeScript in a React project include:

• Type safety: TypeScript ensures that variables, props, and state are used with the correct types, reducing the risk of runtime errors.
• Autocompletion: TypeScript provides better autocompletion and developer tooling, making it easier to work with large codebases.
• Improved code quality: TypeScript helps catch bugs and errors early in development by enforcing strict type checks.
• Clearer documentation: Explicit typing provides clearer documentation for developers, making code easier to understand and maintain.
• Refactoring support: TypeScript enables safer refactoring, as type errors will surface if the code is modified incorrectly.

How do you use TypeScript with hooks like useReducer in React?

When using TypeScript with hooks like useReducer, you can define types for the state, actions, and reducer function. This provides type safety for the state management logic.

Example of typing useReducer:

interface State {
    count: number;
}

interface Action {
    type: 'increment' | 'decrement';
}

function reducer(state: State, action: Action): State {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error('Unknown action');
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

In this example, both the state and actions are typed, ensuring that the reducer function and dispatch actions follow the correct structure.

How do you type children in a React component using TypeScript?

To type children in a React component, you can use the React.ReactNode type. This type covers any valid React content, including JSX elements, strings, numbers, and more.

Example of typing children:

interface ContainerProps {
    children: React.ReactNode;
}

function Container({ children }: ContainerProps) {
    return <div className="container">{children}</div>;
}

In this example, the Container component accepts children as a prop, and the React.ReactNode type allows any valid React element to be passed as children.

How do you handle third-party libraries without types in TypeScript?

If a third-party library does not have TypeScript type definitions, you can either:

• Search for type definitions in the @types namespace (e.g., npm install @types/library-name).
• Create your own type declarations using declare module in a .d.ts file.
• Use any as a last resort if type definitions are not available, though this removes the type safety benefits.

Example of declaring a module:

declare module 'third-party-library' {
    export function someFunction(): void;
}

In this example, you manually declare the type for the third-party library if it lacks proper types.