Supporto Typescript con Webpack

Supporto Typescript con Webpack

Giuseppe Speranza Di Giuseppe Speranza


javascript webpack typescript

Ricordo 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 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 esistono 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 (se volete approfondire l’argomento Loop in JavaScript vi consiglio la lettura di quest'articolo by aulab che trovate a questo link) e per ogni prodotto è stato creato un nuovo elemento 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 provate a far partire il progetto in modalità serve, digitando npm run serve nel terminale, Il risultato sarà il seguente: 

Come vedete il contenuto dell’array è correttamente visualizzato ed Il supporto di Typescript è completo. Da ora questa applicazione potrà utilizzare sia Javascript standard sia Typescript senza alcun problema, il tutto in poche righe di codice! 

Il supporto di Typescript è una 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 da chi ha un background da backendista 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!

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo