Cosa è Typescript
Javascript non è un linguaggio tipizzato, pertanto possiamo ad esempio creare variabili senza assegnare loro un tipo. Typescript è una libreria per Javascript, che introduce la tipizzazione all’interno di Javascript e quindi anche di React.
Ciò comporta diversi vantaggi, tra cui i seguenti.
- Maggiore controllo e pulizia del codice.
- Gli errori di tipizzazione vengono segnalati al momento della compilazione e non più run-time.
- Refactoring (modificare il codice senza cambiarne il comportamento al fine di migliorarlo ed ottimizzarlo) ed eventuali modifiche successive del codice risultano più agevoli.
In poche semplici parole, la possibilità e l’obbligo di assegnare tipi a variabili ed oggetti, ci permette di lavorare in modo migliore, soprattutto se si tratta di progetti di grandi dimensioni.
Pertanto, l’uso di Typescript è altamente consigliato, a meno che non si stia sviluppando una piccola web app che non ha aspettative di crescita.
Installare Typescript
Teoricamente possiamo installare Typescript in un secondo momento, cioè successivamente alla creazione della nostra web app in React, tramite il comando:
npm i typescript
Ciò però è sconsigliato, perché dopo l’installazione della libreria di Typescript, occorre apportare manualmente diverse modifiche alla struttura del progetto e del codice già prodotto.
Pertanto, se si vuole utilizzare Typescript, consigliamo vivamente l’introduzione di Typescript già al momento della creazione del nostro progetto in React.
Il comando di creazione di una web app in React con Typescript già integrato è:
npx create-react-app [nome web app] --template typescript
Esempio:
npx create-react-app demotutorial --template typescript
Struttura del progetto con Typescript
La struttura del progetto sarà uguale a quella che abbiamo precedente visto senza l’uso di Typescript, ma con alcune differenze.
All’interno della cartella “src” potrebbe essere presente il file serviceWorker.ts. Tale file serve per la gestione delle PWA ed in particolare dei servizi offline come la gestione della cache.
App.test.tsx può essere cestinato, perché è il file di esempio generato dal file setupTests.ts che permette di eseguire unit test. La libreria utilizzata è “jest-dom”.
Il file react-app-env.ts, consente di utilizzare tramite il sistema “import”, tipologie di file che non sono già previste di default in node_modules/react-scripts/lib/react-app.d.ts. Questo argomento andrebbe approfondito a parte, ma non vale la pena affrontarlo in un tutorial inziale di React.
Estensione file: .ts e .tsx
Una differenza importante con un progetto Typescript free, è data dal fatto che i nostri file Javascript hanno una estensione .ts, che diventa .tsx nel caso in cui all’interno del file sia presente JSX.
Quindi un file component dovrà essere .tsx, mentre un file che contiene helper function di supporto ai component sarà .ts, perché non ha nulla da renderizzare.
Nei file .tsx, sarà presente l’import
import React from 'react';
In caso contrario JSX non funzionerà. Ciò è necessario solo per alcune versioni delle librerie.
Sintassi di tipizzazione di Typescript
È arrivato il momento adesso, di vedere concretamente come assegnare un tipo ad una variabile, tramite Typescript. Di seguito un esempio.
var myName: string = "Do Agency";
function printName(name: string) {
console.log(name);
}
printName(myName);
Quasi sempre nei linguaggi di programmazione il tipo si trova a sinistra e il nome della variabile a destra. Qui è esattamente il contrario, come potete vedere dall’esempio.
Dal codice di esempio di tipizzazione, è chiaro il modo corretto per assegnare un tipo sia alla variabile che al parametro di input della function.
Aggiorniamo il progetto Typescript con quanto fatto in precedenza
A questo punto, dopo aver creato una nuova installazione di React con Typescript, tramite il comando
npx create-react-app [nome web app] --template typescript
che abbiamo visto in precedenza, dobbiamo applicare gli sviluppi fatti nel precedente progetto.
È una ripetizione di sviluppo all’interno del tutorial, ma in questo modo abbiamo potuto mostrare entrambe le possibilità di sviluppo.
Brevemente:
Creiamo le cartelle:
- components
- layouts
- models
- pages
- style
Installiamo le librerie:
- npm i -D react-router-dom
- npm i bootstrap
Importiamo i file che abbiamo creato in precedenza.
Modifichiamo il file index.tsx.
Altrimenti, se preferite, per ragioni di comodità e velocità, potete clonare il Progetto da GitHub o vedere struttura e corpo dei file, nel repository GitHub in: https://github.com/DoAgency/ReactJs
Repository del progetto in progress su GitHub: https://github.com/DoAgency/ReactJs