JavaScript è un linguaggio di programmazione debolmente tipizzato. Per questo motivo è molto indulgente ed è probabile che gli errori di programmazione passino inosservati durante lo sviluppo. TypeScript, una libreria di controllo del tipo JavaScript, risolve questo problema applicando i tipi ai valori. Questo articolo ti insegnerà come creare un progetto React con TypeScript.
Creazione di un progetto React con TypeScript
Il comando create-react-app ti consente di creare progetti Typescript utilizzando il file --modello opzione.
Per creare un nuovo progetto React con TypeScript, esegui il comando seguente:
npx creare-app-react-nome--template dattiloscritto
Questo comando crea un nuovo progetto React e TypeScript da zero. Puoi anche aggiungere TypeScript a un'applicazione React esistente.
Per fare ciò, vai al progetto a cui vuoi aggiungere TypeScript ed esegui il codice seguente:
npm install --save dattiloscritto @tipi/node @tipi/react @tipi/react-dom @tipi/jest
Quindi scambia l'estensione del file .js con .tsx per i file che desideri convertire in TypeScript. Una volta fatto questo, otterrai il "
React si riferisce a un UMD globale, ma il file corrente è un modulo". errore. Puoi risolverlo importando React in ogni file dattiloscritto in questo modo:importare Reagire da "reagire"
Come soluzione più semplice, crea un tsconfig.json e imposta jsx su react-jsx.
{
"compilerOptions": {
"jsx": "reagire-jsx",
"obbiettivo": "es6",
"modulo": "accanto",
},
}
Puoi trovare tutte le impostazioni di configurazione da Documenti TypeScript.
Creazione di un componente della funzione React in TypeScript
Definisci un componente della funzione React allo stesso modo di una funzione JavaScript.
Di seguito è riportato un esempio di un componente di funzione chiamato Greetings.
esportarepredefinitofunzioneSaluti() {
Restituzione (
<div>Ciao mondo</div>
)
}
Questo componente restituisce una stringa "Hello world" e TypeScript ne deduce il tipo restituito. Tuttavia, puoi annotare il suo tipo restituito:
esportarepredefinitofunzioneSaluti(): JSX.Elemento{
Restituzione (
<div>Ciao mondo</div>
)
}
TypeScript genererà un errore se il componente Greetings restituisce un valore che non è un JSX.element.
Utilizzo di oggetti di scena React con TypeScript
React ti consente di creare componenti riutilizzabili tramite oggetti di scena. Ad esempio, il componente Greetings può ricevere un nome prop in modo tale che il valore restituito sia personalizzato in base ad esso.
Di seguito è riportato il componente modificato con un nome come prop. Si noti la dichiarazione di tipo inline.
funzioneSaluti({nome}: {nome: stringa}) {
Restituzione (
<div>Ciao {nome}</div>
)
}
Se si passa il nome "Jane", il componente restituirà il messaggio "Hello Jane".
Invece di scrivere la dichiarazione del tipo nella funzione, puoi definirla esternamente in questo modo:
genere SalutiProps = {
nome: stringa;
};
Quindi passare il tipo definito al componente come segue:
funzioneSaluti({nome}: GreetingsProps) {
Restituzione (
<div>Ciao {nome}</div>
)
}
Usa la parola chiave dell'interfaccia se stai esportando questo tipo e vuoi estenderlo:
esportare interfacciaSaluti Puntelli{
nome: stringa;
};
Nota la differenza di sintassi tra tipo e interfaccia: l'interfaccia non ha un segno di uguale.
È possibile estendere un'interfaccia utilizzando il codice seguente:
importare {SalutiProps } da './Saluti'
interfacciaBenvenuto Propssi estendeSaluti Puntelli{
volta: "corda"
}
È quindi possibile utilizzare l'interfaccia estesa in un altro componente.
funzioneBen arrivato({nome, ora}: WelcomeProps) {
Restituzione (
<div>
Buon {tempo}, {name}!
</div>
)
}
Utilizzare il "?" simbolo con l'interfaccia degli oggetti di scena per definire oggetti di scena opzionali. Ecco un esempio di un'interfaccia con un nome opzionale prop.
interfacciaSaluti Puntelli{
nome?: stringa;
};
Se non si passa un nome prop, TypeScript non genererà alcun errore.
Utilizzo dello stato di reazione con TypeScript
In semplice JavaScript, definisci l'hook useState() come segue:
const [NomeCliente, setNomeCliente] = useState("");
In questo esempio, TypeScript può facilmente dedurre il tipo di firstName come stringa poiché il valore predefinito è una stringa.
Tuttavia, a volte non è possibile inizializzare lo stato su un valore definito. In questi casi, devi fornire un tipo di valore di stato.
Ecco alcuni esempi di come definire i tipi nell'hook useState().
const [NomeCliente, setNomeCliente] = useState<corda>("");
const [età, setAge] = useState<numero>(0);
cost [isSubscribed, setIsSubscribed] = useState<booleano>(falso);
Puoi anche usare un'interfaccia nell'hook useState(). Ad esempio, puoi riscrivere l'esempio precedente per utilizzare un'interfaccia mostrata di seguito.
interfacciaCliente{
nome cliente: stringa ;
età: numero ;
isIscritto: booleano ;
}
Usa l'interfaccia personalizzata nell'hook in questo modo:
const [cliente, setCustomer] = useState<Cliente>({
Nome del cliente: "Giovanna",
età: 10,
isIscritto: falso
});
Utilizzo di eventi con TypeScript
Gli eventi sono essenziali in quanto consentono agli utenti di interagire con una pagina web. In TypeScript, puoi digitare eventi o gestori di eventi.
A scopo dimostrativo, considera il seguente componente Login utilizzando gli eventi onClick() e onChange().
importare {UsaStato} da 'reagire';
esportarepredefinitofunzioneLogin() {
const [email, setEmail] = useState('');cost handleChange = (evento) => {
setE-mail(evento.obbiettivo.valore);
};cost handleClick = (evento) => {
console.log('Presentato!');
};
Restituzione (
<div>
<tipo di input="e-mail" valore={email} onChange={handleChange} />
<pulsante suClic={() => handleClick}>Invia</button>
</div>
);
}
Questo è il modo in cui gestiresti gli eventi in semplice JavaScript. TypeScript, tuttavia, prevede che tu definisca il tipo di parametro dell'evento nelle funzioni del gestore eventi. Fortunatamente, React fornisce diversi tipi di eventi.
Ad esempio, utilizzare il tipo changeEvent per il gestore dell'evento handleChange().
importare { ChangeEvent, useState } da 'reagire';
const handleChange = (evento: ChangeEvent<HTMLInputElement>) => {
setE-mail(evento.obbiettivo.valore);
};
Il tipo changeEvent viene utilizzato per modificare i valori degli elementi input, select e textarea. È un tipo generico che significa che devi passare l'elemento DOM il cui valore cambia. In questo esempio, hai passato l'elemento di input.
L'esempio precedente mostra come digitare l'evento. Il codice seguente mostra come puoi invece digitare il gestore dell'evento.
importare { ChangeEventHandler, useState } da 'reagire';
const handleChange: ChangeEventHandler<HTMLInputElement> = (evento) => {
setE-mail(evento.obbiettivo.valore);
};
Per l'evento handleClick(), utilizzare MouseEvent().
importare { useState, MouseEvent } da 'reagire';
cost handleClick = (evento: MouseEvent) => {
console.log('Presentato!');
};
Ancora una volta, puoi allegare il tipo al gestore eventi stesso.
importare { useState, MouseEventHandler } da 'reagire';
cost handleClick: MouseEventHandler = (evento) => {
console.log('Presentato!');
};
Per altri tipi di eventi, controlla il Cheat sheet di React TypeScript.
Se stai creando moduli di grandi dimensioni, è meglio farlo usa una libreria di moduli come Formik, poiché è stato creato con TypeScript.
Perché dovresti usare TypeScript?
Puoi indicare a un nuovo progetto React di utilizzare TypeScript o convertirne uno esistente. È inoltre possibile utilizzare TypeScript con i componenti della funzione React, lo stato e gli eventi React.
Digitare i componenti React a volte può sembrare come scrivere codice boilerplate non necessario. Tuttavia, più lo usi, più apprezzerai la sua capacità di rilevare gli errori prima di distribuire il tuo codice.
