no-unnecessary-optional-chain.md

Disallow unnecessary optional chain (no-unnecessary-optional-chain)

Optional chaining is a syntax prone to abuse. Using optional chains for non nullable expressions will generate extra compatibility code after transpiling, but also affects the readability of the code.

This rule is partly fixable.

Fail

[foo]?.bar

new Foo()?.bar

if (foo?.bar) { bar = foo?.bar }

foo.bar ? foo.bar?.() : foo.baz

foo?.[qux] && baz(foo?.[qux])

foo.bar.baz > foo.bar?.qux

foo.bar?.baz > foo.bar.qux

<template>
  <p v-if="foo?.bar">{{ foo?.bar }}</p>
</template>

<template>
  <p v-if="foo?.bar" :aria-label="foo?.bar()"></p>
</template>

<template>
  <p v-if="foo?.bar">
    <span @click="foo?.bar()"></span>
  </p>
</template>

Pass

foo?.bar

if (foo?.bar) { bar = foo.bar }

foo?.bar ? foo.bar() : foo.baz

foo?.[qux] && baz(foo[qux])

foo.bar?.baz > foo.bar?.qux

<template>
  <p v-if="foo?.bar">{{ foo.bar }}</p>
</template>

<template>
  <p v-if="foo?.bar" :aria-label="foo.bar()"></p>
</template>

<template>
  <p v-if="foo?.bar">
    <span @click="foo.bar()"></span>
  </p>
</template>