Blog

Supporto Typescript con Webpack

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!

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
Un fattore importante e spesso sottovalutato per avere successo nel campo del web development è la capacità di fare buone domande e sapere dove trovare aiuto all’occorrenza. Quando Google non bast…
Le tecnologie legate all’intelligenza artificiale stanno facendo progressi rapidi, suscitando al tempo stesso non poche congetture. Da scenari distopici in stile 2001: Odissea nello spazio, passando…
Il settore tech è appannaggio esclusivo della popolazione maschile? Questo preconcetto è abbastanza diffuso, ma come stanno davvero le cose? Oggigiorno il mondo tech, non solo in Italia, è in gran …

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Candidati ora

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.

Pagamento rateale

Valore della rata: A PARTIRE DA 112 €/mese.

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.