no-unsafe-optional-chaining

禁止在不允許 undefined 值的上下文中使用可選鏈

✅

在設定檔中使用 @eslint/js 的 recommended 設定會啟用此規則

可選鏈 (?.) 表達式可以使用 undefined 的回傳值短路。因此，將評估過的可選鏈表達式視為函數、物件、數字等，可能會導致 TypeError 或意外的結果。例如

var obj = undefined;

1 in obj?.foo;  // TypeError
with (obj?.foo);  // TypeError
for (bar of obj?.foo);  // TypeError
bar instanceof obj?.foo;  // TypeError
const { bar } = obj?.foo;  // TypeError
1
2
3
4
5
6
7

此外，括號會限制鏈中短路的範圍。例如

var obj = undefined;

(obj?.foo)(); // TypeError
(obj?.foo).bar; // TypeError
1
2
3
4

規則詳細資訊

此規則旨在偵測某些使用可選鏈並不能防止執行階段錯誤的情況。特別是，它會標記在短路為 undefined 後導致拋出 TypeError 的位置中的可選鏈表達式。

此規則的不正確程式碼範例

在遊樂場中開啟

/*eslint no-unsafe-optional-chaining: "error"*/

(obj?.foo)();

(obj?.foo).bar;

(foo?.()).bar;

(foo?.()).bar();

(obj?.foo ?? obj?.bar)();

(foo || obj?.foo)();

(obj?.foo && foo)();

(foo ? obj?.foo : bar)();

(foo, obj?.bar).baz;

(obj?.foo)`template`;

new (obj?.foo)();

[...obj?.foo];

bar(...obj?.foo);

1 in obj?.foo;

bar instanceof obj?.foo;

for (bar of obj?.foo);

const { bar } = obj?.foo;

[{ bar } = obj?.foo] = [];

with (obj?.foo);

class A extends obj?.foo {}

var a = class A extends obj?.foo {};

async function foo () {
    const { bar } = await obj?.foo;
   (await obj?.foo)();
   (await obj?.foo).bar;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

此規則的正確程式碼範例

在遊樂場中開啟

/*eslint no-unsafe-optional-chaining: "error"*/

(obj?.foo)?.();

obj?.foo();

(obj?.foo ?? bar)();

obj?.foo.bar;

obj.foo?.bar;

foo?.()?.bar;

(obj?.foo ?? bar)`template`;

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

var baz = {...obj?.foo};

const { bar } = obj?.foo || baz;

async function foo () {
  const { bar } = await obj?.foo || baz;
   (await obj?.foo)?.();
   (await obj?.foo)?.bar;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

選項

此規則具有物件選項

disallowArithmeticOperators：禁止對可選鏈表達式進行算術運算（預設為 false）。如果此為 true，則此規則會警告對可選鏈表達式進行算術運算，這可能會導致 NaN。

disallowArithmeticOperators

當此選項設定為 true 時，該規則會強制執行以下情況

一元運算子：-, +
算術運算子：+, -, /, *, %, **
賦值運算子：+=, -=, /=, *=, %=, **=

在 { "disallowArithmeticOperators": true } 選項下，此規則的其他不正確程式碼範例

在遊樂場中開啟

/*eslint no-unsafe-optional-chaining: ["error", { "disallowArithmeticOperators": true }]*/

+obj?.foo;
-obj?.foo;

obj?.foo + bar;
obj?.foo - bar;
obj?.foo / bar;
obj?.foo * bar;
obj?.foo % bar;
obj?.foo ** bar;

baz += obj?.foo;
baz -= obj?.foo;
baz /= obj?.foo;
baz *= obj?.foo;
baz %= obj?.foo;
baz **= obj?.foo;

async function foo () {
  +await obj?.foo;
  await obj?.foo + bar;
  baz += await obj?.foo;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

版本

此規則在 ESLint v7.15.0 中引入。

資源

編輯此頁面