IDE<\/a>.<\/p>\nEcco un esempio di interfaccia in TypeScript:<\/p>\n
interface Person {\n firstName: string;\n lastName: string;\n age: number;\n}<\/code><\/pre>\nIn questo esempio, definiamo un’interfaccia Person<\/code> che specifica tre propriet\u00e0: firstName<\/code> di tipo string<\/code>, lastName<\/code> di tipo string<\/code> e age<\/code> di tipo number<\/code>.<\/p>\nQualsiasi oggetto che abbia queste tre propriet\u00e0 con i tipi specificati sar\u00e0 considerato compatibile con l’interfaccia Person<\/code>. Definiamo ora gli oggetti conformi all’interfaccia Person<\/code>:<\/p>\nlet person1: Person = {\n firstName: \"John\",\n lastName: \"Doe\",\n age: 30\n};\n\nlet person2: Person = {\n firstName: \"Jane\",\n lastName: \"Doe\",\n age: 25\n};<\/code><\/pre>\nIn questo esempio, abbiamo creato due oggetti person1<\/code> e person2<\/code> conformi all’interfaccia Person<\/code>. Entrambi gli oggetti hanno le propriet\u00e0 richieste firstName<\/code>, lastName<\/code> e age<\/code> con i tipi specificati, quindi sono compatibili con l’interfaccia Person<\/code>.<\/p>\nEstendere le interfacce<\/h3>\n
Le interfacce possono essere estese per creare nuove interfacce che ereditano propriet\u00e0 da quelle esistenti.<\/p>\n
Ad esempio:<\/p>\n
interface Animal {\n name: string;\n sound: string;\n}\n\ninterface Dog extends Animal {\n breed: string;\n}\n\nlet dog: Dog = {\n name: \"Buddy\",\n sound: \"Woof\",\n breed: \"Labrador\"\n};<\/code><\/pre>\nIn questo esempio, definiamo l’interfaccia Animal<\/code> con le propriet\u00e0 name<\/code> e sound<\/code>, e poi definiamo una nuova interfaccia “Dog” che estende l’interfaccia Animal<\/code> e aggiunge una nuova propriet\u00e0 breed<\/code>. L’interfaccia Dog<\/code> eredita le propriet\u00e0 dall’interfaccia Animal<\/code>, quindi qualsiasi oggetto conforme all’interfaccia Dog<\/code> deve avere anche le propriet\u00e0 name<\/code> e sound<\/code>.<\/p>\nPropriet\u00e0 opzionali<\/h3>\n
Le interfacce possono avere anche delle propriet\u00e0 opzionali, indicate da un ?<\/code> dopo il nome della propriet\u00e0.<\/p>\nEcco un esempio:<\/p>\n
interface Car {\n make: string;\n model: string;\n year?: number;\n}\n\nlet car1: Car = {\n make: \"Toyota\",\n model: \"Camry\"\n};\n\nlet car2: Car = {\n make: \"Honda\",\n model: \"Accord\",\n year: 2020\n};<\/code><\/pre>\nIn questo esempio, abbiamo definito un’interfaccia Car<\/code> con le propriet\u00e0 make<\/code> e model<\/code> e una propriet\u00e0 opzionale year<\/code>. La propriet\u00e0 year<\/code> non \u00e8 obbligatoria, quindi gli oggetti conformi all’interfaccia Car<\/code> possono averla o meno.<\/p>\nType checking avanzato<\/h2>\n
TypeScript fornisce anche opzioni avanzate per il type checking nel file tsconfig.json<\/strong>. Queste opzioni possono migliorare le capacit\u00e0 di type checking di un progetto TypeScript e permettere di individuare pssibili errori in fase di compilazione, ottenendo un codice pi\u00f9 affidabile.<\/p>\n1. strictNullChecks<\/h3>\n
Se impostato su true<\/code>, TypeScript applica controlli null rigorosi, il che significa che le variabili non possono avere un valore null<\/code> o undefined<\/code>, a meno che non siano esplicitamente specificate con il tipo di unione di null<\/code> o undefined<\/code>.<\/p>\nAd esempio:<\/p>\n
{\n \"compilerOptions\": {\n\t\"strictNullChecks\": true\n }\n}<\/code><\/pre>\nSe si abilita questa opzione, TypeScript catturer\u00e0 i possibili valori di null<\/code> o undefined<\/code> in fase di compilazione, prevenendo errori di runtime causati dall’accesso a propriet\u00e0 o metodi su variabili null<\/code> o undefined<\/code>.<\/p>\n\/\/ Example 1: Error - Object is possibly 'null'\nlet obj1: { prop: string } = null;\nconsole.log(obj1.prop);\n\n\/\/ Example 2: Error - Object is possibly 'undefined'\nlet obj2: { prop: string } = undefined;\nconsole.log(obj2.prop);<\/code><\/pre>\n2. strictFunctionTypes<\/h3>\n
Se questa opzione \u00e8 impostata su true<\/code>, TypeScript abilita il controllo rigoroso dei tipi delle funzioni, compresa la bivarianza dei parametri di funzione. Questo fa s\u00ec che la compatibilit\u00e0 dei tipi degli argomenti delle funzioni sia controllata rigorosamente.<\/p>\nAd esempio:<\/p>\n
{\n \"compilerOptions\": {\n\t\"strictFunctionTypes\": true\n }\n}<\/code><\/pre>\nAbilitando questa opzione, in fase di compilazione TypeScript individuer\u00e0 le possibili discrepanze tra i tipi di parametri delle funzioni, prevenendo errori di runtime causati dal passaggio di argomenti errati.<\/p>\n
\/\/ Example: Error - Argument of type 'number' is not assignable to parameter of type 'string'\nfunction greet(name: string) {\n console.log(`Hello, ${name}!`);\n}\n\ngreet(123);<\/code><\/pre>\n3. noImplicitThis<\/h3>\n
Impostando questa opzione su true<\/code>, TypeScript non consentir\u00e0 l’utilizzo di this<\/code> con un tipo implicito any<\/code>, il che aiuta a individuare errori quando si usa this<\/code> nei metodi delle classi.<\/p>\nAd esempio:<\/p>\n
{\n \"compilerOptions\": {\n\t\"noImplicitThis\": true\n }\n}<\/code><\/pre>\nAbilitando questa opzione, TypeScript individuer\u00e0 i possibili errori causati dall’utilizzo di this<\/code> senza annotazioni di tipo o binding adeguati nei metodi di classe.<\/p>\n\/\/ Example: Error - The 'this' context of type 'void' is not assignable to method's 'this' of type 'MyClass'\nclass MyClass {\n private prop: string;\n\n constructor(prop: string) {\n\tthis.prop = prop;\n }\n\n printProp() {\n\tconsole.log(this.prop);\n }\n}\n\nlet obj = new MyClass(\"Hello\");\nsetTimeout(obj.printProp, 1000); \/\/ 'this' context is lost, potential error<\/code><\/pre>\n4. target<\/h3>\n
L’opzione target<\/code> specifica la versione di destinazione di ECMAScript del codice TypeScript, il che vuol dire che stabilisce la versione di JavaScript che il compiler TypeScript deve generare come output.<\/p>\nAd esempio:<\/p>\n
{\n \"compilerOptions\": {\n\t\"target\": \"ES2018\"\n }\n}<\/code><\/pre>\nAssegnando il valore “ES2018<\/strong>“, TypeScript generer\u00e0 codice JavaScript conforme allo standard ECMAScript 2018.<\/p>\nQuesto pu\u00f2 essere utile se si desidera sfruttare le ultime funzionalit\u00e0 e la sintassi pi\u00f9 recente di JavaScript, ma sar\u00e0 necessario anche garantire la retrocompatibilit\u00e0 con gli ambienti JavaScript pi\u00f9 vecchi.<\/p>\n
5. module<\/h3>\n
L’opzione module<\/code> specifica il sistema di moduli da utilizzare nel codice TypeScript. Le opzioni pi\u00f9 utilizzate sono “CommonJS<\/strong>“,”AMD<\/strong>“, “ES6<\/strong>“, “ES2015<\/strong>“, ecc. Questo stabilisce il modo in cui i moduli di TypeScript vengono compilati in moduli JavaScript.<\/p>\nAd esempio:<\/p>\n
{\n \"compilerOptions\": {\n\t\"module\": \"ES6\"\n }\n}<\/code><\/pre>\nSe l’opzione \u00e8 impostata su “ES6<\/strong>“, TypeScript generer\u00e0 un codice JavaScript che usa la sintassi dei moduli ECMAScript 6.<\/p>\nPu\u00f2 essere utile se si sta lavorando con un ambiente JavaScript moderno che supporta i moduli ECMAScript 6, per esempio in un’applicazione front-end che utilizza un bundler di moduli come webpack o Rollup.<\/p>\n
6. noUnusedLocals e noUnusedParameters<\/h3>\n
Queste opzioni permettono a TypeScript di catturare rispettivamente le variabili locali e i parametri delle funzioni non utilizzati.<\/p>\n
Se impostato su true<\/code>, TypeScript emetter\u00e0 errori di compilazione per qualsiasi variabile locale o parametro di funzione dichiarato ma non utilizzato nel codice.<\/p>\nAd esempio:<\/p>\n
{\n \"compilerOptions\": {\n\t\"noUnusedLocals\": true,\n\t\"noUnusedParameters\": true\n }\n}<\/code><\/pre>\nQuesti sono solo alcuni esempi di opzioni avanzate di type checking che \u00e8 possibile impostare nel file tsconfig.json<\/strong> di TypeScript. Si legga la documentazione ufficiale per saperne di pi\u00f9<\/a>.<\/p>\nBest practice e suggerimenti per utilizzare al meglio TypeScript<\/h2>\n1. Annotare correttamente i tipi per le variabili, i parametri delle funzioni e i valori restituiti<\/h3>\n
Uno dei vantaggi principali di TypeScript \u00e8 la disponibilit\u00e0 di un solido sistema di tipizzazione, che permette di specificare esplicitamente tipi di variabili, parametri di funzione e valori restituiti.<\/p>\n
Questo migliora la leggibilit\u00e0 del codice, individua tempestivamente possibili errori legati al tipo e consente di completare in modo intelligente il codice negli IDE.<\/p>\n
Ecco un esempio:<\/p>\n
\/\/ Properly annotating variable types\nlet age: number = 25;\nlet name: string = \"John\";\nlet isStudent: boolean = false;\nlet scores: number[] = [98, 76, 89];\nlet person: { name: string, age: number } = { name: \"John\", age: 25 };\n\n\/\/ Properly annotating function parameter and return types\nfunction greet(name: string): string {\n return \"Hello, \" + name;\n}\n\nfunction add(a: number, b: number): number {\n return a + b;\n}<\/code><\/pre>\n2. Funzionalit\u00e0 avanzate di TypeScript<\/h3>\n
TypeScript \u00e8 dotato di un ricco set di funzionalit\u00e0 avanzate per i tipi, come generics, unions, intersections, conditional types e mapped types. Queste possono aiutarvi a scrivere codice pi\u00f9 flessibile e riutilizzabile.<\/p>\n
Ecco un esempio:<\/p>\n
\/\/ Using generics to create a reusable function\nfunction identity(value: T): T {\n return value;\n}\n\nlet num: number = identity(42); \/\/ inferred type: number\nlet str: string = identity(\"hello\"); \/\/ inferred type: string\n\n\/\/ Using union types to allow multiple types\nfunction display(value: number | string): void {\n console.log(value);\n}\n\ndisplay(42); \/\/ valid\ndisplay(\"hello\"); \/\/ valid\ndisplay(true); \/\/ error<\/code><\/pre>\n3. Scrivere codice mantenibile e scalabile con TypeScript<\/h3>\n
TypeScript permette di scrivere codice mantenibile e scalabile grazie a interfacce, classi e moduli.<\/p>\n
Ecco un esempio:<\/p>\n
\/\/ Using interfaces for defining contracts\ninterface Person {\n name: string;\n age: number;\n}\n\nfunction greet(person: Person): string {\n return \"Hello, \" + person.name;\n}\n\nlet john: Person = { name: \"John\", age: 25 };\nconsole.log(greet(john)); \/\/ \"Hello, John\"\n\n\/\/ Using classes for encapsulation and abstraction\nclass Animal {\n constructor(private name: string, private species: string) {}\n\n public makeSound(): void {\n\tconsole.log(\"Animal is making a sound\");\n }\n}\n\nclass Dog extends Animal {\n constructor(name: string, breed: string) {\n\tsuper(name, \"Dog\");\n\tthis.breed = breed;\n }\n\n public makeSound(): void {\n\tconsole.log(\"Dog is barking\");\n }\n}\n\nlet myDog: Dog = new Dog(\"Buddy\", \"Labrador\");\nmyDog.makeSound(); \/\/ \"Dog is barking\"<\/code><\/pre>\n4. Strumenti e supporto di TypeScript negli IDE<\/h3>\n
TypeScript dispone di eccellenti strumenti di supporto negli IDE, con funzioni quali l’autocompletamento, la type inference, il refactoring e il controllo degli errori.<\/p>\n
Queste funzionalit\u00e0 permettono di aumentare la produttivit\u00e0 e individuare possibili errori nelle prime fasi dello sviluppo. Ci sono ottimi IDE compatibili con TypeScript, come Visual Studio Code, e basta installare il