Aller au contenu principal

@babel/plugin-transform-optional-chaining

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 →

info

Ce plugin est inclus dans @babel/preset-env, dans la spécification ES2020

Exemple​

Accès à des propriétés profondément imbriquées​

JavaScript
const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42

const safe = obj?.qux?.baz; // undefined

// Optional chaining and normal chaining can be intermixed
obj?.foo.bar?.baz; // Only access `foo` if `obj` exists, and `baz` if
// `bar` exists

// Example usage with bracket notation:
obj?.["foo"]?.bar?.baz; // 42

Appel de fonctions profondément imbriquées​

JavaScript
const obj = {
  foo: {
    bar: {
      baz() {
        return 42;
      },
    },
  },
};

const baz = obj?.foo?.bar?.baz(); // 42

const safe = obj?.qux?.baz(); // undefined
const safe2 = obj?.foo.bar.qux?.(); // undefined

const willThrow = obj?.foo.bar.qux(); // Error: not a function

// Top function can be called directly, too.
function test() {
  return 42;
}
test?.(); // 42

exists?.(); // undefined

Instanciation de classes profondément imbriquées​

JavaScript
const obj = {
  foo: {
    bar: {
      baz: class {
      },
    },
  },
};

const baz = new obj?.foo?.bar?.baz(); // baz instance

const safe = new obj?.qux?.baz(); // undefined
const safe2 = new obj?.foo.bar.qux?.(); // undefined

const willThrow = new obj?.foo.bar.qux(); // Error: not a constructor

// Top classes can be called directly, too.
class Test {
}
new Test?.(); // test instance

new exists?.(); // undefined

Suppression de propriétés profondément imbriquées​

Ajouté dans : v7.8.0

JavaScript
const obj = {
  foo: {
    bar: {},
  },
};

const ret = delete obj?.foo?.bar?.baz; // true

Installation​

npm install --save-dev @babel/plugin-transform-optional-chaining

Utilisation​

Avec un fichier de configuration (Recommandé)​

babel.config.json
{
  "plugins": ["@babel/plugin-transform-optional-chaining"]
}

Via CLI​

Shell
babel --plugins @babel/plugin-transform-optional-chaining script.js

Via l'API Node​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-optional-chaining"],
});

Options​

loose​

boolean, valeur par défaut : false.

Lorsque défini à true, cette transformation simule l'absence de document.all et effectue des vérifications d'égalité large avec null plutôt que des vérifications d'égalité stricte contre null et undefined.

attention

Envisagez de migrer vers l'assumption de haut niveau noDocumentAll.

babel.config.json
{
  "assumptions": {
    "noDocumentAll": true
  }
}

Exemple​

Entrée

JavaScript
foo?.bar;

Sortie (noDocumentAll === true)

JavaScript
foo == null ? void 0 : foo.bar;

Sortie (noDocumentAll === false)

JavaScript
foo === null || foo === void 0 ? void 0 : foo.bar;
astuce

Vous pouvez en savoir plus sur la configuration des options de plugin ici

Références​