72 TS – Le classi

Pubblicato il di

Facciamo un breve riassunto sulle classi introdotte in JS ES6.

Le classi vengono introdotte con il costrutto class .

class Animal {

}

Questa è una classe basilare in javascript, riportandola in TypeScript e con la automatica compilazione in js, se si è scelto ES5 verrà generata questa funzione

var Animal = /** @class */ (function () {
    function Animal() {
    }
    return Animal;
}());

Infatti in ES5 il concetto di classe era utilizzato tramite una funzione che richiamava il suo parametro con il comando this

function Animal(name) {
  this.name = name
}
var cat = new Animal('gatto');

se vogliamo resituito il nome possiamo girare una funzione getName

function Animal(name) {
this.name = name
}

Animal.prototype.getName = function() {
   return this.name;
}
var cat = new Animal('gatto');
console.log(cat.getName());

Questo era il vecchio modo di js ES5 di generare una classe chiamata Animal.

Analogamente, riprendendo il nuovo metodo in ts, creo la classe con class e creo il suo costruttore con constructor che verrà eseguito quando la classa sarà invocata

class Animal {
    constructor() {
        
    }
}

ora assegno il tipo stringa a name, sia come proprietà sia come parametro del costruttore

class Animal {
    name: string
    constructor(name: string) {
        this.name = name;
    }
    getName() {
        return 'name is' + this.name;
    }
}

Da notare che la creazione del metodo getName() non fa uso della keyword function.

Questo codice che abbiamo creato è identico a quello usato in ES6 tranne che per la tipizzazione delle proprietà e dei parametri.