69 TS – Iniziamo con TypeScript

Attualmente TypeScript non può essere interpretato direttamente dal browser, ma deve essere transcodificato o transpilato, ovvero viene tradotto e ricompilato in una versione di JavaScript a nostra scelta. Con TypeScript, a differenza del linguaggio genitore, possiamo utilizzare la tipizzazione delle variabili, le interfaces, enum e molte altre caratteristiche utilizzate da altri linguaggi di programmazione.

TypeScript può essere installato direttamente dal sito ufficiale, per verificarne la versione basterà lanciare il seguente comando:

tsc -v

Si presume che si abbia installato node.js, per ulteriori informazioni su node, vedere qui .

I file TypeScript hanno estensione ts, creando un file index.ts, per esempio, lo si può far ricomppilare anche da terminale col comando

tic index.js

ed avremo a disposizione il relativo file index.js. Possiamo anche decidere di modificare il nome del file js compilato

tic index.js --out pippo.js

Tutto quello che è presente in javascript, è presente anche in typescript. Come dicevamo ts ha la possibilità di tipizzare i dati, i tipi di dato primitivo esistenti sono :

Boolean, Number, String, Array, Object, Tuple, Enum.

Boolean

Sono tipi di dati che accettano un valore TRUE o FALSE

let isFinisched: boolean;

ho dichiarato una. variabile assegnandole il tipo bool. Nel relativo file js transcodificato otterrò:

var isFinished;

Se per esempio assegnassi alla variabile un valore diverso dal tipo dichiarato, otterrei un errore in fase di compilazione del js

isFinisched = 'Name';

Questo permette di ottenere un ulteriore verifica su eventuali sbagli.

Riassegniamo un valore corretto

isFinisched = true;
isFinisched = false;

Posso anche assegnare qualsiasi espressione che restituisca un valore booleano

isFinisched = 4 < 5;

String

Classiche variabili di tipo testo

let myname: string;

Un esempio può essere anche un numero racchiuso tra apici

minare = '5';

Number

sono tutti i numeri. Posso anche specificare un valore nello stesso comando di dichiarazione del tipo

let age : number = 45;

se cambio il valore di age con uno float (virgola), l’assegnazione sarebbe corretta.

age = 45.55; //corretto
age = 'Name'; //Scorretto perché è una stringa

Non è necessario specificare il tipo di dato, con la prima assegnazione stabilisco il tipo

let lastName = 'Bribò';
lastName = 5;

Errore perché la prima assegnazione dice al linguaggio che lastName è di tipo stringa.

Array

Come in js sono i vettori contenenti più valori ai quali è assegnato un indice.

let months = ['G','F','M'];

In questo caso ts capisce automaticamente che questo è un array di tipo stringa, sarebbe come se specificassimo il tipo in questo modo

let months : string[] = ['G','F','M'];

se assegnassi un array numerico, genererei un errore

months = [3,3,33];

per dichiarare un array di tipo number

let numbers : number[] = [3,3,33];

Un altro modo per dichiarare i tipi di array in ts è usando il metodo generics, che è un nome a nostra scelta, detto placeholder, che viene dichiarato tra i simboli maggiore e minore, dopo la parola array

let fruits : array<string> = ['pippo','pluto','paperino'];

In questo caso specificando <string> dichiaro che l’array è di tipo stringa.

Oggetto

In modo identico a js posso creare dati di tipo oggetto

let obj =  {};

oggetto vuoto, se gli assegno il valore 5 sarebbe legittimo

obj = 5;

Posso convertire il numero in stringa come js

console.log(obj.toString());

Tuple

Un Tuple è quando abbiamo un array di dati e la quantità e i tipi sono conosciuti e non cambiano.

Supponendo che dobbiamo passare un array fisso di cui il primo valore è una stringa e il secondo un numero

let params : [string, number];
params = ['fag', 45]

Per esempio possiamo creare una funzione che riceve questo array come parametro

let params = ['fag' , 45 ];

function showData(par) {
    console.log(par[0] + ','+par[1]);
}

showData(params);

Se inserissimo dei dati non corrispondenti al tipo

showData( 11, 27);

verrebbe generato subito un errore, cosa che con javascript non veniva evidenziata.

Enum

Il tipo di dato enum viene utilizzato quando abbiamo dei codici a cui vogliamo assegnare dei nomi facilmente comprensibili.

Per esempio creiamo un oggetto di tipo enum chiamato DAYS con i giorni della settimana, per convenzione il nome dell’enum si mette in maiuscolo

enum DAYS {
    MON,
    TUE,
    WED,
    THU,
    FRI,
    SAT,
    SUN
}

La trasformazione automatica del file js verrebbe così:

var DAYS;
(function (DAYS) {
    DAYS[DAYS["MON"] = 0] = "MON";
    DAYS[DAYS["TUE"] = 1] = "TUE";
    DAYS[DAYS["WED"] = 2] = "WED";
    DAYS[DAYS["THU"] = 3] = "THU";
    DAYS[DAYS["FRI"] = 4] = "FRI";
    DAYS[DAYS["SAT"] = 5] = "SAT";
    DAYS[DAYS["SUN"] = 6] = "SUN";
})(DAYS || (DAYS = {}));

dichiarazione della variabile DAYS, una funzione che riceve days e poi gli passa i vari valori tramite array.

Vediamo cosa contiene DAYS

console.log(DAYS);

e lanciamolo in modo rapido con node.js

node index.js

ecco l’output

{
  '0': 'MON',
  '1': 'TUE',
  '2': 'WED',
  '3': 'THU',
  '4': 'FRI',
  '5': 'SAT',
  '6': 'SUN',
  MON: 0,
  TUE: 1,
  WED: 2,
  THU: 3,
  FRI: 4,
  SAT: 5,
  SUN: 6
}

abbiamo un oggetto simile ad un array con valori sia con chiave numerica (0 : MON), sia con chiave di stringa (MON: 0). Possiamo quindi accedere ai dati sia in un modo che nell’altro, vediamo un esempio nel file ts

console.log(DAYS.SAT);

la restituzione è 5 (dallo 0 al 6 vengono numerati i 7 giorni della settimana). Qualora volessimo partire dall’1, basterebbe assegnarlo al primo valore.

MON = 1,

Qualora volessimo restituito il suo valore in stringa basta accedere al suo indice numerico

console.log(DAYS[1]);

Supponiamo di voler sapere i giorni lavorativi, creiamo una funzione

function isWorkingDay( day: DAYS) {
    if(day === DAYS.SUN || day === DAYS.SAT) {
        return true;
    }
    return false;
}

se proviamo sul giorno FRI riceveremo false

console.log(isWorkingDay(DAYS.FRI));

possiamo anche passare il giorno 3, ricevendo il risultato correttamente perchè corrisponde a WED

console.log(isWorkingDay(3));

se passassi un numero superiore al range, tipo 8, non riceverei errori, perchè l’array prevede l’inserimento di altri valori. Qualora aggiungessi un altro enum DAYS con altri valori, sovrascriverebbe quello precedente

enum DAYS { PIPPO, PAPERINO }

ora in DAYS avrei PIPPO in posizione 0 e Paperino in posizione 1, mentre in posizione 2 avrei TUE, qualora volessi aggiungere valori in sequenza dovrei stanziare il primo valore alla posizione numerica successiva

enum DAYS { PIPPO = 8, PAPERINO }

any, void, null, undefined, never

quando i dati non sono conosciuti, tipo quando arrivano da una chiamata AJAX, possiamo utilizzare il tipo any

let age: any = 45;
age = '45'; //nessun errore

esempio tipico di array cui membri sono di tipo any

let userData: any[] = [45, 'hippo', {indirizzo: 'Genova'}];

se dichiaro

userData = 4;

riceverei un errore perchè non è un array, mentre abbiamo dichiarato che è un ARRAY di tipo any. Il tipo array any è da utilizzare quando abbiamo dei dati all’interno con tipi differenti mischiati tra loro.

Un altro tipo che si può utilizzare è il tipo void (vuoto), utile per esempio in presenza di una funzione che non ritorna alcun dato

function printName() : void {
  return 4;
}

Genera errore perchè se dichiarata void la funzione può ritornare solo NULL o UNDEFINED.

A seconda della configurazione di TypeScript NULL  potrebbe non essere accettato in void, dipende se il parametro strictNullChecks nel file tsconfig.json è settato a true o false. Ha poco senso assegnare il tipo void ad una variabile.

Il tipo never è da utilizzarsi nel caso in cui una funzione non ritorna mai nulla, nessun valore, caso differente da void, null o undefined.

Null e undefined ha poco senso assegnarli

let myAge:null;
let myAge2:undefined;

In typescript è permesso per quanto insensato, a differenza di any e void.