Supporto Typescript con Webpack
Di javascript webpack typescript
Piccola premessa: ricordiamo che la repository di tutto quello sviluppato potete trovarla al seguente link; inoltre, i branch saranno numerati in base alla lezione. Il branch relativo a quest’articolo è il seguente: webpack course 007.
Puoi switchare nel branch relativo a quest’articolo con il comando: git checkout webpack_course_007
In quest’articolo andremo a vedere come configurare il nostro progetto per poter scrivere usando Typescript.
Cos'è Typescript?
Per chi non lo conoscesse, Typescript è un linguaggio che va a potenziare il linguaggio Javascript estendendo le sue funzionalità. Per questo motivo, si dice che è un suo Super-set ed, infatti, qualsiasi applicazione scritta in Javascript standard è anche un'applicazione Typescript, ma non viceversa!
Typescript, tra le tante cose, introduce il concetto di tipo in Javascript, portando con sè il controllo statico sulle variabili per consentire uno sviluppo più solido e sicuro di applicazioni su larga scala.
Come utilizzare Typescript
Per poterlo utilizzare correttamente, bisogna installare un specifico tipo di compilatore chiamato transpiler, si tratta di un compilatore che non fa altro che prendere codice Typescript e tradurlo in una versione Javascript compatibile con il browser.
Dopo questa breve introduzione, vediamo come è possibile integrarlo in un’applicazione Webpack.
Come integrare Typescript in un'applicazione Webpack
Innanzitutto, installiamo le dipendenze appropriate digitando in console:
npm install --save-dev typescript ts-loader
Dopodiché, creiamo nella root del nostro progetto il file di configurazione di Typescript, ossia quel file che viene caricato di default ogni qualvolta si utilizza Typescript in un qualsiasi progetto (lo stesso vale per il webpack.config). Questo file si chiama tsconfig.json, per comodità potete digitare da terminale il seguente comando:
touch tsconfig.json
Una volta creato il file, inseriamo una prima configurazione, la quale comunica a Typescript alcuni importanti valori tra cui il posizionamento della cartella di distribuzione, se ci deve essere o meno il supporto a React e la versione di Javascript target, cioè la versione che il nostro codice Typescript avrà dopo esser stato compilato:
// tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
}
}
Ora è arrivato il momento di configurare Webpack per poter utilizzare Typescript.
Come sappiamo, il punto di partenza è sempre il nostro file di configurazione di Webpack, ossia il Webpack.config. Procediamo, quindi, con le modifiche:
},
resolve: {
extensions: ['.tsx', '.ts', '.js'], // Estensioni dei file che Webpack legge in fase di compilazione
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/, // Loader Typescript
},
Per configurare Webpack abbiamo aggiunto il Loader appropriato, per riconoscere i file Typescript, e la voce extensions. Le estensioni servono a Webpack nel caso in cui esistano diversi file con lo stesso nome ma con estensione diversa: in quel caso, Webpack prenderà in considerazione il primo file che matcha la prima estensione in ordine in quell’array.
Un’altra modifica essenziale da apportare al webpack.config è modificare il nostro entry point, cambiando l’estensione dell’index in .ts:
entry: './src/index.ts',
Per testare la nostra configurazione creiamo alcuni file Typescript; iniziamo con il creare un file che conterrà l’interfaccia di un ipotetico prodotto:
// product.interface.ts
export interface Product {
id: number,
name: string,
count?: number
}
Questa Interfaccia contiene 3 proprietà di cui 1 opzionale.
Ora, non ci resta che creare un file di Prodotti in cui richiamiamo l’interfaccia appena creata:
// products.ts
import { Product } from "./product.interface";
export const products: Product[] = [
{
id: 1,
name: 'Prodotto 1',
count: 65,
},
{
id: 2,
name: 'Prodotto 2',
},
{
id: 3,
name: 'Prodotto 3',
count: 23,
}
];
In questo file abbiamo creato un array di prodotti, sfruttando l’interfaccia Product per tipizzarlo. Ora utilizziamo questo array di prodotti nel nostro index.ts che dovete ora rinominare a index.ts.
Il blocco di codice che farà visualizzare i prodotti appena creati è il seguente:
// Visualizziamo i prodotti nel template
products.forEach(( product: Product ) => {
const productElement = document.createElement( tagName: "p");
productElement.innerHTML = `${product.name} - totale: ${product.count ?? 0}`;
element.appendChild(productElement);
});
Abbiamo effettuato un forEach e, per ogni, prodotto è stato creato un nuovo elemento del linguaggio HTML a cui è stato aggiunto un testo formato da NOME e TOTALE del prodotto. Se il totale non è presente, allora sarà stampato 0.
Da notare che per utilizzare products, bisognerà importarlo; in ogni caso sarà l’ide a suggerirvi l’eventuale import.
import { products } from './products';
Se provi a far partire il progetto in modalità serve, digitando npm run serve nel terminale, Il risultato sarà il seguente:
Come vedi, il contenuto dell’array è correttamente visualizzato ed Il supporto di Typescript è completo. Da ora, questa applicazione potrà utilizzare sia il linguaggio Javascript standard, sia Typescript senza alcun problema, il tutto in poche righe di codice!
Il supporto di Typescript è un' importante feature da avere nei nostri progetti: infatti, non è immaginabile lavorare su progetti Javascript enormi senza un minimo di controllo sulle variabili.
P.s.: forse questo è uno dei tanti motivi che, con il passare del tempo, ha contribuito a far crescere l’odio verso questo linguaggio di programmazione da chi ha un background da back end developer puro.
Questa serie di articoli è giunta quasi al termine. Nel prossimo e ultimo articolo introdurremo anche il supporto di SCSS per poter completare tutto lo stack e rendere questa piccola applicazione un vero e proprio starting point per qualsiasi progetto futuro. Stay Tuned e alla prossima!
