{"id":12397,"date":"2017-04-07T18:30:34","date_gmt":"2017-04-07T16:30:34","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=12397"},"modified":"2017-04-07T18:30:34","modified_gmt":"2017-04-07T16:30:34","slug":"programmare-a-oggetti-in-typescript","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/programmare-a-oggetti-in-typescript\/","title":{"rendered":"Programmare a oggetti in TypeScript"},"content":{"rendered":"

In un articolo precedente<\/a>, abbiamo preso confidenza con\u00a0TypeScript, la nuova frontiera del mondo Javascript, che ha introdotto una serie di novit\u00e0 sintattiche nel \u00a0linguaggio pi\u00f9 diffuso nel web “lato client”.<\/p>\n

Vedremo ora i meccanismi che TypeScript mette \u00a0a disposizione per la programmazione orientata agli oggetti ereditati, in\u00a0buona parte, da\u00a0EcmaScript6, recente\u00a0evoluzione di\u00a0Javascript.<\/p>\n

Prima di passare all’esempio (di cui forniamo il\u00a0listato completo<\/a>),\u00a0ricordiamo che il codice TypeScript deve essere compilato in Javascript tramite il transpiler<\/em> offerto dal comando tsc<\/em> ed il file prodotto potr\u00e0 essere integrato in una pagina HTML. Comunque, TypeScript trova\u00a0in Node.js<\/a> il suo habitat naturale pertanto pu\u00f2 essere impiegato anche in applicazioni stand-alone.\u00a0Supponiamo di creare un file\u00a0TypeScript di\u00a0nome app.ts:<\/em> dovremo prima compilarlo in Javascript<\/p>\n

> tsc app.ts<\/pre>\n
e subito dopo potremo lanciarne il risultato con Node.js:<\/p>\n
> node app.js<\/pre>\n
Classi e oggetti<\/h2>\n
Prima di istanziare oggetti, in TypeScript, \u00e8 necessario creare le\u00a0classi su cui essi si basano. Il linguaggio, a tal proposito, ha ereditato il costrutto class<\/strong> da EcmaScript6. Nell’esempio che proponiamo immaginiamo di avere una classe in grado di gestire fatture per clienti. Ogni articolo inserito in essa viene modellato con oggetti di classe Acquisto che contemplano una descrizione testuale del bene (ad esempio: “n. 10 pennarelli”) nonch\u00e8\u00a0l’importo complessivo.<\/p>\n
class Acquisto\r\n{\r\n    private descrizione: string;\r\n    private _prezzo: number;\r\n\r\n    constructor(descrizione, prezzo)\r\n    {\r\n        this.descrizione=descrizione;\r\n        this._prezzo=prezzo;\r\n    }\r\n\r\n    set prezzo(prezzo:number)\r\n    {\r\n        this._prezzo=prezzo;\r\n    }\r\n\r\n    get prezzo():number\r\n    {\r\n        return this._prezzo;\r\n    }\r\n\r\n    stampa():string\r\n    {\r\n        return \"- \"+this.descrizione+\"   \"+this.prezzo+\" euro\";\r\n    }\r\n}<\/pre>\n
Notiamo che i due membri sono definiti con tanto di tipo di dato, caratteristica peculiare di TypeScript. E’ possibile applicare loro un livello di visibilit\u00e0 ristretta con il modificatore private<\/strong> che impedisce l’accesso alle propriet\u00e0 dall’esterno della classe.<\/p>\n
Il costruttore<\/strong> – metodo che in\u00a0Programmazione Orientata agli Oggetti serve ad inizializzare il nuovo oggetto creato – deve necessariamente essere denominato constructor<\/em> e pu\u00f2 avere parametri in input. Il codice che abbiamo inserito al suo interno compie delle normali assegnazioni alle propriet\u00e0. Oltre al costruttore, si possono definire ulteriori metodi con tanto di tipo di ritorno come vediamo nel metodo stampa()<\/em> che restituisce il formato stringa dell’oggetto Acquisto, compilando in pratica una riga della fattura:<\/p>\n
 stampa():string\r\n    {\r\n        return \"- \"+this.descrizione+\"   \"+this.prezzo+\" euro\";\r\n    }<\/pre>\n
Quando dobbiamo gestire dall’esterno della classe un valore private<\/em> si dovrebbero creare dei metodi pubblici per la lettura\u00a0e la modifica\u00a0corrispondenti, rispettivamente, ai classici getter e setter della Programmazione Orientata agli Oggetti. TypeScript, in stile .NET, offre gli operatori get e set<\/strong> per gli scopi analoghi che permetteranno di definire dei metodi in cui poter inserire analisi\u00a0e formattazione sui\u00a0dati con la possibilit\u00e0 di usarli come normali membri pubblici. Nella classe Acquisto l’abbiamo fatto per il prezzo con i seguenti passi:<\/p>\n
    \n
  • abbiamo definito un membro privato:\n
    private _prezzo:number<\/pre>\n<\/li>\n
  • abbiamo definito una propriet\u00e0 set in cui il valore passato in ingresso viene assegnato al membro privato:\n
     set prezzo(prezzo:number)\r\n    {\r\n        this._prezzo=prezzo;\r\n    }<\/pre>\n<\/li>\n
  • analogamente, con una propriet\u00e0 get leggeremo il valore:\n
    get prezzo():number\r\n    {\r\n        return this._prezzo;\r\n    }<\/pre>\n<\/li>\n<\/ul>\n
    Propriet\u00e0 gestite in questa modalit\u00e0 permettono di conservare i dati in forma privata ma evitano la scomodit\u00e0 sintattica di interagirvi tramite metodi come per i getter<\/em> e setter<\/em>, infatti potremo impostare e leggere il prezzo di un oggetto Acquisto cos\u00ec:<\/p>\n
    \/\/ assegnazione del prezzo\r\nacquisto.prezzo=45;\r\n\r\n\/\/ lettura del prezzo\r\nconsole.log(acquisto.prezzo);<\/pre>\n
    In definitiva, gli oggetti della classe Acquisto possono essere usati nel seguente modo:<\/p>\n
    var primoAcquisto=new Acquisto(\"n. 10 penne\", 12);\r\nconsole.log(primoAcquisto);<\/pre>\n
    sintassi che ricorda molto i linguaggi tipici della Programmazione a Oggetti.<\/p>\n
    Sfruttando la classe Acquisto appena creata possiamo definirne un’altra, denominata Fattura, che presenter\u00e0 due membri: una stringa contenente il nome del cliente ed un array di oggetti Acquisto grazie al quale potremo procedere alla stampa complessiva ed il calcolo del totale.<\/p>\n
    class Fattura\r\n{\r\n    private cliente: string;\r\n    private acquisti:Acquisto[]=[];\r\n\r\n    constructor(cliente: string)\r\n    {\r\n        this.cliente=cliente;\r\n    }\r\n\r\n    aggiungiAcquisto(nuovo:Acquisto)\r\n    {\r\n        this.acquisti.push(nuovo);\r\n    }\r\n\r\n    stampaFattura()\r\n    {\r\n        console.log(this.cliente);\r\n        for (let s of this.acquisti)\r\n        {\r\n            console.log(s.stampa());\r\n        }\r\n        console.log(\"Totale: \"+this.importoTotale+\" euro\");\r\n    }\r\n\r\n    get importoTotale():number\r\n    {\r\n        var totale:number=0.0;\r\n        for (let s of this.acquisti)\r\n        {\r\n            totale+=s.prezzo;\r\n        }\r\n        return totale;\r\n    }\r\n}<\/pre>\n
    Oltre alla definizione del secondo membro come array di oggetti, gli altri aspetti della classe sono\u00a0stati gi\u00e0 discussi precedentemente in questo tutorial.\u00a0Notiamo solo un paio di aspetti:<\/p>\n
      \n
    • l’operatore get<\/strong> \u00e8 stato utilizzato per gestire il calcolo dell’importo totale, non un normale membro privato. La comodit\u00e0 in questo caso consiste solo nel risparmio delle parentesi tonde al momento della sua invocazione nel metodo stampaFattura()<\/em>;<\/li>\n
    • il ciclo for<\/em> utilizzato usa la sintassi for-of<\/strong> in stile EcmaScript6 che permette di ciclare comodamente tra gli oggetti inseriti in un array.<\/li>\n<\/ul>\n
      Conclusione dell’esempio<\/h2>\n
      Per sperimentare le nostre classi, possiamo scrivere le seguenti righe di codice che creeranno un oggetto Fattura, vi inseriranno degli acquisti ed infine richiederanno una semplice stampa del documento:<\/p>\n
      var fattura=new Fattura(\"Ditta Rossi s.r.l.\");\r\nfattura.aggiungiAcquisto(new Acquisto(\"10 penne\", 10));\r\nfattura.aggiungiAcquisto(new Acquisto(\"zaino\", 37.5));\r\nfattura.aggiungiAcquisto(new Acquisto(\"USB drive 64 GB\", 16.39));\r\nfattura.aggiungiAcquisto(new Acquisto(\"12 quaderni\", 8));\r\n\r\nfattura.stampaFattura();<\/pre>\n
      Quello che segue \u00e8 l’output prodotto:<\/p>\n
      Ditta Rossi s.r.l.\r\n- 10 penne   10 euro\r\n- zaino   37.5 euro\r\n- USB drive 64 GB   16.39 euro\r\n- 12 quaderni   8 euro\r\nTotale: 71.89 euro\r\n<\/pre>\n
      Il tutorial che qui si conclude ha introdotto la programmazione ad oggetti in TypeScript: l’argomento \u00e8 fondamentale non solo per la sua utilit\u00e0 nella vita professionale ma soprattutto perch\u00e8 era una delle grandi sfide che attendeva il linguaggio e possiamo dire che TypeScript se l’\u00e8 cavata piuttosto bene.<\/p>\n
      Nei prossimi tutorial, impareremo altri aspetti di questa versione moderna del Javascript, lo approfondiremo per impiegarlo poi in contesti pi\u00f9 complessi.<\/p>\n
      Continuate a seguirci!<\/p>\n","protected":false},"excerpt":{"rendered":"
      In un articolo precedente, abbiamo preso confidenza con\u00a0TypeScript, la nuova frontiera del mondo Javascript, che ha introdotto…<\/p>\n","protected":false},"author":561,"featured_media":12893,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[1538,1537,18,1753],"class_list":["post-12397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial-pratici","tag-javascript","tag-node-js","tag-oop","tag-typescript"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=12397"}],"version-history":[{"count":7,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12397\/revisions"}],"predecessor-version":[{"id":12959,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12397\/revisions\/12959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media\/12893"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=12397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=12397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=12397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}