I den h\u00e4r artikeln s\u00e5 kommer du att utforska de f\u00f6r\u00e4ndringar som inf\u00f6rdes i TypeScript 5.0 och f\u00e5 en djupg\u00e5ende titt p\u00e5 dess nya funktioner och m\u00f6jligheter.<\/p>\n
Kom ig\u00e5ng med TypeScript 5.0<\/h2>\n
TypeScript \u00e4r en officiell kompilator som du kan installera i ditt projekt med hj\u00e4lp av npm<\/a>. Om du vill b\u00f6rja anv\u00e4nda TypeScript 5.0 i ditt projekt kan du k\u00f6ra f\u00f6ljande kommando i projektkatalogen:<\/p>\n Detta kommer sedan att installera kompilatorn i katalogen node_modules<\/strong>, som du nu kan k\u00f6ra med kommandot Du hittar dessutom instruktioner om hur du anv\u00e4nder den nyare versionen av TypeScript i Visual Studio Code i den h\u00e4r dokumentationen<\/a>.<\/p>\n\n I den h\u00e4r artikeln s\u00e5 ska vi utforska 5 viktiga uppdateringar som har inf\u00f6rts i TypeScript. Dessa funktioner omfattar exempelvis f\u00f6ljande:<\/p>\n Dekorat\u00f6rer har funnits i TypeScript ett tag under en experimentell flagga. Den nya versionen g\u00f6r dem dock uppdaterade med ECMAScript-f\u00f6rslaget, som nu befinner sig i steg 3<\/a>. Som ett resultat s\u00e5 kan det nu l\u00e4ggas till i TypeScript.<\/p>\n Dekorat\u00f6rer \u00e4r ett s\u00e4tt att anpassa beteendet hos klasser och deras medlemmar p\u00e5 ett \u00e5teranv\u00e4ndbart s\u00e4tt. Om du exempelvis har en klass som har tv\u00e5 metoder, I verkliga anv\u00e4ndningsomr\u00e5den s\u00e5 b\u00f6r den h\u00e4r klassen ha mer komplicerade metoder som hanterar en viss asynkron logik och har sidoeffekter. D\u00e4r kan du exempelvis l\u00e4gga in n\u00e5gra Detta \u00e4r ett ofta f\u00f6rekommande m\u00f6nster och det skulle vara praktiskt att ha en l\u00f6sning som kan till\u00e4mpas p\u00e5 varje metod.<\/p>\n Det \u00e4r h\u00e4r som dekorat\u00f6rer kommer in i bilden. Vi kan definiera en funktion med namnet I koden ovan s\u00e5 tar Genom att anv\u00e4nda dekorat\u00f6rer s\u00e5 kan du exempelvis till\u00e4mpa Detta kommer sedan att ge f\u00f6ljande resultat:<\/p>\n N\u00e4r man definierar dekorat\u00f6r-funktionen ( N\u00e4r du k\u00f6r din kod s\u00e5 kommer utdata nu att inneh\u00e5lla namnet p\u00e5 varje metod som \u00e4r dekorerad med dekorat\u00f6ren\u00a0 Det finns mer att g\u00f6ra med dekorat\u00f6rer. Kolla g\u00e4rna in\u00a0ursprunglig pull request<\/a> f\u00f6r mer information om hur man anv\u00e4nder dekorat\u00f6rer i TypeScript.<\/p>\n Detta \u00e4r en annan stor utg\u00e5va som ger dig ett nytt verktyg med generics f\u00f6r att f\u00f6rb\u00e4ttra den inferens som du f\u00e5r n\u00e4r du anropar funktioner. N\u00e4r du deklarerar v\u00e4rden med Hittills s\u00e5 har du varit tvungen att anv\u00e4nda const-f\u00f6rs\u00e4kran genom att l\u00e4gga till ”as const”, f\u00f6r att f\u00e5 den \u00f6nskade slutsatsen:<\/p>\n N\u00e4r du anropar funktioner s\u00e5 \u00e4r det likadant. I koden nedan s\u00e5 \u00e4r den h\u00e4rledda typen\u00a0l\u00e4nder<\/strong> Du kanske vill ha en mer specifik typ? D\u00e5 kan du l\u00e4gga till Detta kan vara sv\u00e5rt att komma ih\u00e5g och genomf\u00f6ra. TypeScript 5.0 introducerar dock en ny funktion d\u00e4r du kan l\u00e4gga till en const-modifier till en typparametardeklaration. Som ett resultat s\u00e5 kommer en const-liknande inferens att implementeras som standard.<\/p>\n Genom att anv\u00e4nda Du kan l\u00e4sa\u00a0ursprunglig pull request<\/a> f\u00f6r mer information om hur const-typparametern fungerar i TypeScript.<\/p>\n Enums i TypeScript \u00e4r en kraftfull konstruktion som exempelvis g\u00f6r det m\u00f6jligt f\u00f6r utvecklare att definiera en upps\u00e4ttning namngivna konstanter. I TypeScript 5.0 s\u00e5 har enums f\u00f6rb\u00e4ttrats f\u00f6r att bli \u00e4nnu mer flexibla och anv\u00e4ndbara.<\/p>\n Detta g\u00e4ller om du exempelvis har f\u00f6ljande enum som skickas in i en funktion:<\/p>\n Innan TypeScript 5.0 inf\u00f6rdes s\u00e5 kunde du l\u00e4mna \u00f6ver fel niv\u00e5nummer utan att n\u00e5got fel uppstod. Efter inf\u00f6randet av TypeScript 5.0 s\u00e5 kommer det d\u00e4remot omedelbart att uppst\u00e5 ett fel.<\/p>\n Dessutom s\u00e5 g\u00f6r den nya versionen alla enums till union enums genom att skapa en unik typ f\u00f6r varje ber\u00e4knad medlem. Som ett resultat av denna f\u00f6rb\u00e4ttring s\u00e5 blir det m\u00f6jligt att begr\u00e4nsa alla enums och referera deras medlemmar som typer:<\/p>\n TypeScript 5.0 inkluderar m\u00e5nga betydande f\u00f6r\u00e4ndringar i kodstruktur, datastrukturer och algoritmiska utvidgningar. Som ett resultat s\u00e5 f\u00f6rb\u00e4ttras hela TypeScript-upplevelsen, fr\u00e5n installation till exekvering, vilket g\u00f6r den snabbare och effektivare.<\/p>\n Skillnaden mellan paketstorleken f\u00f6r TypeScript 5.0 och 4.9 \u00e4r exempelvis ganska imponerande.<\/p>\n TypeScript migrerades nyligen fr\u00e5n namnomr\u00e5den till moduler. Det blir d\u00e4rf\u00f6r m\u00f6jligt att utnyttja moderna byggverktyg som kan utf\u00f6ra optimeringar som exempelvis scope hoisting. Genom att ta bort en del f\u00f6r\u00e5ldrad kod s\u00e5 har man dessutom sparat cirka 26,4 MB fr\u00e5n TypeScript 4.9\u2019s paketstorlek p\u00e5 63,8 MB.<\/p>\n H\u00e4r \u00e4r n\u00e5gra fler intressanta vinster i hastighet och storlek mellan TypeScript 5.0 och 4.9:<\/p>\nnpm install -D typescript<\/code><\/pre>\nnpx tsc<\/code>.<\/p>\nVad \u00e4r nytt i TypeScript 5.0?<\/h2>\n
Moderniserade dekorat\u00f6rer<\/h3>\n
greet<\/code> och 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>-anrop f\u00f6r att hj\u00e4lpa till att fels\u00f6ka metoderna.<\/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> som ser ut p\u00e5 f\u00f6ljande s\u00e4tt:<\/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 ursprungliga metoden (originalMethod<\/code>) och returnerar sedan en funktion som g\u00f6r f\u00f6ljande:<\/p>\n\n
debugMethod<\/code> p\u00e5 dina metoder enligt koden nedan:<\/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>) s\u00e5 skickas en andra parameter som heter context<\/code> (det \u00e4r kontext-objektet – och inneh\u00e5ller en del anv\u00e4ndbar information om hur den dekorerade metoden deklarerades och \u00e4ven metodens namn). Du kan uppdatera din debugMethod<\/code> f\u00f6r att f\u00e5 metodnamnet fr\u00e5n 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>:<\/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 av const Type Parameters<\/h3>\n
const<\/code>, s\u00e5 drar TypeScript standardm\u00e4ssigt slutsatsen om typen och inte om dess bokstavliga v\u00e4rden:<\/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>-f\u00f6rs\u00e4kran:<\/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>-typparametrar s\u00e5 kan utvecklare uttrycka sin avsikt tydligare i sin kod. Om en variabel \u00e4r avsedd att vara konstant och aldrig \u00e4ndras, s\u00e4kerst\u00e4ller anv\u00e4ndningen av en const<\/code>-typparameter exempelvis att den aldrig kan \u00e4ndras av misstag.<\/p>\nF\u00f6rb\u00e4ttringar av 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>\nPrestandaf\u00f6rb\u00e4ttringar i TypeScript 5.0<\/h3>\n
![\"TypeScript-paketets](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/pasted-image-0.png\")