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

这与在不同范围内定义相同变量有关。您正在函数范围内定义nextStageStep＆amp;也在每个if块内。一种选择是去除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”变量的范围在以下范围内：如果仅块且此处外部块“ 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。

理解'无阴影变量'tslint警告

7 个答案: