Quoi de neuf dans TypeScript 4.6 ? – Informatique CloudSavvy
TypeScript 4.6 est la première version de fonctionnalité de cette année pour le sur-ensemble JavaScript typé statiquement. Il ajoute plusieurs améliorations concernant les constructeurs, la compilation et l’analyse de code. Il y a aussi quelques changements de rupture à prendre en compte avant de procéder à la mise à niveau.
Sommaire
Améliorations de l’analyse de flux de contrôle
Cette version apporte plusieurs améliorations pour les capacités d’analyse de flux de contrôle de TypeScript. Ils équipent mieux TypeScript pour comprendre plus précisément le fonctionnement de votre code, ce qui conduit à des définitions de type plus étroites et à moins d’erreurs inattendues.
Le premier changement concerne les unions de propriété discriminantes qui ont été déstructurées des objets. Cela s’applique aux cas où vous travaillez avec des types d’union composés de plusieurs objets. Les objets individuels de l’union peuvent avoir des différences dans leurs définitions de type, mais partagent toujours certaines clés.
Il est courant d’utiliser ces clés partagées pour inspecter conditionnellement les autres parties de la structure de données. TypeScript utilisait des erreurs lors de l’utilisation de ce flux de travail avec une affectation de déstructuration. La syntaxe de déstructuration a créé des variables entièrement nouvelles, dépourvues de l’association qui les liait en tant que propriétés d’objet. Le compilateur se souvient maintenant que les valeurs proviennent du même objet, ce qui permet d’écrire un code plus simple.
L’annonce de la version utilise un exemple similaire à celui-ci :
type Action =
| {kind: "Number", data: number}
| {kind: "String", data: string};
function handle(action: Action) {
const {kind, data} = action;
if (kind === "Number") {
const square = (data * data);
}
else if (kind === "String") {
const lines = data.split("n");
}
}
TypeScript 4.5 n’autoriserait pas ce code. L’affectation de déstructuration (const {kind, data}) a créé deux variables indépendantes ; le compilateur ne pouvait pas comprendre que kind être Number moyens data Doit être un number taper. Maintenant, il reconnaîtra ce fait, vous permettant d’utiliser la syntaxe de déstructuration avec des unions discriminées.
L’analyse des flux de contrôle a également été renforcée autour des paramètres dépendants. Cette syntaxe permet de spécifier des règles complexes pour la nature des paramètres variadiques. Voici une définition de type pour une fonction utilisant ce comportement :
type Func = (...args: ["Number", number], ["String", string]) => void;
La signature de cette fonction spécifie que vous pouvez soit passer String ou Number comme premier paramètre. Si tu utilises Numberle paramètre suivant doit être une valeur de type number. Alternativement, un string peut être donné s’il suit String.
Comme dans l’exemple d’unions discriminées ci-dessus, TypeScript restreint désormais le type de paramètres dépendants en fonction des valeurs qui les précèdent :
const demo: Func = (kind, data) => {
if (kind === "Number") {
const square = (data * data);
}
else if (kind === "String") {
const lines = data.split("n");
}
};
Le compilateur apprécie maintenant que data Doit être un number si kind est Number. Ce code aurait généré une erreur avec TypeScript 4.5.
Améliorations du constructeur
Les constructeurs de classes JavaScript qui étendent un parent doivent appeler super() avant le this mot-clé peut être utilisé :
// Not allowed - "this" used before "super" class B extends A { constructor() { this.demo = "foobar"; super(); } } // Working correct order class C extends A { constructor() { super(); this.demo = "foobar"; } }
TypeScript a toujours été trop strict dans son application de cette exigence. Les classes contenant des initialiseurs de propriété seraient rejetées si elles avaient du code avant le super() déclaration, même si elle n’a jamais fait référence this:
const example = () => null; class C extends A { demoProperty = true; // Unnecessarily treated as invalid constructor() { example(); super(); } }
Cette gestion a permis d’optimiser les vérifications de TypeScript pour les instances authentiques de this utilisé avant super(). Cela a également entraîné l’échec de la compilation d’un grand nombre de codes acceptables, obligeant les auteurs à refactoriser le travail qui était en fait du JavaScript valide.
TypeScript 4.6 résout ce problème. Le compilateur s’aligne désormais sur le JavaScript vanille en autorisant le code avant super() s’il n’en résulte pas this utilisé. Cela vous donne plus de liberté pour écrire des constructeurs de classe de la manière qui convient le mieux à chaque situation. TypeScript détectera toujours tous les cas réels de this être référencé trop tôt.
Plus d’améliorations de l’inférence
Les inférences d’accès indexées sont maintenant plus précises. Cela donne au compilateur une visibilité sur les types d’accès indexés qui indexent les objets mappés. Bien que cela soit déjà possible auparavant, les anciennes versions de TypeScript produisaient une inférence de mauvaise qualité qui n’avait pas toujours une pleine connaissance des types d’objets mappés.
Les contrôles de profondeur de récursivité de TypeScript ont également été ajustés pour permettre une meilleure détection des types récursifs incompatibles. La modification peut améliorer les performances de la vérification de type car elle facilite le sauvetage plus tôt lorsque la récursivité d’un type commence à se développer à l’infini. Les améliorations se concentrent sur la façon dont la récursivité est appliquée aux types qui utilisent des génériques.
Ciblage ES2022
le --target drapeau a gagné le soutien de es2022 comme valeur. Il permet une utilisation complète des fonctionnalités ES2022, garantissant une syntaxe telle que les champs de classe et le Error.cause propriété sont conservées sans transpilation dans vos builds stables.
Vous pouvez cibler ES2022 en passant le --target es2022 signaler à tsc. Alternativement, changez compilerOptions.target pour es2022 dans votre projet tsconfig.json fichier:
{
"compilerOptions": {
"target": "es2022"
}
}
Plus d’erreurs de syntaxe JavaScript et de liaison
TypeScript affiche désormais une syntaxe JavaScript plus standard et des erreurs de liaison. Ces erreurs apparaîtront lors de la compilation et lorsque vous ouvrirez des fichiers dans votre éditeur avec l’extension TypeScript pour Visual Studio, Visual Studio Code ou Sublime Text installée.
Répété const les déclarations, l’utilisation incorrecte de mots-clés et les erreurs de portée seront désormais signalées par TypeScript, vous donnant un retour immédiat pendant que vous travaillez. La fonctionnalité peut être désactivée en ajoutant un // @ts-nocheck commentaire en haut de vos fichiers source.
Cet ajout constitue une rupture car les fichiers sources doivent désormais contenir du JavaScript grammaticalement correct. Le compilateur de TypeScript ignorait auparavant la plupart des types d’erreurs de syntaxe JavaScript. Vous devez utiliser le commentaire pour désactiver la fonctionnalité si vous pensez que votre base de code sera incompatible avec cette application.
Un autre changement radical
Il y a un deuxième changement avec rupture dans cette mise à jour : les expressions de repos d’objet suppriment désormais les membres non diffusables des objets génériques. Cela améliore la cohérence avec la déstructuration des types non génériques, mais signifie que vos variables existantes peuvent manquer de certaines propriétés qu’elles possédaient dans TypeScript 4.5.
Les propriétés avec des valeurs non diffusables telles que les scalaires et les fonctions seront omises des expressions de repos. Ceci s’applique également à d’autres cas non diffusables tels que les membres non publics d’instances de classe et this. Un code tel que le suivant fonctionnait, mais génère désormais une erreur :
class Demo { prop = "example"; sayHello() { console.log("Hello World"); } methodWithRest() { const {prop, ...rest} = this; // ERROR - Non-spreadable value (function) will be dropped rest.sayHello(); } }
Sommaire
TypeScript 4.6 améliore l’inférence de type, améliore la gestion du constructeur de classe enfant et ajoute ES2022 en tant que cible de sortie prise en charge. Il existe également quelques modifications avec rupture étroites sous la forme d’une détection d’erreur de syntaxe JavaScript étendue et de membres d’expression de repos d’objet non diffusables supprimés. Vous pouvez mettre à niveau vers la nouvelle version en exécutant npm update typescript ou npm install typescript@latest dans le répertoire de travail de votre projet.
La mise à jour marque également le début d’un nouvel outil avancé pour analyser les traces de génération de type existantes de TypeScript. L’analyseur de traces fonctionne avec la sortie de tsc --generateTrace pour vous aider à déterminer à quel point les expressions de type complexes ralentissent le compilateur.
