In questo articolo vedremo le modifiche introdotte in TypeScript 5.0, dando uno sguardo approfondito alle sue nuove caratteristiche e funzionalit\u00e0.<\/p>\n
Come Iniziare con TypeScript 5.0<\/h2>\n
TypeScript \u00e8 un compiler ufficiale che potete installare nel vostro progetto utilizzando npm<\/a>. Se volete iniziare a usare TypeScript 5.0, potete eseguire il seguente comando nella directory del progetto:<\/p>\n Questo installer\u00e0 il compiler nella directory node_modules<\/strong>, che ora potrete eseguire con il comando Trovate le istruzioni per usare la nuova versione di TypeScript in Visual Studio Code in questa documentazione<\/a>.<\/p>\n\n In questo articolo esploriamo i 5 principali aggiornamenti introdotti in TypeScript. Queste caratteristiche includono:<\/p>\n I decorator sono presenti in TypeScript da un po’ di tempo con un flag sperimentale, ma la nuova versione li aggiorna con la proposta di ECMAScript, che \u00e8 ora in fase 3<\/a>, cio\u00e8 la fase in cui viene aggiunta a TypeScript.<\/p>\n I decorator sono un modo per personalizzare il comportamento delle classi e dei loro membri in modo riutilizzabile. Per esempio, se avete una classe che ha due metodi, Nei casi d’uso reali, questa classe dovrebbe avere metodi pi\u00f9 complicati, che gestiscono alcune logiche asincrone e hanno effetti collaterali, ecc., in cui inserire alcune chiamate a Si tratta di uno schema che ricorre spesso, e avere una soluzione da applicare a ogni metodo sarebbe decisamente comodo.<\/p>\n \u00c8 qui che entrano in gioco i decorator. Possiamo definire una funzione chiamata Nel codice precedente, Utilizzando i decorator, potete applicare Il risultato sar\u00e0 il seguente:<\/p>\n Quando si definisce la funzione decorator ( Quando eseguite il vostro codice, l’output riporter\u00e0 il nome di ogni metodo decorato con il decorator Le cose che potete fare con i decorator sono molte di pi\u00f9. Per maggiori informazioni su come usare i decorator in TypeScript, consultate la richiesta di pull originale<\/a>.<\/p>\n Questo \u00e8 un altro grande rilascio che vi offre un nuovo strumento con i generici per migliorare l’inferenza quando chiamate le funzioni. Per impostazione predefinita, quando dichiarate dei valori con Finora, per ottenere l’inferenza desiderata, dovevate usare l’asserzione const aggiungendo “as const”:<\/p>\n Quando chiamate delle funzioni, la situazione \u00e8 simile. Nel codice qui sotto, il tipo dedotto per countries<\/strong> \u00e8 Potreste desiderare un tipo pi\u00f9 specifico; prima, un modo per risolvere il problema era quello di aggiungere l’asserzione Questo pu\u00f2 essere difficile da ricordare e da implementare. Tuttavia, TypeScript 5.0 introduce una nuova funzione che consente di aggiungere un modificatore const alla dichiarazione di un parametro di tipo, che applicher\u00e0 automaticamente un’inferenza di tipo const come impostazione predefinita.<\/p>\n L’uso dei parametri type Potete consultare la richiesta di pull originale<\/a> per maggiori informazioni sul funzionamento del parametro di tipo const in TypeScript.<\/p>\n Gli enum in TypeScript sono un potente costrutto che permette di definire un insieme di costanti denominate. In TypeScript 5.0 sono stati apportati dei miglioramenti agli enum per renderli ancora pi\u00f9 flessibili e utili.<\/p>\n Per esempio, se il seguente enum viene passato in una funzione:<\/p>\n Prima dell’introduzione di TypeScript 5.0, potevate passare un numero di livello sbagliato e non si verificava alcun errore. Ma con l’introduzione di TypeScript 5.0, verr\u00e0 immediatamente comunicato un errore.<\/p>\n Inoltre, la nuova versione trasforma tutti gli enum in union enum creando un tipo unico per ogni membro calcolato. Questo miglioramento consente di restringere tutti gli enum e di fare riferimento ai loro membri come tipi:<\/p>\n TypeScript 5.0 include numerosi cambiamenti significativi nella struttura del codice, nelle strutture dati e nelle estensioni algoritmiche. Questo ha contribuito a migliorare l’intera esperienza di TypeScript, dall’installazione all’esecuzione, rendendola pi\u00f9 veloce ed efficiente.<\/p>\n Per esempio, la differenza tra le dimensioni del pacchetto di TypeScript 5.0 e 4.9 \u00e8 davvero notevole.<\/p>\n TypeScript \u00e8 stato recentemente migrato dagli spazi dei nomi ai moduli, consentendogli di sfruttare i moderni strumenti di compilazione in grado di eseguire ottimizzazioni come lo scope hoisting. Inoltre, la rimozione di alcuni codici deprecati ha permesso di ridurre di circa 26,4 MB la dimensione del pacchetto di TypeScript 4.9, che era di 63,8 MB.<\/p>\n Ecco altri interessanti traguardi raggiunti in termini di velocit\u00e0 e dimensioni tra TypeScript 5.0 e 4.9:<\/p>\nnpm install -D typescript<\/code><\/pre>\nnpx tsc<\/code>.<\/p>\nCosa c’\u00e8 di Nuovo in TypeScript 5.0?<\/h2>\n
Decorator Pi\u00f9 Moderni<\/h3>\n
greet<\/code> e getAge<\/code>:<\/p>\nclass Person {\n\tname: string;\n\tage: number;\n\tconstructor(name: string, age: number) {\n \tthis.name = name;\n \tthis.age = age;\n\t}\n\n\tgreet() {\n \tconsole.log(`Hello, my name is ${this.name}.`);\n\t}\n\n\tgetAge() {\n \tconsole.log(`I am ${this.age} years old.`);\n\t}\n}\n\nconst p = new Person('Ron', 30);\np.greet();\np.getAge();<\/code><\/pre>\nconsole.log<\/code> per facilitare il debug dei metodi.<\/p>\nclass Person {\n\tname: string;\n\tage: number;\n\tconstructor(name: string, age: number) {\n \tthis.name = name;\n \tthis.age = age;\n\t}\n\n\tgreet() {\n \tconsole.log('LOG: Method Execution Starts.');\n \tconsole.log(`Hello, my name is ${this.name}.`);\n \tconsole.log('LOG: Method Execution Ends.');\n\t}\n\n\tgetAge() {\n \tconsole.log('LOG: Method Execution Starts.');\n \tconsole.log(`I am ${this.age} years old.`);\n \tconsole.log('Method Execution Ends.');\n\t}\n}\n\nconst p = new Person('Ron', 30);\np.greet();\np.getAge();<\/code><\/pre>\ndebugMethod<\/code> che si presenta come segue:<\/p>\nfunction debugMethod(originalMethod: any, context: any) {\n\tfunction replacementMethod(this: any, ...args: any[]) {\n \tconsole.log('Method Execution Starts.');\n \tconst result = originalMethod.call(this, ...args);\n \tconsole.log('Method Execution Ends.');\n \treturn result;\n\t}\n\treturn replacementMethod;\n}<\/code><\/pre>\ndebugMethod<\/code> prende il metodo originale (originalMethod<\/code>) e restituisce una funzione che fa quanto segue:<\/p>\n\n
debugMethod<\/code> ai vostri metodi come mostrato nel codice seguente:<\/p>\nclass Person {\n\tname: string;\n\tage: number;\n\tconstructor(name: string, age: number) {\n \tthis.name = name;\n \tthis.age = age;\n\t}\n\t@debugMethod\n\tgreet() {\n \tconsole.log(`Hello, my name is ${this.name}.`);\n\t}\n\t@debugMethod\n\tgetAge() {\n \tconsole.log(`I am ${this.age} years old.`);\n\t}\n}\nconst p = new Person('Ron', 30);\np.greet();\np.getAge();<\/code><\/pre>\nLOG: Entering method.\nHello, my name is Ron.\nLOG: Exiting method.\nLOG: Entering method.\nI am 30 years old.\nLOG: Exiting method.<\/code><\/pre>\ndebugMethod<\/code>), viene passato un secondo parametro chiamato context<\/code> (\u00e8 l’oggetto contesto, che contiene alcune informazioni utili su come \u00e8 stato dichiarato il metodo decorato e anche il nome del metodo). Potete aggiornare il vostro debugMethod<\/code> per ottenere il nome del metodo dall’oggetto context<\/code>:<\/p>\nfunction debugMethod(\n\toriginalMethod: any,\n\tcontext: ClassMethodDecoratorContext\n) {\n\tconst methodName = String(context.name);\n\tfunction replacementMethod(this: any, ...args: any[]) {\n \tconsole.log(`'${methodName}' Execution Starts.`);\n \tconst result = originalMethod.call(this, ...args);\n \tconsole.log(`'${methodName}' Execution Ends.`);\n \treturn result;\n\t}\n\treturn replacementMethod;\n}<\/code><\/pre>\ndebugMethod<\/code>:<\/p>\n'greet' Execution Starts.\nHello, my name is Ron.\n'greet' Execution Ends.\n'getAge' Execution Starts.\nI am 30 years old.\n'getAge' Execution Ends.<\/code><\/pre>\nIntroduzione dei Parametri Const Type<\/h3>\n
const<\/code>, TypeScript ne deduce il tipo e non i valori letterali:<\/p>\n\/\/ Inferred type: string[]\nconst names = ['John', 'Jake', 'Jack'];<\/code><\/pre>\n\/\/ Inferred type: readonly [\"John\", \"Jake\", \"Jack\"]\nconst names = ['John', 'Jake', 'Jack'] as const;<\/code><\/pre>\nstring[]<\/code>:<\/p>\ntype HasCountries = { countries: readonly string[] };\nfunction getCountriesExactly(arg: T): T['countries'] {\n\treturn arg.countries;\n}\n\n\/\/ Inferred type: string[]\nconst countries = getCountriesExactly({ countries: ['USA', 'Canada', 'India'] });<\/code><\/pre>\nas const<\/code>:<\/p>\n\/\/ Inferred type: readonly [\"USA\", \"Canada\", \"India\"]\nconst names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] } as const);<\/code><\/pre>\ntype HasCountries = { countries: readonly string[] };\nfunction getNamesExactly(arg: T): T['countries'] {\n\treturn arg.countries;\n}\n\n\/\/ Inferred type: readonly [\"USA\", \"Canada\", \"India\"]\nconst names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] });<\/code><\/pre>\nconst<\/code> consente a chi sviluppa di esprimere pi\u00f9 chiaramente le intenzioni nel proprio codice. Se una variabile \u00e8 destinata a rimanere costante e a non cambiare mai, l’uso di un parametro const<\/code> assicura che non possa essere modificata accidentalmente.<\/p>\nMiglioramenti agli Enum<\/h3>\n
enum Color {\n\tRed,\n\tGreen,\n\tBlue,\n}\n\nfunction getColorName(colorLevel: Color) {\n\treturn colorLevel;\n}\n\nconsole.log(getColorName(1));<\/code><\/pre>\nenum Color {\n\tRed,\n\tPurple,\n\tOrange,\n\tGreen,\n\tBlue,\n\tBlack,\n\tWhite,\n}\n\ntype PrimaryColor = Color.Red | Color.Green | Color.Blue;\n\nfunction isPrimaryColor(c: Color): c is PrimaryColor {\n\treturn c === Color.Red || c === Color.Green || c === Color.Blue;\n}\n\nconsole.log(isPrimaryColor(Color.White)); \/\/ Outputs: false\nconsole.log(isPrimaryColor(Color.Red)); \/\/ Outputs: true<\/code><\/pre>\nMiglioramenti delle Prestazioni di TypeScript 5.0<\/h3>\n
![\"Grafico](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/pasted-image-0.png\")