理解“無陰影變量”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。