Rule Proposal: no-unsafe-optional-chaining

[mysticatea]

Please describe what the rule should do:

Disallow the unsafe uses of optional chaining.

What new ECMAScript feature does this rule relate to?

Optional chaining

What category of rule is this? (place an "X" next to just one item)

[x] Warns about a potential error (problem)

Provide 2-3 code examples that this rule will warn about:

//✖ BAD (TypeError)
(obj?.foo).bar
(obj?.foo)()
(obj?.foo)`template`
new (obj?.foo)()
class A extends obj?.foo {}

//✔ GOOD
obj?.foo.bar
obj?.foo()
(obj?.foo ?? val).bar
(obj?.foo ?? val)()
(obj?.foo ?? val)`template`
new (obj?.foo ?? val)()
class A extends obj?.foo ?? B {}

// Unrelated (no-extra-parens rule will remove those parentheses)
(obj?.foo)?.bar
(obj?.foo)?.()
(obj.foo)?.bar
(obj.foo)?.()

[EDIT] With disallowArithmeticOperators: true (defaults to false), additionally disallows operators +, -, *, /, and ** because will generate NaN (or unexpected text). It still allows the operators of comparison, bitwise, logical, and relational.

//✖ BAD
obj?.foo + bar
obj?.foo - bar
obj?.foo * bar
obj?.foo / bar
obj?.foo % bar
obj?.foo ** bar
+obj?.foo
-obj?.foo
var v += obj?.foo
var v -= obj?.foo
var v *= obj?.foo
var v /= obj?.foo
var v %= obj?.foo
var v **= obj?.foo

//✔ GOOD
(obj?.foo ?? val) + bar
var v += obj?.foo ?? val

Why should this rule be included in ESLint (instead of a plugin)?

The parentheses around optional chaining disconnect chaining and change the behavior. This is different behavior from well-known non-optional member accesses. This rule warns potential TypeError risks around the difference. This is about a language feature.

Are you willing to submit a pull request to implement this rule?

Yes.

[mdjermanovic]

(obj?.foo).bar
(obj?.foo)()
(obj?.foo)`template`
new (obj?.foo)()
class A extends obj?.foo {}

👍 these all look like very possible errors.

obj?.foo + 1     // → NaN

I'm not sure about this, it could be part of a valid code that is going to check for NaN after evaluating some complex expression.

[mysticatea]

@mdjermanovic How about behind an option like disallowBinaryExpression? I'd like to catch that because I guess it will be likely general mistakes.

[mdjermanovic]

@mdjermanovic How about behind an option like disallowBinaryExpression? I'd like to catch that because I guess it will be likely general mistakes.

Makes sense to me 👍

[mdjermanovic]

Should we also report chain expression used as a destructuring source:

var { a } = b?.c; // no-unsafe-optional-chaining error?

if not, prefer-destructuring autofix could hide some bugs that would be otherwise reported:

/* eslint prefer-destructuring: error */

var a = (b?.c).a; // autofix -> var {a} = b?.c;

[mdjermanovic]

Maybe also array spread and spread in function calls:

[...obj?.foo];

bar(...obj?.foo);

new Bar(...obj?.foo);

[yeonjuan]

Hi :) @mysticatea Could I work on it?