Version 7.12.0 : TypeScript 4.1, noms d'import/export sous forme de chaînes et blocs statiques de classes
Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →
Nous venons de publier une nouvelle version mineure de Babel !
Cette version ajoute la prise en charge des nouvelles fonctionnalités bêta de TypeScript 4.1 : les types littéraux de gabarit et le remappage des clés dans les types mappés.
De plus, nous avons implémenté deux nouvelles propositions ECMAScript : les blocs statiques de classes et les imports/exports avec noms sous forme de chaînes.
Enfin, nous avons renommé @babel/plugin-syntax-module-attributes (et le plugin d'analyse syntaxique correspondant moduleAttributes) en @babel/plugin-syntax-import-assertions (et importAssertions), pour refléter les évolutions récentes de la proposition. L'ancien plugin restera fonctionnel jusqu'à Babel 8 mais est désormais déprécié.
Vous pouvez consulter le journal complet des modifications sur GitHub.
Si vous ou votre entreprise souhaitez soutenir Babel et l'évolution de JavaScript sans savoir comment procéder, vous pouvez nous faire un don via notre Open Collective ou mieux encore, collaborer directement avec nous à l'implémentation de nouvelles propositions ECMAScript ! Projet reposant sur le bénévolat, nous comptons sur le soutien communautaire pour financer nos efforts au service de la diversité des utilisateurs JavaScript. Contactez-nous à team@babeljs.io pour en discuter !
Principales fonctionnalités
TypeScript 4.1 (#12129, #12131)
La version bêta de TypeScript 4.1 a été annoncée il y a quelques semaines et introduit de nouvelles fonctionnalités syntaxiques pour les types.
Les types littéraux de gabarit permettent de concaténer des chaînes au niveau des types en utilisant la syntaxe des littéraux de gabarit :
type Events = "Click" | "Focus";
type Handler = {
[K in `on${Events}`]: Function
};
const handler: Handler = {
onClick() {}, // Ok
onFocus() {}, // Ok
onHover() {}, // Error!
};
Combinés au remappage des clés dans les types mappés, ils permettent de représenter des transformations d'objets complexes :
type Getters<T> = {
[K in keyof T as `get${Capitalize<K>}`]: () => T[K]
};
interface Dog { name: string; age: number; }
const lazyDog: Getters<Dog> = /* ... */;
lazyDog.getName(); // string
lazyDog.age; // error!
Vous pouvez en savoir plus sur TypeScript 4.1 dans l'annonce de version ou consulter d'autres exemples illustrant les possibilités offertes. Notez cependant que TypeScript 4.1 reste expérimental !
Blocs statiques de classes (#12079, #12143)
class C {
static #x = 42;
static y;
static {
try {
this.y = doSomethingWith(this.#x);
} catch {
this.y = "unknown";
}
}
}
Cette proposition de stage 2 vous permet d'appliquer des initialisations statiques supplémentaires lors de l'évaluation d'une définition de classe. Elle ne vise pas à remplacer les champs statiques, mais à permettre de nouveaux cas d'usage impossibles auparavant. Dans l'exemple ci-dessus, la propriété statique y est initialisée en utilisant #x. Si doSomethingWith(this.#x) échoue, y recevra une valeur par défaut "unknown".
Vous pouvez en apprendre davantage dans la description de la proposition.
Grâce à Jùnliàng, vous pouvez tester cette proposition en installant le plugin @babel/plugin-proposal-class-static-block et en l'ajoutant à votre configuration Babel. Comme vous utilisez probablement déjà d'autres plugins pour les fonctionnalités de classe, assurez-vous de placer ce plugin avant les autres :
{
"plugins": [
"@babel/plugin-proposal-class-static-block",
"@babel/plugin-proposal-class-properties"
]
}
Babel implémente une version mise à jour de la spécification, intégrant les retours que nous avons formulés sur la spécification actuelle.
Imports et exports avec noms sous forme de chaînes (#12091)
Un consensus a été atteint lors de la dernière réunion du TC39 via une PR autorisant les chaînes comme noms de variables importées et exportées :
// emojis.js
let happy = "wooo!";
export { happy as "😃" };
// main.js
import { "😃" as smile } from "./emojis.js";
console.log(smile); // wooo!
Cela permet d'utiliser tout nom UTF-16 valide à travers les modules, rendant JavaScript pleinement compatible avec d'autres langages comme WebAssembly.
Vous pouvez activer le support du parsing pour cette fonctionnalité en ajoutant @babel/plugin-syntax-module-string-names à votre configuration :
{
"presets:" ["@babel/preset-env"],
"plugins": [
"@babel/syntax-module-string-names"
]
}
Cette fonctionnalité sera activée par défaut dès que la syntaxe sera intégrée à la spécification principale d'ECMAScript.
Notez qu'il est impossible de transpiler des chaînes arbitraires vers des imports/exports de style ES2015 : elles ne seront transpilées que lors du ciblage d'un autre système de modules comme CommonJS.
Parsing des assertions d'import (#12139)
La proposition "attributs de module" a été substantiellement modifiée et renommée en "assertions d'import".
Nous avons implémenté le support du parsing pour cette nouvelle version de la proposition, activable via le plugin @babel/plugin-syntax-import-assertions (ou importAssertions si vous utilisez directement @babel/parser) :
{
"plugins": [
- ["@babel/syntax-module-attributes", { "version": "may-2020" }]
+ "@babel/syntax-import-assertions"
]
}
Les changements syntaxiques majeurs incluent le remplacement du mot-clé with par assert et l'encadrement des assertions par des accolades :
import json from "./foo.json" assert { type: "json" };
import("foo.json", { assert: { type: "json" } });
Vous trouverez plus de détails sur ces modifications dans le README de la proposition.
@babel/plugin-syntax-module-attributes restera fonctionnel jusqu'à la sortie de Babel 8.0.0, mais ne sera plus maintenu. Nous recommandons vivement de migrer vers le nouveau plugin.