Skip to main content

no-shadow

Disallow variable declarations from shadowing variables declared in the outer scope.


此规则扩展了基本 eslint/no-shadow 规则。 它添加了对 TypeScript 的 this 参数和全局增强的支持，并添加了 TypeScript 功能的选项。

英：This rule extends the base eslint/no-shadow rule. It adds support for TypeScript's this parameters and global augmentation, and adds options for TypeScript features.

选项​

该规则添加了以下选项：

英：This rule adds the following options:

interface Options extends BaseNoShadowOptions {
  ignoreTypeValueShadow?: boolean;
  ignoreFunctionTypeParameterNameValueShadow?: boolean;
}

const defaultOptions: Options = {
  ...baseNoShadowDefaultOptions,
  ignoreTypeValueShadow: true,
  ignoreFunctionTypeParameterNameValueShadow: true,
};

ignoreTypeValueShadow​

当设置为 true 时，当你将类型命名为与变量相同时，规则将忽略大小写。 这通常是安全的，因为如果没有 typeof 运算符，则无法在类型位置中使用变量，因此几乎没有混淆的风险。

英：When set to true, the rule will ignore the case when you name a type the same as a variable. This is generally safe because you cannot use variables in type locations without a typeof operator, so there's little risk of confusion.

correct 代码与 { ignoreTypeValueShadow: true } 的示例：

英：Examples of correct code with { ignoreTypeValueShadow: true }:

type Foo = number;
interface Bar {
  prop: number;
}

function f() {
  const Foo = 1;
  const Bar = 'test';
}
Open in Playground
注意

遮蔽特指位于不同嵌套作用域中的两个相同标识符。 这与重新声明不同，重新声明是两个相同的标识符位于同一范围内。 no-redeclare 规则涵盖了重新声明。

英：Shadowing specifically refers to two identical identifiers that are in different, nested scopes. This is different from redeclaration, which is when two identical identifiers are in the same scope. Redeclaration is covered by the no-redeclare rule instead.

ignoreFunctionTypeParameterNameValueShadow​

当设置为 true 时，当你在函数类型中命名与变量相同的参数时，规则将忽略大小写。

英：When set to true, the rule will ignore the case when you name a parameter in a function type the same as a variable.

每个函数类型的参数都会在该函数类型的范围内创建一个值变量。 这样做是为了稍后你可以使用 typeof 运算符引用该类型：

英：Each of a function type's arguments creates a value variable within the scope of the function type. This is done so that you can reference the type later using the typeof operator:

type Func = (test: string) => typeof test;

declare const fn: Func;
const result = fn('str'); // typeof result === string

这意味着函数类型参数影子值变量名称在父作用域中：

英：This means that function type arguments shadow value variable names in parent scopes:

let test = 1;
type TestType = typeof test; // === number
type Func = (test: string) => typeof test; // this "test" references the argument, not the variable

declare const fn: Func;
const result = fn('str'); // typeof result === string

如果你不在函数类型返回类型位置使用 typeof 运算符，则可以安全地打开此选项。

英：If you do not use the typeof operator in a function type return type position, you can safely turn this option on.

correct 代码与 { ignoreFunctionTypeParameterNameValueShadow: true } 的示例：

英：Examples of correct code with { ignoreFunctionTypeParameterNameValueShadow: true }:

const test = 1;
type Func = (test: string) => typeof test;
Open in Playground

常见问题​

为什么规则报告与父作用域中的变量共享相同名称的枚举成员？​

报告此案例不是错误 - 这是完全有意且正确的报告！ 该规则报告是由于枚举的一个相对未知的功能 - 枚举成员在枚举范围内创建一个变量，以便可以在枚举中引用它们而无需限定符。

英：Reporting on this case isn't a bug - it is completely intentional and correct reporting! The rule reports due to a relatively unknown feature of enums - enum members create a variable within the enum scope so that they can be referenced within the enum without a qualifier.

用一个例子来说明这一点：

英：To illustrate this with an example:

const A = 2;
enum Test {
  A = 1,
  B = A,
}

console.log(Test.B);
// what should be logged?

天真的看上面的代码，看起来日志应该输出 2，因为外部变量 A 的值为 2 - 然而，代码却输出 1，即 Test.A 的值。 这是因为非限定代码 B = A 相当于完全限定代码 B = Test.A。 由于此行为，枚举成员具有 shadowed 外部变量声明。

英：Naively looking at the above code, it might look like the log should output 2, because the outer variable A's value is 2 - however, the code instead outputs 1, which is the value of Test.A. This is because the unqualified code B = A is equivalent to the fully-qualified code B = Test.A. Due to this behavior, the enum member has shadowed the outer variable declaration.

如何使用​

.eslintrc.cjs
module.exports = {
  "rules": {
    // Note: you must disable the base rule as it can report incorrect errors
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": "error"
  }
};
在线运行试试这个规则 ↗

选项​

参见 eslint/no-shadow 选项。

资源​

摘自 ❤️ ESLint 内核