Fermer

juin 23, 2020

Nouvelles fonctionnalités de TypeScript 3.9


TypeScript 3.9 a été récemment publié. Découvrez les points forts de la nouvelle version, axée sur les performances, la vitesse et la stabilité.

TypeScript

TypeScript est un langage compilé open-source, fortement typé, orienté objet, développé et maintenu par Microsoft. Il s'agit d'un sur-ensemble du très populaire JavaScript utilisé par des millions de projets (plus de 2 millions sur GitHub) qui a été construit pour apporter des types statiques au JavaScript moderne. Le compilateur TypeScript lit dans le code TypeScript, qui a des choses comme les déclarations de type et les annotations de type et émet un JavaScript propre et lisible avec ces constructions transformées et supprimées. Ce code s'exécute dans n'importe quel environnement d'exécution ECMAScript, comme vos navigateurs préférés et NodeJS.

Version 3.9

Récemment, l'équipe de Microsoft a publié la dernière version de TypeScript et l'accent était mis sur les performances, la vitesse et la stabilité. Cela signifie réduire considérablement les bogues et les plantages d'applications, et cela a également été fait avec l'aide de la communauté TypeScript. Dans cet article, nous examinerons un aperçu de ces nouvelles fonctionnalités et correctifs.

Améliorations de la vitesse

Certaines bibliothèques et packages populaires tels que les composants de style et même le matériel-interface utilisateur se sont révélés avoir une très faible vitesse de compilation. Cette nouvelle version a essayé de résoudre ce problème en optimisant un grand nombre de cas, comme les grandes unions, les intersections, les types mappés et les types conditionnels. Ainsi, pour chacune de ces optimisations, les temps de compilation sont désormais inférieurs de 5 à 10% chacun. Pour material-ui, cette nouvelle version de TypeScript est livrée avec une réduction de 25% du temps de compilation des matériaux-ui-styles, qui est une réduction de 15 secondes, selon les commentaires de l'équipe de Microsoft.

De plus, je pense qu'en raison de l'écosystème Microsoft, l'équipe de Visual Studio Code a également donné à l'équipe TypeScript des commentaires sur des tâches telles que le changement de nom d'un fichier et le temps que cela prend. La nouvelle version TypeScript a modifié certaines choses en interne sur les recherches de fichiers de cache de service de langue pour réduire davantage ce laps de temps. Tout cela se traduit par une expérience globale TypeScript plus rapide.

Améliorations dans Inférence et Promise.all

Les versions précédentes de TypeScript, qui avaient mis à jour les fonctions promise.all et promise.race, sont arrivées avec un peu de régressions, notamment en ce qui concerne le mélange dans valeurs nulles ou non définies.

 interface Lion {
    rugissement (): void
}
interface Seal {
    singKissFromARose (): void
}
async function visitZoo (lionExhibit: Promise sealExhibit: Promise ) {
    laissez [lion, seal] = attendre Promise.all ([lionExhibit, sealExhibit]);
    lion.roar (); // euh oh
// ~~~~
// L'objet n'est peut-être pas défini.
}

Dans le bloc de code ci-dessus, le fait que sealExhibit ait un type de lion indéfini est étrange. Avec cette nouvelle version de TypeScript, le bloc de code ci-dessus ne contient plus d'erreurs. Si vous utilisez une version plus ancienne avec ces problèmes avec des promesses, veuillez mettre à niveau.

 ts-expect-error Commentaires

Si vous vouliez écrire une bibliothèque TypeScript et exporter une fonction appelée doSomething puis dans la définition, vous avez spécifié qu'il fallait deux chaînes comme ceci:

 function doSomething (abc: string, xyz: string) {
    assert (typeof abc === "chaîne");
    assert (typeof xyz === "chaîne");
    // faire quelque chose
}

De cette façon, vous pouvez toujours obtenir les lignes rouges ondulées TypeScript lorsque vous n'utilisez pas la fonction correctement et faites attention aux types. Pour tester ce comportement, construisons un test, un test unitaire.

 expect (() => {
    doSomething (123, 456);
}).lancer();

Malheureusement, si nos tests sont écrits en TypeScript, TypeScript nous donnera une erreur!

 doSomething (123, 456);
// ~~~
// erreur: le type 'numéro' n'est pas attribuable au type 'chaîne'.

C'est pourquoi dans la nouvelle version de TypeScript, vous pouvez préfixer une ligne avec le commentaire d'erreur attendu et TypeScript supprimera l'erreur d'être signalée. Cependant, vous ne pourrez pas abuser du commentaire, car TypeScript signalera un avertissement chaque fois que vous utiliserez le commentaire inutilement.

Comme exemple rapide, le code suivant est correct:

 // @ ts-expect- Erreur
console.log (47 * "octopus");

Alors que ce code:

 // @ ts-expect-error
console.log (1 + 1);

entraîne l'erreur:

 Directive '@ ts-expect-error' non utilisée.

Si vous souhaitez en savoir plus à ce sujet, vous pouvez consulter la [ts-expect-error] (https://github.com/microsoft/TypeScript/pull/36014) pull request

Attendu attendra plus longtemps

 Type attendu?

Les spéculations sont vraies, le nouvel opérateur de type TypeScript appelé Awaited ne sera pas livré avec cette nouvelle version de TypeScript en raison de problèmes de conception, mais sera publié une fois que l'équipe se sentira suffisamment confiante. Vous en auriez eu vent si vous aviez suivi le suivi des problèmes de TypeScript sur GitHub.

Prise en charge du «Style de solution» tsconfig.json Fichiers

Les IDE doivent trouver le fichier tsconfig.json pour savoir quelles configurations ont été définies. pour un projet donné et appliquer les options en conséquence. Donc, que se passe-t-il quand il y a plus d'un fichier tsconfig et que l'un d'eux fait référence aux autres comme ceci ci-dessous:

 // tsconfig.json
{
    "fichiers": [],
    "références": [
        { "path": "./tsconfig.shared.json" },
        { "path": "./tsconfig.frontend.json" },
        { "path": "./tsconfig.backend.json" },
    ]
}

Ce fichier peut être appelé fichier de solution – sa seule fonction est de gérer d'autres fichiers de projet – mais dans certains cas, le serveur ne récupère aucun des fichiers tsconfig répertoriés. C'est exactement ce que nous voudrions que le serveur comprenne, le fait que le fichier actuel puisse appartenir à l'un des fichiers mentionnés à la racine. La nouvelle version TypeScript corrige ce problème en ajoutant la prise en charge des scénarios d'édition pour ce type de configuration.

Correctifs rapides pour les expressions de retour manquantes

Cette fonctionnalité affecte probablement presque tous les développeurs que je connais de temps en temps. Les gens oublient parfois la valeur de retour de leurs instructions dans une fonction, en particulier les accolades qui vont avec les fonctions fléchées.

 // avant
soit f1 = () => 42
// oups - pas pareil!
soit f2 = () => {42}

Avec la nouvelle version de TypeScript, il peut désormais fournir une solution rapide pour ajouter des instructions de retour manquantes, supprimer des accolades ou ajouter des parenthèses aux corps de fonction de flèche qui ressemblent étrangement à des littéraux d'objet.

Importations automatiques CommonJS en JavaScript

Ceci est ma mise à jour préférée. Avant maintenant, pour chaque importation que vous effectuez dans un fichier TypeScript, il suppose toujours que vous aimeriez utiliser le style d'importation ECMAScript et il fournit donc quelque chose comme ceci lors de l'importation automatique:

 import * as fs from "fs" ;

Cependant, contrairement à l'hypothèse ci-dessus, tout le monde ne cible pas les modules de style ECMAScript lors de l'écriture de fichiers JavaScript. Beaucoup d'utilisateurs utilisent encore le style CommonJS require (...) importe comme ceci:

 const fs = require ("fs");

Dans cette version 3.9, TypeScript détecte désormais automatiquement les types d'importations que vous utilisez pour garder le style de votre fichier propre et cohérent. TypeScript hisse désormais les déclarations exportées vers le haut du fichier lors du ciblage de systèmes de modules tels que CommonJS dans ES5 et au-dessus.

  • Les exportations utilisent maintenant des accesseurs pour les liaisons en direct
  • TypeScript 3.9 émettra toujours ces déclarations d'exportation * [1945901212] , en vous assurant qu'elle est toujours conservée.
  • Vous pouvez obtenir la nouvelle version en téléchargeant à partir du lien TypeScript officiel ici .

    Conclusion

    Ceci a été un rapide coup d'œil à travers la plupart des les nouvelles fonctionnalités fournies avec le récent TypeScript 3.9 et le processus de réflexion derrière elles. Nous obtenons une version plus rapide et plus intuitive dans l'ensemble, et les importations automatiques JS courantes sont ma fonctionnalité préférée. Quel est le vôtre?





    Source link