Podcast su TypeScript

Torno a scrivere dopo un “letargo” considerevole (causa lavoro, straordinari, community, ferie, tanto cibo, dieta, lavoro, ecc.)…

Oggi voglio segnalare un interessante podcast su dotNET{podcast} che abbiamo registrato con Alessandro Giorgetti e in cui parliamo di TypeScript.

Sulla scheda della puntata ci sono anche dei link interessanti per approfondire l’argomento.

Nella promessa che tornerò a scrivere altri post su TypeScript, nel frattempo ascoltate questo podcast e se avete commenti da fare segnalateceli sempre sulla pagina della puntata.

Annunci
Podcast su TypeScript

Definire una classe in Typescript

Ho fatto una promessa nel precedente post: scriverò quanto ho imparato su Typescript, così da poterlo condividere.

Typescript è un “linguaggio” il cui scopo è introdurre una capacità di tipizzazione in un linguaggio come Javascript notoriamente non tipizzato, quindi “simulando” (di fatto di questo parliamo alla fine) un comportamento basato su aspetti di programmazione orientata agli oggetti, quindi interfacce, classi, enumerazioni, ecc.

In questo post cominceremo ad esplorare questi aspetti, partendo dal vedere come Typescript implementa le classi.

Devo fare una doverosa premessa: non sono mai stato (e probabilmente mai sarò) un “esperto” di scripting lato frontend, quindi alcuni concetti (come appunto classi, interfacce, enumerazioni ecc.) potrebbero già essere stato “introdotti” da altri framework Javascript (eventualmente segnalatemelo) da me sconosciuti o poco usati, e quindi il fatto di averli affrontati in Typescript, rappresenta per me una “novità” vera e propria.

Primo test

Ok, bando alle chiacchiere e andiamo a vedere il codice. Per illustrare i concetti di base, possiamo utilizzare la funzionalità Playground che ci viene messa a disposizione sul sito ufficiale di questo linguaggio, Typescriptlang.org selezionando dalla dropdownlist che troviamo nella zona sinistra la voce “Walkthrough: Classes”, in questo modo ci troveremo nella situazione che vedete di seguito:

In questo post (e probabilmente in altri futui) utilizzeremo il Playground per spiegare i concetti del linguaggio, per poi passare all’utilizzo di Typescript all’interno di Visual Studio.

Come potete vedere nella schermata, il Playground ci mostra contemporaneamente il codice Typescript e il codice Javascriptcompilato” (passatemi il termine). In questo modo ci renderemo subito conto della trasformazione a cui viene sottoposto il “nostro” codice per renderlo “comprensibile” a tutti i browser. Infatti il Typescript come linguaggio non è contemplato dagli interpreti dei browser che conoscono molto bene invece Javascript.

Esaminiamo il codice di esempio che vediamo nella schermata:

class Greeter {

greeting: string;

constructor(message: string) {

this.greeting = message;

}

greet() {

return “Hello, ” + this.greeting;

}

}

var greeter = new Greeter(“world”);

var button = document.createElement(‘button’);

button.textContent = “Say Hello”;

button.onclick = function() {

alert(greeter.greet());

}

document.body.appendChild(button);

Come potete vedere, la prima parte è una dichiarazione di una classe, in cui abbiamo un costruttore, un metodo e un attributo. A seguire, una variabile viene istanziata tramite questa classe e quindi utilizzata.

Niente di più simile a quanto potremmo normalmente fare con un linguaggio come C#, tanto per dirne uno.

Eseguendo il codice direttamente dal Playground (tramite il pulsante “Run”) otteniamo il seguente risultato:

Quindi questo ambiente di “test” ci consente anche di fare direttamente delle prove su quanto abbiamo scritto e vederne da subito i risultati. Ovviamente il consiglio naturale è che vanno bene le piccole prove e costrutti limitati che vogliamo in qualche modo verificare, mentre non credo sia utile pensare di usare la Playground per verificare e provare codice di una certa complessità.

Tipizzazione

Un’altra utilità che vediamo in a questo “ambiente” è che possiamo usufruire della funzionalità di Intellisense come se fossimo in un vero e proprio IDE, quindi provando a tipizzare la variabile usata in questo frammento di codice (dopo vedremo in cosa consiste), si ottiene una cosa del genere:

Quello che vedete è il modo tipico con cui si può tipizzare una variabile, ovvero come si definisce in maniera specifica il tipo che dovrà istanziare.

In realtà se non definiamo il tipo che deve ospitare la var, ma ci posizioniamo con il mouse sulla variabile, vediamo che l’ambiente “deduce” comunque il tipo di dato che andrà ad ospitare, quindi il fatto di tipizzarla nella dichiarazione non è necessario, ma sicuramente utile, sia ai fini della lettura del codice, sia per assicurarci di non sbagliare il tipo nella fase di istanziazione vera e propria (magari per un errore di battitura tra classi simili).

Tipi Primitivi di Typescript

Typescript utilizza come tipi primitivi gli stessi già esistenti in Javascript, e con questi il linguaggio si adatta un po’ a tutte le situazioni di allocazione necessarie:

  • string, ovviamente corrispondente del tipo stringa (fino a UTF-16)
  • number, adibito ad ospitare indifferentemente interi o decimali (fino a 64 bit)
  • boolean, equivalente al tipo booleano

Quindi una variabile può essere dichiarata come segue:

var myvariable : string;

e istanziata in questo modo:

myvariable = “test”;

Come in linguaggi più evoluti è possibile fare insieme le due cose:

var myvariable: string = “test”;

Ereditarietà delle classi

Le classi, si sa, possono ereditare le caratteristiche da altre classi, e anche in Typescript ovviamente è possibile farlo, utilizzando la parola extends :

class Vehicle {

    name: string;

    vehicleType: string;

}

class Car extends Vehicle {

    fuelCapacity: number;

    color: string;

}

var car: Car = new Car();

car.name = “Aston Martin DBS V12″;

car.vehicleType = “car”;

car.color = “Carbon Black”;

car.fuelCapacity = 80;

L’utilizzo è molto semplice e c’è poco da spiegare, infatti il comportamento è quello previsto quando utilizziamo l’ereditarietà delle classi in linguaggi più evoluti, ovvero che è possibile appunto “ereditare” ed utilizzare tutte le caratteristiche (in questo caso solo proprietà ma anche con funzioni ed altro) dalla classe “padre”.

Enumerazioni

Anche le enumerazioni possono essere definite in Typescript. Se definissimo una enumerazione di tipi di veicolo, potremmo scrivere il codice di prima nel seguente modo:

enum VehicleTypeEnum {

    CAR,

    BYCICLE,

    TRAIN,

    AIRPLANE,

    TANK

}

class Vehicle {

    name: string;

    vehicleType: VehicleTypeEnum;

}

class Car extends Vehicle {

    fuelCapacity: number;

    color: string;

}

var car: Car = new Car();

car.name = “Aston Martin DBS V12”;

car.vehicleType = VehicleTypeEnum.CAR;

car.color = “Carbon Black”;

car.fuelCapacity = 80;

A parte il fatto di comprare un veicolo di tipo TANK (mi era molto utile quando giocavo a GTA ndr), vediamo che il codice in questo modo diventa più definito e più pulito.
Una cosa interessante degli enum è che, come avviene in molti linguaggi tipo C#, ogni valore dell’enum ha un proprio indice numerico equivalente, di default zero-based, ma definibile a piacimento:

Per assegnare un indice diverso lo si assegna semplicemente all’enum:

enum VehicleTypeEnum {

    CAR = 150,

    BYCICLE = 12,

    TRAIN = 1024,

    AIRPLANE,

    TANK

}

ma attenzione che in questo caso le ultime voci non valorizzate andranno in progressivo con il precedente definito (quindi AIRPLANE sarà 1025 e TANK 1026). Infine sembra che Javascript non faccia molto caso a valori duplicati, quindi attenti a non indicare più voci con lo stesso valore perché potreste non essere avvertiti (almeno sul Playground non ci sono avvisi).

Quindi, con l’esempio precedente possiamo da codice avere in maniera indifferente le due seguenti assegnazioni:

car.vehicleType = 150;

car.vehicleType = VehicleTypeEnum.CAR;

Per la verifica possiamo allo stesso modo fare:

var areEqual = (car.vehicleType == VehicleTypeEnum.CAR);

var areEqual = (car.vehicleType == 150);

Conclusioni

Per questo post è tutto. Abbiamo visto insieme quanto sia facile scrivere una classe, anche se quello di cui abbiamo appena parlato è solo una goccia nell’oceano, ma da qualche parte dovevamo cominciare.

Nei prossimi post aumenteremo questo livello di dettaglio e vedremo altri aspetti del linguaggio Typescript.

Definire una classe in Typescript

Typescript, questo sconosciuto

Ultimamente ho cambiato nuovamente lavoro, e nella nuova azienda dove lavoro adesso sto facendo una interessante esperienza con Typescript.

Molti di voi (come me fino a qualche settimana fa), non sa cosa sia Typescript, e siccome sto ancora cercando di capirne qualcosa, ho pensato di condividere con voi questa mia recente esperienza, magari potrà tornare utile a qualcuno.

Cos’è Typescript

Innanzitutto, spieghiamo a grandi linee di cosa si tratta.

Typescript è un “metalinguaggio” creato da Microsoft, e reso disponibile in open source, per scrivere codice javascript avanzato e soprattutto “compilabile”.

Questa mia personalissima definizione racchiude in una sola riga un concetto di linguaggio che, una volta assimilato, si potrebbe rivelare utile in moltissime situazioni.

Ovviamente non voglio riscrivere quello che trovate sul web, che non è tantissimo (a mio modesto parere) ma è sufficiente per iniziare a studiare questo linguaggio, per cui cercherò di sintetizzare le basi “principali” su cui si fonda in pochi bullet:

  • Supporto per interfacce, classi e enum
  • Supporto per ECMAScript 6
  • Compilazione a design time
  • Tradotto in javascript standard alla compilazione

Si, lo so che qualcuno che l’ha già studiato sa che ci sono altri punti, ma per me questi sono i primi punti di forza da cui vorrei partire.

Ho sentito qualcuno definire Typescript una sorta di “C# portato nel mondo Javascript”, personalmente questa definizione non mi piace, preferisco pensare a Typescript come ad una naturale evoluzione di Javascript per scenari enterprise, ovvero la necessità primaria per cui è nato questo linguaggio.

In che scenari usare Typescript

Quanti di voi hanno perso ore ed ore nel “debuggare” javascript malfunzionanti per poi scoprire che mancava una maledetta virgola o un apice, insomma qualcosa che impediva al browser di eseguire correttamente quel blocco di codice, di cui l’ambiente di sviluppo non aveva dato alcuna notizia a design time?

E quanti di voi si sono trovati quintalate di script mischiati e ricaricati senza ritegno in ogni pagina della vostra applicazione?

Beh, è chiaro che Typescript non annullerà tutta la complessità dello sviluppo frontend, ma di sicuro allevierà buona parte delle problematiche, fosse solo per il fatto che possiamo “compilarlo” e quindi sapere subito prima dell’esecuzione se qualcosa che abbiamo scritto è formalmente sbagliato.

Come già detto, una delle necessità per cui si è pensato a Typescript è lo sviluppo in scenari “Enterprise“, in cui applicazioni molto complesse e/o basate su architetture che necessitano di una forte dose di scalabilità, spesso devono fare i conti con Javascript, che porta la sua bella dose di entropia.

Per esempio, io lo sto usando in una soluzione (o meglio, una serie di soluzioni) mirate al rifacimento dello sportello bancario di un grosso istituto di credito italiano. In questo scenario una applicazione SPA (Single Page Application) fa da frontend verso altre componenti della soluzione, e questo frontend è a sua volta molto complesso a livello architetturale.

Nella soluzione che ho io, i datacontract che vengono esposti da servizi vengono poi rimappati in Typescript per la gestione di un viewmodel con Knockout.js.

Oltre alla scalabilità, anche la manutenibilità, la testabilità e la leggibilità beneficiano di questo linguaggio, presentato ormai già da cinque anni.

Da dove partire

Sicuramente dal sito Typescriptlang.org dove tutto è spiegato e dettagliato. Ci sono tutorial, esempi, e c’è anche una sezione “play” dove si può appunto “giocare” con il codice, provando subito porzioni di script senza dover avere un progetto Visual Studio aperto.
Per chi ha delle sottoscrizioni Pluralsight, ci sono un paio di corsi online, per chi non ce l’ha, segua dotNET{podcast}, perché metteremo “in palio” anche questo tipo di regalo.

Prossimi post

Per adesso mi fermo, volontariamente, per non fare un post troppo lungo. Preferisco scriverne altri, magari meglio focalizzati su Typescript, perché può tornare molto utile, anche su progetti di dimensioni più piccole. E mentre lo imparerò (o proverò a farlo) condividerò quanto ho capito di questa “evoluzione” del linguaggio di scripting più usato per lo sviluppo web.

Typescript, questo sconosciuto