In dit artikel worden de veranderingen in TypeScript 5.0 besproken, met een diepgaande blik op de nieuwe functies en mogelijkheden.<\/p>\n
Aan de slag met TypeScript 5.0<\/h2>\n
TypeScript is een offici\u00eble compiler die je met npm<\/a> in je project kunt installeren. Als je TypeScript 5.0 in je project wilt gaan gebruiken, kun je het volgende commando uitvoeren in de map van je project:<\/p>\n Dit zal de compiler installeren in de map node_modules<\/strong>, die je nu kunt uitvoeren met het commando Je kunt in deze documentatie ook instructies vinden over het gebruik van de nieuwere versie van TypeScript in Visual Studio Code<\/a>.<\/p>\n\n In dit artikel verkennen we 5 belangrijke updates die in TypeScript zijn ge\u00efntroduceerd. Deze features zijn:<\/p>\n Decorators bestaan al een tijdje in TypeScript onder een experimentele vlag, maar de nieuwe versie brengt ze in overeenstemming met het ECMAScript voorstel, dat nu in stadium 3<\/a> is, wat betekent dat het in een stadium is waarin het wordt toegevoegd aan TypeScript.<\/p>\n Decorators zijn een manier om het gedrag van klassen en hun members op een herbruikbare manier aan te passen. Als je bijvoorbeeld een klasse hebt die twee methoden heeft, In echte gebruiksgevallen zou deze klasse ingewikkelder methoden moeten hebben die wat async logica afhandelen en neveneffecten hebben, e.t.c., waarbij je enkele Dit is een vaak voorkomend patroon, en het zou handig zijn om een oplossing te hebben voor elke methode.<\/p>\n Dit is waar decorators om de hoek komen kijken. We kunnen een functie defini\u00ebren met de naam In bovenstaande code neemt de Door decorators te gebruiken, kun je de Dit levert het volgende op:<\/p>\n Bij het defini\u00ebren van de decoratorfunctie ( Als je je code uitvoert, zal de uitvoer nu de naam dragen van elke methode die “gedecoreerd” is met de Er is meer mogelijk met decoratoren. Bekijk gerust het oorspronkelijke pull request<\/a> voor meer informatie over het gebruik van decoratoren in TypeScript.<\/p>\n Dit is een andere grote release die je een nieuw hulpmiddel geeft met generics om de inferentie te verbeteren die je krijgt als je functies callt. Standaard, wanneer je waarden declareert met Tot nu toe moest je, om de gewenste inferentie te krijgen, de const assertie gebruiken door “as const” toe te voegen:<\/p>\n Als je functies callt, is het vergelijkbaar. In de onderstaande code is het afgeleide type van landen<\/strong> Je kunt een specifieker type wensen waarvan een manier om het tot nu toe op te lossen was om de Dit kan lastig zijn om te onthouden en uit te voeren. TypeScript 5.0 introduceert echter een nieuwe mogelijkheid waarbij je een const modifier kunt toevoegen aan een type parameter declaratie, waardoor automatisch een const-achtige inferentie als standaard wordt toegepast.<\/p>\n Met Je kunt het oorspronkelijke pull request<\/a> bekijken voor meer informatie over hoe de const type parameter werkt in TypeScript.<\/p>\n Enums in TypeScript zijn een krachtige constructie waarmee developers een reeks constanten met naam kunnen defini\u00ebren. In TypeScript 5.0 zijn verbeteringen aangebracht aan enums om ze nog flexibeler en bruikbaarder te maken.<\/p>\n Bijvoorbeeld, als je de volgende enum in een functie laat opnemen:<\/p>\n V\u00f3\u00f3r de invoering van TypeScript 5.0 kon je een verkeerd levelnummer doorgeven, en het zou geen fout gooien. Maar met de invoering van TypeScript 5.0 wordt er onmiddellijk een fout gegooid.<\/p>\n Ook maakt de nieuwe versie van alle enums union enums door voor elk berekende member een uniek type te maken. Deze verbetering maakt het mogelijk om alle enums te vernauwen en hun members als types aan te duiden:<\/p>\n TypeScript 5.0 bevat talrijke belangrijke wijzigingen in de codestructuur, gegevensstructuren en algoritmische uitbreidingen. Hierdoor is de hele TypeScript ervaring verbeterd, van installatie tot uitvoering, waardoor het sneller en effici\u00ebnter wordt.<\/p>\n Het verschil tussen de pakketgrootte van TypeScript 5.0 en 4.9 is bijvoorbeeld behoorlijk indrukwekkend.<\/p>\n TypeScript is onlangs gemigreerd van namespaces naar modules, waardoor het gebruik kan maken van moderne bouwtools die optimalisaties zoals scope hoisting kunnen uitvoeren. Ook het verwijderen van wat verouderde code heeft ongeveer 26,4 MB van de 63,8 MB van TypeScript 4.9 afgehaald.<\/p>\n Hier zijn nog een paar interessante winstpunten in snelheid en omvang tussen TypeScript 5.0 en 4.9:<\/p>\nnpm install -D typescript<\/code><\/pre>\nnpx tsc<\/code>.<\/p>\nWat is er nieuw in TypeScript 5.0?<\/h2>\n
Gemoderniseerde decorators<\/h3>\n
greet<\/code> en 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> calls zou willen gebruiken om de methoden te helpen debuggen.<\/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> die er als volgt uitziet:<\/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> de oorspronkelijke methode (originalMethod<\/code>) en geeft een functie terug die het volgende doet:<\/p>\n\n
debugMethod<\/code> toepassen op je methoden, zoals in onderstaande 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 @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>) wordt een tweede parameter doorgegeven met de naam context<\/code> (het is het contextobject – heeft wat nuttige informatie over hoe de gedecoreerde methode is gedeclareerd en ook de naam van de methode). Je kunt je debugMethod<\/code> bijwerken om de naam van de methode uit het object context<\/code> te halen:<\/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> decorator:<\/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>\nIntroductie van const type parameters<\/h3>\n
const<\/code>, leidt TypeScript het type af en niet de letterlijke waarden:<\/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> assertie toe te voegen:<\/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> type parameters kunnen developers de bedoeling duidelijker in hun code uitdrukken. Als het de bedoeling is dat een variabele constant is en nooit verandert, zorgt het gebruik van een const<\/code> type parameter ervoor dat hij nooit per ongeluk kan worden veranderd.<\/p>\nVerbeteringen aan 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>\nPrestatieverbeteringen van TypeScript 5.0<\/h3>\n
![\"TypeScript](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/pasted-image-0.png\")