Vai al contenuto principale

@babel/plugin-transform-optional-chaining

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

informazioni

Questo plugin è incluso in @babel/preset-env, in ES2020

Esempio​

Accesso a proprietà profondamente annidate​

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

Chiamata di funzioni profondamente annidate​

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

Costruzione di classi profondamente annidate​

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

Eliminazione di proprietà profondamente annidate​

Aggiunto in: v7.8.0

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

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

Installazione​

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

Utilizzo​

Con un file di configurazione (Consigliato)​

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

Tramite CLI​

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

Tramite Node API​

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

Opzioni​

loose​

boolean, predefinito false.

Quando è true, questa trasformazione simulerà che document.all non esista ed eseguirà controlli di uguaglianza approssimativa con null invece di controlli di uguaglianza stretta sia per null che per undefined.

attenzione

Considera di migrare all'assunzione di primo livello noDocumentAll.

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

Esempio​

Input

JavaScript
foo?.bar;

Output (noDocumentAll === true)

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

Output (noDocumentAll === false)

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

Maggiori informazioni sulla configurazione delle opzioni del plugin sono disponibili qui

Riferimenti​