I denne artikel vil du udforske de \u00e6ndringer, der er indf\u00f8rt i TypeScript 5.0, og f\u00e5 et dybdeg\u00e5ende kig p\u00e5 de nye funktioner og muligheder.<\/p>\n
Kom godt i gang med TypeScript 5.0<\/h2>\n
TypeScript er en officiel compiler, som du kan installere i dit projekt ved hj\u00e6lp af npm<\/a>. Hvis du vil begynde at bruge TypeScript 5.0 i dit projekt, kan du k\u00f8re f\u00f8lgende kommando i projektmappen i dit projekt:<\/p>\n Dette vil installere compileren i mappen node_modules<\/strong>, som du nu kan k\u00f8re med kommandoen Du kan ogs\u00e5 finde instruktioner om brug af den nyere version af TypeScript i Visual Studio Code i denne dokumentation<\/a>.<\/p>\n\n I denne artikel skal vi unders\u00f8ge 5 st\u00f8rre opdateringer, der er indf\u00f8rt i TypeScript. Disse funktioner omfatter:<\/p>\n Decorators har eksisteret i TypeScript i et stykke tid under et eksperimentelt flag, men den nye version bringer dem op p\u00e5 h\u00f8jde med ECMAScript-forslaget, som nu er i fase 3<\/a>, hvilket betyder, at det er i en fase, hvor det bliver tilf\u00f8jet til TypeScript.<\/p>\n Decorators er en m\u00e5de at tilpasse opf\u00f8rslen af klasser og deres medlemmer p\u00e5 en genanvendelig m\u00e5de. Hvis du f.eks. har en klasse, der har to metoder, I virkelige brugssituationer b\u00f8r denne klasse have mere komplicerede metoder, der h\u00e5ndterer noget asynkron logik og har sideeffekter, f.eks. hvor du \u00f8nsker at inds\u00e6tte nogle Dette er et hyppigt forekommende m\u00f8nster, og det ville v\u00e6re praktisk at have en l\u00f8sning, der kan anvendes p\u00e5 alle metoder.<\/p>\n Det er her, at decorators kommer ind i billedet. Vi kan definere en funktion ved navn I koden ovenfor tager Ved at bruge dekoratorer kan du anvende Dette vil give f\u00f8lgende:<\/p>\n Ved definitionen af decorator-funktionen ( N\u00e5r du k\u00f8rer din kode, vil output nu indeholde navnet p\u00e5 hver metode, der er dekoreret med Der er mere, end du kan g\u00f8re med decoratorer. Du er velkommen til at tjekke den oprindelige pull request<\/a> for at f\u00e5 flere oplysninger om, hvordan man bruger decorators i TypeScript.<\/p>\n Dette er endnu en stor udgivelse, der giver dig et nyt v\u00e6rkt\u00f8j med generics for at forbedre den inferens, du f\u00e5r, n\u00e5r du kalder funktioner. Som standard, n\u00e5r du deklarerer v\u00e6rdier med Indtil nu har du for at opn\u00e5 den \u00f8nskede inferens skullet bruge const-assertion ved at tilf\u00f8je “as const” for at opn\u00e5 den \u00f8nskede inferens:<\/p>\n N\u00e5r du kalder funktioner, er det p\u00e5 samme m\u00e5de. I koden nedenfor er den udledte type af lande<\/strong> Du kan \u00f8nske en mere specifik type, som en m\u00e5de at l\u00f8se f\u00f8r nu har v\u00e6ret at tilf\u00f8je Dette kan v\u00e6re sv\u00e6rt at huske og implementere. TypeScript 5.0 introducerer imidlertid en ny funktion, hvor du kan tilf\u00f8je en const-modifikator til en typeparameterdeklaration, hvilket automatisk vil anvende en const-lignende inferens som standard.<\/p>\n Ved at bruge Du kan se den oprindelige pull request<\/a> for at f\u00e5 flere oplysninger om, hvordan const-typeparameteren fungerer i TypeScript.<\/p>\n Enums i TypeScript er en kraftfuld konstruktion, der giver udviklere mulighed for at definere et s\u00e6t navngivne konstanter. I TypeScript 5.0 er der blevet foretaget forbedringer af enums for at g\u00f8re dem endnu mere fleksible og nyttige.<\/p>\n Hvis du f.eks. har f\u00f8lgende enum, der er overgivet til en funktion:<\/p>\n F\u00f8r indf\u00f8relsen af TypeScript 5.0 kunne du sende et forkert niveaunummer, og der ville ikke opst\u00e5 nogen fejl. Men med indf\u00f8relsen af TypeScript 5.0 vil det straks give en fejl.<\/p>\n Desuden g\u00f8r den nye version alle enums til union-enums ved at oprette en unik type for hvert beregnet medlem. Denne forbedring g\u00f8r det muligt at indsn\u00e6vre alle enums og henvise til deres medlemmer som typer:<\/p>\n TypeScript 5.0 indeholder adskillige v\u00e6sentlige \u00e6ndringer i kodestruktur, datastrukturer og algoritmiske udvidelser. Dette har v\u00e6ret med til at forbedre hele TypeScript-oplevelsen, fra installation til udf\u00f8relse, hvilket har gjort den hurtigere og mere effektiv.<\/p>\n For eksempel er forskellen mellem pakkest\u00f8rrelsen i TypeScript 5.0 og 4.9 ganske imponerende.<\/p>\n TypeScript blev for nylig migreret fra namespaces til moduler, hvilket g\u00f8r det muligt at udnytte moderne buildv\u00e6rkt\u00f8jer, der kan udf\u00f8re optimeringer som scope hoisting. Desuden er der ved at fjerne noget for\u00e6ldet kode blevet barberet ca. 26,4 MB af TypeScript 4.9’s 63,8 MB pakkest\u00f8rrelse.<\/p>\n Her er et par andre interessante gevinster i hastighed og st\u00f8rrelse mellem TypeScript 5.0 og 4.9:<\/p>\nnpm install -D typescript<\/code><\/pre>\nnpx tsc<\/code>.<\/p>\nHvad er nyt i TypeScript 5.0?<\/h2>\n
Moderniserede decorators<\/h3>\n
greet<\/code> og getAge<\/code>:<\/p>\nclass Person {\n name: string;\n age: number;\n constructor(name: string, age: number) {\n this.name = name;\n this.age = age;\n }\n\n greet() {\n console.log(`Hello, my name is ${this.name}.`);\n }\n\n getAge() {\n console.log(`I am ${this.age} years old.`);\n }\n}\n\nconst p = new Person('Ron', 30);\np.greet();\np.getAge();<\/code><\/pre>\nconsole.log<\/code>-opkald for at hj\u00e6lpe med at fejlfinde metoderne.<\/p>\nclass Person {\n name: string;\n age: number;\n constructor(name: string, age: number) {\n this.name = name;\n this.age = age;\n }\n\n greet() {\n console.log('LOG: Method Execution Starts.');\n console.log(`Hello, my name is ${this.name}.`);\n console.log('LOG: Method Execution Ends.');\n }\n\n getAge() {\n console.log('LOG: Method Execution Starts.');\n console.log(`I am ${this.age} years old.`);\n console.log('Method Execution Ends.');\n }\n}\n\nconst p = new Person('Ron', 30);\np.greet();\np.getAge();<\/code><\/pre>\ndebugMethod<\/code>, der ser ud som f\u00f8lger:<\/p>\nfunction debugMethod(originalMethod: any, context: any) {\n function replacementMethod(this: any, ...args: any[]) {\n console.log('Method Execution Starts.');\n const result = originalMethod.call(this, ...args);\n console.log('Method Execution Ends.');\n return result;\n }\n return replacementMethod;\n}<\/code><\/pre>\ndebugMethod<\/code> den oprindelige metode (originalMethod<\/code>) og returnerer en funktion, der g\u00f8r f\u00f8lgende:<\/p>\n\n
debugMethod<\/code> p\u00e5 dine metoder som vist i koden nedenfor:<\/p>\nclass Person {\n name: string;\n age: number;\n constructor(name: string, age: number) {\n this.name = name;\n this.age = age;\n }\n @debugMethod\n greet() {\n console.log(`Hello, my name is ${this.name}.`);\n }\n @debugMethod\n getAge() {\n console.log(`I am ${this.age} years old.`);\n }\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>) overf\u00f8res en anden parameter kaldet context<\/code> (det er context-objektet – det indeholder nogle nyttige oplysninger om, hvordan den dekorerede metode blev erkl\u00e6ret, og ogs\u00e5 navnet p\u00e5 metoden). Du kan opdatere din debugMethod<\/code> for at hente metodens navn fra context<\/code> objektet:<\/p>\nfunction debugMethod(\n originalMethod: any,\n context: ClassMethodDecoratorContext\n) {\n const methodName = String(context.name);\n function replacementMethod(this: any, ...args: any[]) {\n console.log(`'${methodName}' Execution Starts.`);\n const result = originalMethod.call(this, ...args);\n console.log(`'${methodName}' Execution Ends.`);\n return result;\n }\n return replacementMethod;\n}<\/code><\/pre>\ndebugMethod<\/code>-decoratoren:<\/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>\nIntroduktion af const Type Parameters<\/h3>\n
const<\/code>, udleder TypeScript typen og ikke dens bogstavelige v\u00e6rdier:<\/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 return arg.countries;\n}\n\n\/\/ Inferred type: string[]\nconst countries = getCountriesExactly({ countries: ['USA', 'Canada', 'India'] });<\/code><\/pre>\nas const<\/code> assertion:<\/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 return arg.countries;\n}\n\n\/\/ Inferred type: readonly [\"USA\", \"Canada\", \"India\"]\nconst names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] });<\/code><\/pre>\nconst<\/code> typeparametre kan udviklere udtrykke hensigten mere klart i deres kode. Hvis en variabel skal v\u00e6re konstant og aldrig \u00e6ndres, sikrer brugen af en const<\/code> typeparameter, at den aldrig kan \u00e6ndres ved et uheld.<\/p>\nForbedringer af Enums<\/h3>\n
enum Color {\n Red,\n Green,\n Blue,\n}\n\nfunction getColorName(colorLevel: Color) {\n return colorLevel;\n}\n\nconsole.log(getColorName(1));<\/code><\/pre>\nenum Color {\n Red,\n Purple,\n Orange,\n Green,\n Blue,\n Black,\n White,\n}\n\ntype PrimaryColor = Color.Red | Color.Green | Color.Blue;\n\nfunction isPrimaryColor(c: Color): c is PrimaryColor {\n return 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>\nForbedringer af ydeevnen i TypeScript 5.0<\/h3>\n
![\"TypeScript-pakkest\u00f8rrelse\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/pasted-image-0.png\")