Dans cet article, vous explorerez les changements introduits dans TypeScript 5.0, en donnant un aper\u00e7u approfondi de ses nouvelles fonctionnalit\u00e9s et capacit\u00e9s.<\/p>\n
D\u00e9marrer avec TypeScript 5.0<\/h2>\n
TypeScript est un compilateur officiel que vous pouvez installer dans votre projet \u00e0 l’aide de npm<\/a>. Si vous souhaitez commencer \u00e0 utiliser TypeScript 5.0 dans votre projet, vous pouvez ex\u00e9cuter la commande suivante dans le r\u00e9pertoire de votre projet :<\/p>\n Cela installera le compilateur dans le r\u00e9pertoire node_modules<\/strong>, que vous pouvez maintenant ex\u00e9cuter avec la commande Vous trouverez \u00e9galement des instructions sur l’utilisation de la nouvelle version de TypeScript dans Visual Studio Code dans cette documentation<\/a>.<\/p>\n\n Dans cet article, nous allons explorer 5 mises \u00e0 jour majeures introduites dans TypeScript. Ces fonctionnalit\u00e9s sont les suivantes :<\/p>\n Les d\u00e9corateurs existent dans TypeScript depuis un certain temps sous un drapeau exp\u00e9rimental, mais la nouvelle version les met \u00e0 jour avec la proposition ECMAScript, qui est maintenant \u00e0 l’\u00e9tape 3<\/a>, ce qui signifie qu’elle est \u00e0 un stade o\u00f9 elle est ajout\u00e9e \u00e0 TypeScript.<\/p>\n Les d\u00e9corateurs sont un moyen de personnaliser le comportement des classes et de leurs membres de mani\u00e8re r\u00e9utilisable. Par exemple, si vous avez une classe qui a deux m\u00e9thodes, Dans des cas d’utilisation r\u00e9els, cette classe devrait avoir des m\u00e9thodes plus compliqu\u00e9es qui g\u00e8rent une logique asynchrone et ont des effets secondaires, e.t.c., o\u00f9 vous voudriez ajouter des appels Il s’agit d’un sch\u00e9ma fr\u00e9quent, et il serait pratique d’avoir une solution \u00e0 appliquer \u00e0 chaque m\u00e9thode.<\/p>\n C’est l\u00e0 que les d\u00e9corateurs entrent en jeu. Nous pouvons d\u00e9finir une fonction nomm\u00e9e Dans le code ci-dessus, En utilisant des d\u00e9corateurs, vous pouvez appliquer la m\u00e9thode Vous obtiendrez le r\u00e9sultat suivant :<\/p>\n Lors de la d\u00e9finition de la fonction d\u00e9coratrice ( Lorsque vous ex\u00e9cutez votre code, la sortie contiendra d\u00e9sormais le nom de chaque m\u00e9thode d\u00e9cor\u00e9e avec le d\u00e9corateur Il y a plus \u00e0 faire avec les d\u00e9corateurs. N’h\u00e9sitez pas \u00e0 consulter la pull request originale<\/a> pour plus d’informations sur l’utilisation des d\u00e9corateurs en TypeScript.<\/p>\n Il s’agit d’une autre version importante qui vous donne un nouvel outil avec les g\u00e9n\u00e9riques afin d’am\u00e9liorer l’inf\u00e9rence que vous obtenez lorsque vous appelez des fonctions. Par d\u00e9faut, lorsque vous d\u00e9clarez des valeurs avec Jusqu’\u00e0 pr\u00e9sent, pour obtenir l’inf\u00e9rence souhait\u00e9e, vous deviez utiliser l’assertion const en ajoutant \u00ab as const \u00bb :<\/p>\n Lorsque vous appelez des fonctions, c’est la m\u00eame chose. Dans le code ci-dessous, le type de countries<\/strong> d\u00e9duit est Il se peut que vous souhaitiez un type plus sp\u00e9cifique, ce que l’on peut faire jusqu’\u00e0 pr\u00e9sent en ajoutant l’assertion Cela peut \u00eatre difficile \u00e0 retenir et \u00e0 mettre en \u0153uvre. Cependant, TypeScript 5.0 introduit une nouvelle fonctionnalit\u00e9 qui vous permet d’ajouter un modificateur const \u00e0 une d\u00e9claration de param\u00e8tre de type, ce qui appliquera automatiquement une inf\u00e9rence de type const par d\u00e9faut.<\/p>\n L’utilisation des param\u00e8tres de type Vous pouvez consulter la pull request originale<\/a> pour plus d’informations sur la fa\u00e7on dont le param\u00e8tre de type const fonctionne dans TypeScript.<\/p>\n Les Enums dans TypeScript sont une construction puissante qui permet aux d\u00e9veloppeurs de d\u00e9finir un ensemble de constantes nomm\u00e9es. Dans TypeScript 5.0, des am\u00e9liorations ont \u00e9t\u00e9 apport\u00e9es aux enums pour les rendre encore plus flexibles et utiles.<\/p>\n Par exemple, si vous avez l’enum suivant pass\u00e9 dans une fonction :<\/p>\n Avant l’introduction de TypeScript 5.0, vous pouviez passer un mauvais num\u00e9ro de niveau, et il n’y avait pas d’erreur. Mais avec l’introduction de TypeScript 5.0, il y aura imm\u00e9diatement une erreur.<\/p>\n De plus, la nouvelle version transforme tous les enums en unions en cr\u00e9ant un type unique pour chaque membre calcul\u00e9. Cette am\u00e9lioration permet de restreindre tous les enums et de r\u00e9f\u00e9rencer leurs membres en tant que types :<\/p>\n TypeScript 5.0 comprend de nombreux changements significatifs dans la structure du code, les structures de donn\u00e9es et les extensions algorithmiques. Cela a permis d’am\u00e9liorer l’ensemble de l’exp\u00e9rience TypeScript, de l’installation \u00e0 l’ex\u00e9cution, en la rendant plus rapide et plus efficace.<\/p>\n Par exemple, la diff\u00e9rence entre la taille des paquets TypeScript 5.0 et 4.9 est assez impressionnante.<\/p>\n TypeScript a r\u00e9cemment migr\u00e9 des espaces de noms vers les modules, ce qui lui permet de tirer parti d’outils de construction modernes capables d’effectuer des optimisations telles que le \u00ab scope hoisting \u00bb. De plus, la suppression de certains codes obsol\u00e8tes a permis de r\u00e9duire de 26,4 Mo la taille du package de TypeScript 4.9, qui \u00e9tait de 63,8 Mo.<\/p>\n Voici quelques autres gains int\u00e9ressants en termes de vitesse et de taille entre TypeScript 5.0 et 4.9 :<\/p>\nnpm install -D typescript<\/code><\/pre>\nnpx tsc<\/code>.<\/p>\nQuelles sont les nouveaut\u00e9s de TypeScript 5.0 ?<\/h2>\n
D\u00e9corateurs modernis\u00e9s<\/h3>\n
greet<\/code> et 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> pour aider \u00e0 d\u00e9boguer les m\u00e9thodes.<\/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> qui se pr\u00e9sente comme suit :<\/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> prend la m\u00e9thode originale (originalMethod<\/code>) et renvoie une fonction qui fait ce qui suit :<\/p>\n\n
debugMethod<\/code> \u00e0 vos m\u00e9thodes, comme le montre le code ci-dessous :<\/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>), un second param\u00e8tre est pass\u00e9, appel\u00e9 context<\/code> (il s’agit de l’objet contextuel, qui contient des informations utiles sur la mani\u00e8re dont la m\u00e9thode d\u00e9cor\u00e9e a \u00e9t\u00e9 d\u00e9clar\u00e9e, ainsi que le nom de la m\u00e9thode). Vous pouvez mettre \u00e0 jour votre debugMethod<\/code> pour obtenir le nom de la m\u00e9thode \u00e0 partir de l’objet context<\/code>:<\/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>\nIntroduction des param\u00e8tres de type const<\/h3>\n
const<\/code>, TypeScript d\u00e9duit le type et non ses valeurs litt\u00e9rales :<\/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>:<\/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> permet aux d\u00e9veloppeurs d’exprimer plus clairement leur intention dans leur code. Si une variable est destin\u00e9e \u00e0 \u00eatre constante et \u00e0 ne jamais changer, l’utilisation d’un param\u00e8tre de type const<\/code> garantit qu’elle ne pourra jamais \u00eatre modifi\u00e9e accidentellement.<\/p>\nAm\u00e9liorations des 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>\nAm\u00e9liorations des performances de TypeScript 5.0<\/h3>\n
![\"Taille](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/pasted-image-0.png\")