Aller au contenu principal

@babel/preset-typescript

Traduction Bêta Non Officielle

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 →

Ce preset est recommandé si vous utilisez TypeScript, un sur-ensemble typé de JavaScript. Il inclut les plugins suivants :

Vous devrez spécifier --extensions ".ts" pour que @babel/cli et @babel/node puissent traiter les fichiers .ts.

Exemple​

Entrée

const x: number = 0;

Sortie

JavaScript
const x = 0;

Installation​

npm install --save-dev @babel/preset-typescript

Utilisation​

Avec un fichier de configuration (Recommandé)​

babel.config.json
{
  "presets": ["@babel/preset-typescript"]
}

Via CLI​

Shell
babel --presets @babel/preset-typescript script.ts

Via l'API Node​

JavaScript
require("@babel/core").transformSync("code", {
  presets: ["@babel/preset-typescript"],
  filename: 'script.ts',
});

Options​

isTSX​

boolean, valeur par défaut : false

Active forcément l'analyse jsx. Sinon, les chevrons seront traités comme l'assertion de type historique de TypeScript var foo = <string>bar;. De plus, isTSX: true nécessite allExtensions: true.

jsxPragma​

string, valeur par défaut : React

Remplace la fonction utilisée lors de la compilation des expressions JSX. Cela permet d'identifier que l'import n'est pas un import de type et ne doit pas être supprimé.

jsxPragmaFrag​

string, valeur par défaut : React.Fragment

Remplace la fonction utilisée lors de la compilation des expressions de fragments JSX. Cela permet d'identifier que l'import n'est pas un import de type et ne doit pas être supprimé.

allExtensions​

boolean, valeur par défaut : false

Indique que chaque fichier doit être analysé comme TS, TSX, ou comme TS sans ambiguïtés JSX (selon les options isTSX et disallowAmbiguousJSXLike).

allowNamespaces​

boolean, utilise la valeur par défaut définie par @babel/plugin-transform-typescript.

Ajouté dans : v7.6.0

Active la compilation des namespaces TypeScript.

allowDeclareFields​

boolean, valeur par défaut : false

Ajouté dans : v7.7.0

NOTE : Ce sera activé par défaut dans Babel 8

Lorsqu'activé, les champs de classe purement typés ne sont supprimés que s'ils sont préfixés par le modificateur declare :

class A {
  declare foo: string; // Removed
  bar: string; // Initialized to undefined
  prop?: string; // Initialized to undefined
  prop1!: string // Initialized to undefined
}

disallowAmbiguousJSXLike​

boolean, valeur par défaut : true pour les fichiers .mts et .cts, sinon false.

Ajouté dans la version : v7.16.0

Même lorsque l'analyse JSX n'est pas activée, cette option interdit d'utiliser une syntaxe ambiguë avec JSX (assertions de type <X> y et arguments de type <X>() => {}). Elle correspond au comportement de tsc lors de l'analyse des fichiers .mts et .mjs.

ignoreExtensions​

boolean, valeur par défaut : false

Ajouté dans : v7.21.4

Lorsque défini à false, Babel fournira automatiquement les plugins requis pour les fichiers *.ts, *.tsx, *.mts et *.cts.

Lorsque défini à true, Babel fournira un plugin TS générique. Si vous souhaitez transpiler le code source comme s'il s'agissait de *.tsx, activez le preset @babel/preset-react et ce plugin fonctionnera de manière transparente avec la transformation JSX. Par exemple :

babel.config.json
{
  "presets": ["@babel/preset-react"],
  "overrides": [{
    "test": "*.vue",
    "presets": [
      ["@babel/preset-typescript"], { "ignoreExtensions": true }
    ]
  }]
}

onlyRemoveTypeImports​

boolean, valeur par défaut : false

Ajouté dans : v7.9.0

Lorsque défini sur true, la transformation ne supprimera que les imports de type uniquement (introduits dans TypeScript 3.8). Ne doit être utilisé que si vous utilisez TypeScript >= 3.8.

optimizeConstEnums​

boolean, valeur par défaut : false

Ajouté dans : v7.15.0

Lorsque défini sur true, Babel inline les valeurs d'énumération plutôt que d'utiliser le résultat enum habituel :

// Input
const enum Animals {
  Fish
}
console.log(Animals.Fish);

// Default output
var Animals;

(function (Animals) {
  Animals[Animals["Fish"] = 0] = "Fish";
})(Animals || (Animals = {}));

console.log(Animals.Fish);

// `optimizeConstEnums` output
console.log(0);

Cette option diffère du comportement --isolatedModules de TypeScript, qui ignore le modificateur const et les compile comme des enums normaux, et aligne le comportement de Babel sur celui par défaut de TypeScript.

Cependant, lors de l'exportation d'un const enum, Babel le compilera en un simple objet littéral pour éviter de dépendre d'une analyse multi-fichiers :

// Input
export const enum Animals {
  Fish,
}

// `optimizeConstEnums` output
export var Animals = {
  Fish: 0,
};

Vous pouvez en savoir plus sur la configuration des options des presets ici.

rewriteImportExtensions​

boolean, valeur par défaut : false

Ajouté dans : v7.23.0

Lorsque défini à true, Babel réécrira les extensions .ts/.mts/.cts dans les déclarations d'import en .js/.mjs/.cjs. Cette option reflète l'option rewriteRelativeImportExtensions de TypeScript.

Cette option, utilisée avec l'option allowImportingTsExtension de TypeScript, permet d'écrire des spécificateurs relatifs complets dans les déclarations d'import tout en utilisant la même extension que les fichiers sources.

Par exemple, avec cette structure de projet (où src contient les fichiers sources et dist les fichiers compilés) :

.
├── src
│   ├── main.ts
│   └── dep.ts
├── dist
│   ├── main.js
│   └── dep.js
├── babel.config.json
└── tsconfig.json

et avec les fichiers de configuration suivants :

babel.config.jsontsconfig.json
{
  "presets": [
    ["@babel/preset-typescript", {
      "rewriteImportExtensions": true
    }]
  ]
}
{
  "compilerOptions": {
    "lib": ["esnext"],
    "noEmit": true,
    "isolatedModules": true,
    "moduleResolution": "nodenext",
    "allowImportingTsExtensions": true
  }
}

vous pourrez écrire import x from "./dep.ts" dans main.ts, et Babel le transformera en import x from "./dep.js" lors de la compilation de main.ts en main.js.