webentwicklung-frage-antwort-db.com.de

Tslint-Warnung "Keine schattierte Variable" verstehen

Ich habe eine Funktion, die die aktuelle Phase in einem sequentiellen Stream auf der Grundlage einer bestimmten übergebenen Disziplin prüft und diesem Wert zufolge den nächsten Wert in meiner App Angular 2 zuweist. Es sieht ungefähr so ​​aus:

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;
}

Was ich hier mache, ist die Rückgabe des Wertes von "nextStageStep", denn das werde ich dann übergeben, damit der richtige Schritt erfolgen kann.

Im Moment unterstreicht mein Tslint jedes Vorkommen der Variablen "nextStageStep" mit der Warnung "keine gespiegelten Variablen". Wenn ich die Zeile entferne, in der ich eine leere Zeichenfolge initialisiert habe, wird diese Warnung nicht mehr angezeigt. Ich erhalte jedoch die Fehlermeldung "NextStageStep kann nicht gefunden werden" in meiner return-Anweisung.

Was ist das Problem mit der ursprünglichen Warnung für die Schattenvariable, und gibt es eine alternative Möglichkeit, dies zu schreiben, und/oder sollte ich die Tslint-Warnung in dieser Situation einfach ignorieren?

21
Ademo

Der Linter beschwert sich, weil Sie dieselbe Variable mehrmals neu definieren. Ersetzen Sie also diejenigen, die den Verschluss enthalten.

Anstatt es neu zu deklarieren, verwenden Sie es einfach:

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;
}
39
toskv

Dies hängt damit zusammen, dass dieselbe Variable in verschiedenen Bereichen definiert wird. Sie definieren nextStageStep innerhalb des Funktionsumfangs & auch innerhalb jedes if-Blocks. Eine Möglichkeit besteht darin, die Variablendeklarationen in den if-Blöcken zu entfernen

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';
}

Hier finden Sie eine gute Ressource zu Schattenvariablen http://eslint.org/docs/rules/no-shadow

3
LLai

Hinzufügen zu: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

ES6 const ist BLOCK-SCOPED, also:


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

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

 console.log(TAG);  // ERROR expected

AFAICT, dies ist NICHT ein Fall von Schattenwurf - jede der Konstanten wird korrekt innerhalb ihrer geschweiften Klammern abgesenkt.

Wenn wir Variablennamen nicht wiederverwenden können, werden nicht lesbare Programme verwendet, die unklar sind. anstatt zu informieren.

Ich glaube, dass die Warnung falsch ist

2

Sie deklarieren in jedem if-Block die gleiche Variable const nextStageStep.

Juste ersetzt const nextStageStep = 'step 2'; durch nextStageStep = 'step 2'; (und alle anderen Fälle) und es ist in Ordnung.

2
FatL

Im Allgemeinen tritt dieser Fehler auf Wenn eine Variable in einem lokalen Gültigkeitsbereich und eine Variable in dem Gültigkeitsbereich den gleichen Namen haben, tritt eine Spiegelung auf. Durch Spiegeln ist der Zugriff auf die Variable im Gültigkeitsbereich nicht möglich und verdeckt, welchen Wert ein Bezeichner tatsächlich hat verweist

In diesem Artikel finden Sie Codebeispiele, die dies erklären.

0
Junaid

Selbst wenn Sie mit den Warnungen fortfahren, gibt Ihre Funktion "getNextStageStep()" immer den leeren Wert zurück.

  • Weil "const" a eine blockspezifische Variable ist, und

  • Es wird nicht unterstützt , den Wert neu zu definieren [Der initialisierte Wert kann nicht geändert werden].

In return enthält die Blockvariable "nextStageStep" einen leeren Zeichenfolgewert, und die Variablen der inneren Blöcke "nextStageStep" maskieren oder überschreiben nicht die Variablen des äußeren Blocks "nextStageStep". variabler Wert.

Wenn Sie also "nextStageStep" zurückgeben, wird immer eine leere Zeichenfolge zurückgegeben.

Der Gültigkeitsbereich der Variablen "nextStageStep" in den inneren Blöcken liegt nur dann, wenn der Block und hier die Variablen des äußeren Blocks "nextStageStep" sich vollständig von den Variablen des inneren Blocks "nextStageStep" unterscheiden.

Also, wenn Sie wollen , dass Ihr Code funktioniert und wenn Sie müssen wollen benutze const Variablen und benutze dann mehrere return Anweisungen innerhalb von if Blöcken.

Unten ist der Code, den ich überprüft habe und der einwandfrei funktioniert. Sie können es entsprechend Ihrer Anforderung verwenden.

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'));

Schreiben Sie diese vielen return-Anweisungen jedoch besser, um die Variable let zu verwenden, mit der Sie den Variablenwert neu definieren können. Für dein Problem halte ich @ toskv Lösung für geeignet.

0
Sridhar K