Introduzione all'uso di TypeScript in React

TypeScript - un superset di JavaScript, ha indubbiamente alcuni vantaggi sorprendenti: tipizzazione statica, classi, interfacce e intellisense avanzato che possono dare suggerimenti più forti per il completamento automatico e gestire potenziali errori prima della compilazione. Ciò significa che il tuo editor di codice non solo fornirà suggerimenti più intelligenti per il completamento automatico, ma ti mostrerà anche gli errori in quel momento, invece di dover scoprire che qualcosa non funziona correttamente quando passi al tuo browser.

Ci sono alcune cose da tenere a mente quando si inizia con TypeScript in React:

1. Iniziare con create-react-app e TypeScript:

Se stai iniziando un NUOVO progetto usando create-react-app:

npx create-react-app [your app's name] --template typescript

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

Ora che stiamo utilizzando TypeScript in react, utilizzerai l'estensione del file .tsx anziché lo standard .js per JavaScript.

Le altre cose che vedrai sono un tsconfig.json che ha alcune impostazioni predefinite per la configurazione TypeScript e react-app-env.d.ts, che fa riferimento ai tipi per react-script e aiuta con cose come consentire SVG importazioni.

3. Componenti e importazioni:

A causa del modo in cui le cose vengono digitate staticamente in TS, dobbiamo fare un paio di cose in più durante l'impostazione dei nostri componenti. Dovrai importare alcune cose extra nella parte superiore di ogni componente (*oppure puoi usare React.<> dove <> è il tipo o l'evento che altrimenti importeresti).

Alcune cose comuni che mi sono ritrovato a importare a parte alcuni dei soliti hook di reazione come useState e useEffect, sono ChangeEvent e FC (componente funzionale): il completamento automatico con TS è NICE quando si importano cose!

import React, { useState, ChangeEvent, FC } from "react";

L'ultima cosa su cui ci concentreremo per oggi sono le definizioni dei tipi semplici. Una delle funzioni principali di TypeScript è la conoscenza documentata di quali tipi stiamo utilizzando e dove modificarli e il rilevamento automatico precoce per prevenire bug ed errori.

Esistono diversi modi per dichiarare un tipo. Uno di questi è utilizzare un'interfaccia:

export interface Props {   
   name: string;   
   age: number;
}

Prendi nota di alcune definizioni di tipo:

1. 'App: FC' che definisce la nostra App come un componente funzionale.
2. 'useState<string>( )' che dichiara quel pezzo di stato come una stringa. Puoi anche farlo dando useState una stringa vuota: useState('')
3. 'event: ChangeEvent<HTMLInputElement>' che dichiara quale tipo di evento è accettato nella funzione onSearchInput.

Ciao, tornerò presto con altri!