Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
Guida Typescript - Tipi Object

Guida Typescript

Capitolo 4° - Tipi Object

<< Precedente Prossimo >>

I programmatori Typescript usano dei tipi object per dichiarare le aspettative del comportamento di un oggetto. Il seguente codice usa un letterale di tipo object per specificare il tipo di ritorno per la funzione 'MakePoint'.

var MakePoint: () => { 
 x: number; y: number; 
};

E' possibile dare un nome ai tipi object, e questi tipi object con un nome sono chiamati interfacce (interfaces). Per esempio:

interface Friend { 
 name: string; 
 favoriteColor?: string; 
} 
function add(friend: Friend) { 
 var name = friend.name; 
} 
add({ name: "Fred" }); // Ok 
add({ favoriteColor: "blue" }); // Errore, nome richiesto 
add({ name: "Jill", favoriteColor: "green" }); // Ok 
I tipi object modellano la diversità di comportamenti che un oggetto può esibire. Per esempio la libreria jQuery definisce un oggetto '$' che ha dei metodi come 'get' e dei campi come 'browser', tuttavia '$' può essere chiamato come una funzione. Il comportamento della funzione dipende dai parametri che gli vengono passati. In questo esempio possiamo catturare una parte di jQuery per usarla in Typescript:
interface JQuery { 
 text(content: string); 
} 
 
interface JQueryStatic { 
 get(url: string, callback: (data: string) => any); 
 (query: string): JQuery; 
} 
declare var $: JQueryStatic; 
$.get("http://mysite.org/divContent", 
 function (data: string) { 
 $("div").text(data); 
 } 
); 
Qui definiamo due interfacce, JQuery e JQueryStatic. JQuery contiene un metodo 'text' che prende un parametro 'content' di tipo string. Il tipo di ritorno non è specificato, quindi di default è 'any'. JQueryStatic definisce un metodo 'get'. La parte più interessante è questa:
(query: string): JQuery; 
Questa è una firma essenziale, la quale indica che l'interfaccia stessa è chiamabile, tramite un parametro 'query' di tipo string e ritorna un oggetto di tipo JQuery. In questo modo è possibile usare:
$.get("http://mysite.org/divContent")

Ma anche:

$("div").text(data); 

E' possibile scrivere qualsiasi funzione come un tipo object. Ad esempio:

var f: { (): string; }; // interfaccia anonima senza nome (tipo object) chiamabile, ritorna un tipo string
var sameType: () => string; // Stessa cosa, ma tramite la sintassi () =>
sameType = f; // Ok
var nope: () => number; // Una funzione diversa (che ritorna un number invece di string)
nope = sametype; // Errore! Type mismatch
Fino ad ora la tipizzazione di jQuery cattura solamente una caratteristica, quella di ritornare un oggetto 'JQuery' quando gli passiamo una stringa. Per specificare più caratteristiche, Typescript permette di fare overloading sulla firma nei tipi object. Per esempio, possiamo aggiungere all'interfaccia 'JQueryStatic' la firma:
(ready: () => any): any; 

Questa firma denota che una funzione può essere passata come parametro alla funzione '$'. Come ad esempio:

$(function(){
// il DOM è pronto
});

Un utente non avrà il bisogno di specificare queste interfacce a mano; semplicemente userà delle interfacce definite dalla libreria in questione per scoprire (tramite l'autocompletamento) e verificare (tramite il static checking) l'uso corretto della libreria.

64

<< Precedente Prossimo >>
A proposito dell'autore

E' un appassionato di programmazione con un particolare interesse per le tecnologie web e mobile. Da 11 anni gestisce il sito pierotofy.it e lavora negli Stati Uniti come consulente informatico tramite la sua azienda, MasseranoLabs LLC. Seguilo su Twitter: @pierotofy