理解“无阴影变量”tslint 警告

Question

我有一个函数，它根据传入的特定学科检查顺序流中的当前阶段，并根据该值在我的 Angular 2 应用程序中分配下一个值。 它看起来像这样：

private getNextStageStep(currentDisciplineSelected) {
    const nextStageStep = '';
        if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 1') {
            const nextStageStep = 'step 2';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 2') {
            const nextStageStep = 'step 3';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 3') {
            const nextStageStep = 'step 4';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 4') {
            const nextStageStep = 'step 5';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 5') {
            const nextStageStep = 'step 6';
    }
    return nextStageStep;
}

我在这里做的是返回nextStageStep的值，因为这是我将要传递的值，以便正确的阶段步骤发生。

现在，我的 tslint 正在强调每个nextStageStep变量出现的警告no shadowed variables nextStageStep no shadowed variables 。 如果我删除了我初始化为警告消失的空字符串的行，但随后出现错误， Cannot find nextStageStep在我的返回语句中Cannot find nextStageStep 。

原始阴影变量警告有什么问题，有没有其他方法可以写这个，和/或在这种情况下我应该简单地忽略 tslint 警告？

Answer 1

linter 抱怨是因为您多次重新定义同一个变量。 因此替换包含它的闭包中的那些。

而不是重新声明它只是使用它：

private getNextStageStep(currentDisciplineSelected) {
    let nextStageStep = '';
        if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 1') {
             nextStageStep = 'step 2';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 2') {
             nextStageStep = 'step 3';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 3') {
             nextStageStep = 'step 4';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 4') {
             nextStageStep = 'step 5';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 5') {
             nextStageStep = 'step 6';
    }
    return nextStageStep;
}

Answer 2

这与在不同范围内定义相同的变量有关。 您正在函数范围内以及每个 if 块中定义nextStageStep 。 一种选择是去掉 if 块中的变量声明

if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 1') {
   nextStageStep = 'step 2';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 2') {
   nextStageStep = 'step 3';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 3') {
   nextStageStep = 'step 4';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 4') {
   nextStageStep = 'step 5';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 5') {
   nextStageStep = 'step 6';
}

这是一个关于阴影变量的好资源http://eslint.org/docs/rules/no-shadow

Answer 3

添加到： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

ES6 const 是块范围的，因此：

---

{
    const TAG='<yourIt>';
    console.log(TAG);
 }

 {
  const TAG = '<touchingBase NoImNOt="true">';
  console.log(TAG);
 }

 console.log(TAG);  // ERROR expected

---

AFAICT，这不是阴影的情况 - 每个常量都在其大括号内正确地进行了调整。

如果我们不能重用变量名，我们最终会得到一些晦涩难懂的程序。 而不是通知。

我相信警告是错误的

Answer 4

您正在每个 if 块中重新声明相同的变量const nextStageStep 。

Juste replace const nextStageStep = 'step 2'; 与nextStageStep = 'step 2'; （以及所有其他情况），一切都会好起来的。

Answer 5

通常，当局部作用域中的变量和包含作用域中的变量具有相同名称时，会发生此错误。 阴影使得无法访问包含范围内的变量，并掩盖了标识符实际引用的值

请参阅 本文以获取解释此 内容的代码示例。

Answer 6

首先，即使您继续执行警告，您的函数“ getNextStageStep() ”也将始终返回空值，

• 因为“ const ” a 是块范围的变量，并且

• 不支持重新定义值[初始化的值不能改变]。

return块变量“ nextStageStep ”包含空字符串值，内部块“ nextStageStep ”变量不会屏蔽或覆盖外部块的“ nextStageStep ”变量值。

因此，每当您返回“ nextStageStep ”时，它将始终返回空字符串。

内部块“ nextStageStep ”变量范围仅在if块内，这里外部块“ nextStageStep ”变量与内部块“ nextStageStep ”变量完全不同。

因此，如果您希望您的代码能够正常工作，并且必须使用const变量，那么请在 if 块中使用多个 return 语句。

下面是我检查的代码并且工作正常。 您可以根据您的要求使用它。

function  getNextStageStep(currentDisciplineSelected) {
    const nextStageStep = '';
    if (currentDisciplineSelected === 'step 1') {
        const nextStageStep = 'step 2';
        return nextStageStep;
    } else if (currentDisciplineSelected === 'step 2') {
        const nextStageStep = 'step 3';
        return nextStageStep;
    } else if (currentDisciplineSelected === 'step 3') {
        const nextStageStep = 'step 4';
        return nextStageStep;
    } else if (currentDisciplineSelected === 'step 4') {
        const nextStageStep = 'step 5';
        return nextStageStep;
    } else if (currentDisciplineSelected === 'step 5') {
        const nextStageStep = 'step 6';
        return nextStageStep;
    }
    return nextStageStep;
}
console.log(getNextStageStep('step 1'));

但是，最好使用let变量编写这么多 return 语句，它允许您重新定义变量值。 对于您的问题，我认为@toskv解决方案是合适的。

Answer 7

找到并打开您的 tslint.json 文件并将以下设置设置为 false

 "no-shadowed-variable": false,

使用 Visual Studio 时，可能需要重新启动 Visual Studio。