理解'无阴影变量'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使用警告“no shadowed variables”强调每个“nextStageStep”变量的出现。如果我删除我初始化为一个警告消失的空字符串的行，但是我得到错误，“找不到nextStageStep”出现在我的return语句中。

原始阴影变量警告有什么问题，是否有另一种方法可以写这个，和/或我应该在这种情况下忽略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

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

Juste用const nextStageStep = 'step 2';取代nextStageStep = 'step 2';（以及所有其他情况），它会没事的。

Answer 4

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

ES6 const是BLOCK-SCOPED，因此：

---

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

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

 console.log(TAG);  // ERROR expected

---

AFAICT，这不是阴影的情况 - 每个常量都在其大括号内正确填充。

如果我们不能重复使用变量名，我们将结束难以理解的难以理解的程序。而不是告知。

我认为这个警告是错误的

Answer 5

通常，当本地范围中的变量和包含范围中的变量具有相同名称时，会发生此错误，从而发生阴影。阴影使得无法访问包含范围中的变量并隐藏标识符实际引用的值

有关解释此问题的代码示例，请参阅此article。

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变量，它允许您重新定义变量值。对于你的问题，我认为@toskv解决方案是合适的。