TypeScript con React: Creare Componenti Fortemente Tipizzati

Combinare TypeScript con React è uno dei modi migliori per sviluppare applicazioni web robuste, scalabili e resistenti agli errori. TypeScript introduce la sicurezza dei tipi nei tuoi componenti React, aiutandoti a individuare bug già in fase di compilazione invece che a runtime.

In questa guida vedremo gli elementi essenziali per usare TypeScript con React, tra cui tipizzare props e state, utilizzare il tipo FC per i componenti funzionali e lavorare con gli hook come useState e useEffect.

Tipizzare Props e State nei Componenti React

Quando scrivi componenti React, tipizzare correttamente props e state è fondamentale per mantenere un codice pulito e prevedibile.

Tipizzare le Props

Per prima cosa, definisci un’interfaccia o un tipo TypeScript per le tue props:

interface GreetingProps {
    name: string;
    age?: number; // Optional prop
}

function Greeting({ name, age }: GreetingProps) {
    return (
        <div>
            <h1>Hello, {name}!</h1>
            {age && <p>You are {age} years old.</p>}
        </div>
    );
}

• name è una prop obbligatoria.
• age è una prop opzionale (nota il ?).

In questo modo, TypeScript garantirà l’utilizzo corretto ogni volta che userai il componente Greeting.

Tipizzare lo State

Nei componenti a classe, potresti dover definire sia i tipi di props che di state:

interface CounterProps {
    initialCount: number;
}

interface CounterState {
    count: number;
}

class Counter extends React.Component<CounterProps, CounterState> {
    constructor(props: CounterProps) {
        super(props);
        this.state = { count: props.initialCount };
    }

    render() {
        return (
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                Count: {this.state.count}
            </button>
        );
    }
}

Tuttavia, nello sviluppo moderno di React, i componenti funzionali con gli hook sono molto più comuni — e funzionano benissimo anche con TypeScript!

Componenti Funzionali (FC Type)

Il tipo FC (o FunctionComponent) aiuta a definire un componente funzionale che riceve delle props.

import { FC } from "react";

interface UserProps {
    username: string;
}

const UserCard: FC<UserProps> = ({ username }) => {
    return <div>User: {username}</div>;
};

Vantaggi dell’uso di FC:

• Tipizza automaticamente children se il componente li prevede.
• Migliora la leggibilità e la standardizzazione.

Nota: Le pratiche più recenti consigliano di tipizzare direttamente le props (come abbiamo fatto con Greeting) invece di usare sempre FC, specialmente se il componente non accetta children. Questo evita una tipizzazione eccessiva.

Usare useState e useEffect con Tipi

Gli hook sono il cuore dei componenti funzionali — e possono essere tipizzati in modo preciso!

Tipizzare useState

Puoi specificare esplicitamente il tipo dello stato se necessario:

import { useState } from "react";

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

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

Se TypeScript riesce a inferire il tipo dal valore iniziale, non è sempre necessario specificarlo manualmente — ma farlo può rendere il codice più prevedibile, specialmente quando lo stato iniziale è null o undefined.

Esempio con valore null possibile:

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

Tipizzare useEffect

useEffect normalmente non richiede una tipizzazione speciale — ma puoi comunque sfruttare l’inferenza dei tipi all’interno del corpo dell’effetto:

import { useEffect, useState } from "react";

const Timer = () => {
    const [seconds, setSeconds] = useState<number>(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(prev => prev + 1);
        }, 1000);

        return () => clearInterval(interval);
    }, []);

    return <div>Timer: {seconds}s</div>;
};

TypeScript ti aiuterà a garantire che variabili come interval e setSeconds vengano utilizzate correttamente.

Conclusione

Integrare TypeScript con React migliora enormemente l’affidabilità e la scalabilità delle tue applicazioni web.

• Tipizzare props e state garantisce un comportamento prevedibile dei componenti.
• Utilizzare il tipo FC (o tipizzare direttamente) mantiene i componenti funzionali chiari e consistenti.
• Gli hook tipizzati come useState e useEffect prevengono bug difficili da individuare.

Padroneggiare queste basi ti darà una solida partenza per costruire applicazioni React robuste e moderne con TypeScript!