TypeScript with React

React is a JavaScript library used to build user interfaces using reusable components.

function Welcome() {
    return <h1>Welcome to React</h1>;
}

TypeScript with React means using TypeScript to add type information to React components and application code.

function Welcome(): JSX.Element {
    return <h1>Hello</h1>;
}

TypeScript can help identify many type-related mistakes during development.

React components containing JSX are commonly stored in .tsx files when using TypeScript.

• .ts → TypeScript without JSX.
• .tsx → TypeScript with JSX.

TypeScript can make React applications easier to maintain by describing the expected types of data.

• Better type checking.
• Better editor support.
• Safer component development.
• Improved code readability.
• Useful for larger applications.

function App() {
    return (
        <div>
            <h1>My React App</h1>
        </div>
    );
}

export default App;

This component can be placed in a .tsx file.

function Welcome(): JSX.Element {
    return <h1>Welcome</h1>;
}

The return type describes the type of value returned by the component.

React.FC can be used to type a functional component.

import React from "react";

const Welcome: React.FC = () => {
    return <h1>Welcome</h1>;
};

Modern React code often uses ordinary function components with explicitly typed props instead of relying on React.FC.

JSX allows HTML-like syntax to be written inside JavaScript or TypeScript code.

function App() {
    const title: string = "My Application";

    return <h1>{title}</h1>;
}

TypeScript variables can be explicitly typed inside React components.

function App() {
    const name: string = "Rahul";
    const age: number = 20;

    return (
        <div>
            <h2>{name}</h2>
            <p>Age: {age}</p>
        </div>
    );
}

TypeScript can often determine the type automatically.

function App() {
    const name = "Amit";
    const age = 21;

    return <h1>{name} - {age}</h1>;
}

TypeScript infers name as a string and age as a number.

Props can be described using an interface or type alias.

interface UserProps {
    name: string;
    age: number;
}

interface UserProps {
    name: string;
    age: number;
}

function User({ name, age }: UserProps) {
    return (
        <div>
            <h2>{name}</h2>
            <p>Age: {age}</p>
        </div>
    );
}

<User
    name="Rahul"
    age={20}
/>

TypeScript checks that the values supplied to the component match the defined prop types.

The ? symbol can make a prop optional.

interface UserProps {
    name: string;
    age?: number;
}

The age prop can now be omitted.

React components can also receive children. In TypeScript, the children value can be typed using React's appropriate child type.

import { ReactNode } from "react";

interface CardProps {
    children: ReactNode;
}

function Card({ children }: CardProps) {
    return <div>{children}</div>;
}

React's useState hook can work with TypeScript types.

import { useState } from "react";

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

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

const [name, setName] = useState<string>("");

This state is designed to contain string values.

const [isLoggedIn, setIsLoggedIn] =
    useState<boolean>(false);

The state stores a boolean value such as true or false.

const [students, setStudents] =
    useState<string[]>([]);

setStudents(["Rahul", "Priya", "Amit"]);

The state is typed as an array of strings.

interface User {
    name: string;
    age: number;
}

const [user, setUser] =
    useState<User | null>(null);

The state can contain a User object or null.

TypeScript can type React events so that event-related properties are handled correctly.

function handleClick(
    event: React.MouseEvent<HTMLButtonElement>
): void {
    console.log(event.currentTarget);
}

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

This is useful when handling text input in React forms.

Functions passed to components can also be given explicit types.

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

function MyButton({ onClick }: ButtonProps) {
    return (
        <button onClick={onClick}>
            Click Me
        </button>
    );
}

Typed props make reusable components more predictable.

interface ButtonProps {
    text: string;
    disabled: boolean;
}

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

import { useState } from "react";

function LoginForm() {
    const [email, setEmail] = useState<string>("");

    return (
        <input
            value={email}
            onChange={(e) =>
                setEmail(e.target.value)
            }
        />
    );
}

TypeScript can detect values that do not match the expected type.

let age: number = 20;

// Error
// age = "twenty";

Similar type checking can be applied to React props, state, functions, and events.

interface StudentProps {
    id: number;
    name: string;
    course: string;
}

function Student({
    id,
    name,
    course
}: StudentProps) {

    return (
        <div>
            <h2>{name}</h2>
            <p>ID: {id}</p>
            <p>Course: {course}</p>
        </div>
    );
}

import { useState } from "react";

interface Student {
    name: string;
    course: string;
}

function App() {

    const [student, setStudent] =
        useState<Student>({
            name: "Rahul",
            course: "React"
        });

    return (
        <div>
            <h1>{student.name}</h1>
            <p>{student.course}</p>
        </div>
    );
}

export default App;

The same TypeScript concepts are useful when moving from React web development to React Native. Props, state, functions, objects, events, API responses, and reusable components can all be typed.

interface User {
    id: number;
    name: string;
}

function UserInfo({ user }: { user: User }) {
    return <h2>{user.name}</h2>;
}

import { useState } from "react";

interface Student {
    id: number;
    name: string;
    course: string;
}

interface StudentCardProps {
    student: Student;
}

function StudentCard({
    student
}: StudentCardProps) {

    return (
        <div>
            <h2>{student.name}</h2>
            <p>ID: {student.id}</p>
            <p>Course: {student.course}</p>
        </div>
    );
}

function App() {

    const [student] = useState<Student>({
        id: 101,
        name: "Rahul",
        course: "React Native"
    });

    return (
        <div>
            <h1>Student Details</h1>

            <StudentCard
                student={student}
            />
        </div>
    );
}

export default App;

This example demonstrates a typed object, typed component props, typed state, and a reusable React component.