Estensione: Typescript

Typescript è una estensione di JS. Modifica alcuni comportamenti di base di JS soprattutto per gestire meglio i tipi di dato. Inoltre, aggiunge alcune funzionalità come le interfacce.

Oggi vedremo come usarlo, come funziona in generale e come compilare un file .ts in un file .js.

Cosa facciamo oggi

1. Dal terminale installiamo globalmente Typescript:

   npm install -g typescript

2. Controlliamo la versione con

   tsc --version

3. Ora creiamo un file e.g. index.ts in una cartella e seguiamo il resto della lezione. Il file .ts non è direttamente eseguibile.
4. Alla fine converteremo il file .ts in .js:

   tsc index.ts

Parte 1: Hello World

Sul file .ts, scriviamo console.log("Hello World!") e da terminale chiamiamo tsc index.ts. Vedremo che è stato generato un file index.js

Di norma Typescript compila in ES3, quando funzionalità quali .fetch e async non erano disponibili. Proviamo a vedere cosa succede scrivendo nel file .ts:

async function hello() {
return "Hello World!"
}

Per far compilare TS nell'ultima versione ES6 che vogliamo, ci basta creare un file tsconfig.json con target: "esnext". Possiamo specificare varie versioni di JS. Il file config verrà utilizzato automaticamente chiamando tsc file.ts. Buona pratica è, tuttavia, quella di mettere tutti i file .ts in una cartella src, e specificare come target una cartella dist. Va specificato così:

{
  "compilerOptions": {
    "target": "esnext",
    "outDir": "dist",
    "sourceMap": true
  },
  "include": ["src/**/*.ts"]
}

Vediamo anche che abbiamo una gestione degli errori interna a .ts dato che non serve più attendere di far partire il file, ma con lo strong typing abbiamo una gestione diretta di molti degli errori comuni.

Strong typing

TS introduce in JS la tipizzazione forte. Proviamo a scrivere in un file .ts:

let lucky = 23;
lucky = "23"
let lucky: any = 23;

La terza sintassi ": any" consente di rendere la variabile di tipo "any", e quindi poterla modificare in un tipo diverso se necessario.

In TS possiamo creare tipi specifici. Ad esempio:

type Style = 'bold' | 'italic';
//type Style = 'bold' | 'italic' | 23;
let font: Style = 'Helvetica';

Vedremo che abbiamo un errore dato che il tipo Style può essere solo 'italic' o 'bold'. Con la pipe aggiungiamo più possibili variabili ad un tipo.

Questo serve perlopiù per blindare gli oggetti. Le interfacce fanno esattamente questo:

const person = {
  first: 'Todd',
  last: 'Smith',
  age: 27
}

const person2 = {
  first: 'John',
  last: 'Doe',
  age: 30
}

Aggiungiamo un'interfaccia per rinforzare che first e last sono chiavi obbligatorie

interface Person {
  first: string;
  last: string;
  age: number;
  [key: string] : any
}

const person: Person = {
  first: 'Todd',
  last: 'Smith',
  age: 27
  ciao: "ciao" //viene considerata come any
}

const person2: Person = {
  first: 'John',
  last: 'Doe',
  age: 30
}

Possiamo tipizzare anche le funzioni, ma è un po' più complicato:

function pow(x: number, y: number): string {
  return Math.pow(x, y).toString();
}

console.log(pow(5, 10));

In questo caso x e y devono essere un numero e l'output una stringa. Un tipo di output spesso utilizzato è :void, nel caso in cui e.g. si abbiano cose come console.log o eventi che non ritornano valori effettivi.

Possiamo anche tipizzare le array come in questo caso.

const arr: number[] = []
  arr.push(1)
  arr.push('ciao')
  

Typescript introduce anche altri oggetti come Tuple e i Generici. Ma li vedremo un'altra volta.