web-dev-qa-db-fra.com

Donner sens à l'avertissement tslint 'Aucune variable ombrée'

J'ai une fonction qui vérifie l'étape en cours dans un flux séquentiel, en fonction d'une discipline particulière transmise, et, en fonction de cette valeur, attribue la valeur suivante dans mon application Angular 2. Cela ressemble à quelque chose comme ça:

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

Ce que je fais ici, c'est renvoyer la valeur de "nextStageStep", parce que c'est ce que je vais transmettre afin que l'étape correcte se produise.

À l'heure actuelle, mon tslint souligne chacune des occurrences de variable "nextStageStep" avec l'avertissement "pas de variables masquées". Si je supprime la ligne où j'initialise une chaîne vide, cet avertissement disparaît, mais le message d'erreur suivant s'affiche: "Impossible de trouver nextStageStep" dans mon instruction de retour.

Quel est le problème avec l'avertissement de variable ombrée d'origine, et existe-t-il une autre façon de l'écrire, et/ou devrais-je simplement ignorer l'avertissement de tslint dans cette situation?

javascriptangulartypescripttslint
21
Ademo

Le linter se plaint parce que vous redéfinissez la même variable plusieurs fois. Remplaçant ainsi ceux de la fermeture qui le contient.

Au lieu de le déclarer, utilisez-le:

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

Cela concerne la définition de la même variable dans différentes portées. Vous définissez nextStageStep dans la portée de la fonction et également dans chaque bloc if. Une option consiste à supprimer les déclarations de variables dans les blocs 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';
}

Voici une bonne ressource sur les variables observées http://eslint.org/docs/rules/no-shadow

3
LLai

Addording to: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

ES6 const est BLOCK-SCOPED, donc:

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

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

 console.log(TAG);  // ERROR expected

AFAICT, c'est ET NON un cas d'ombrage - chacune des constantes est correctement encochée entre ses accolades.

Si nous ne pouvons pas réutiliser les noms de variables, nous nous retrouverons avec des programmes illisibles et obscurs. plutôt que d'informer.

Je crois que l'avertissement est mal dirigé

2
Charles Hebdough

Vous re-déclarez la même variable const nextStageStep dans chaque bloc if.

Juste remplacer const nextStageStep = 'step 2'; par nextStageStep = 'step 2'; (et tous les autres cas si) et tout ira bien.

2
FatL

En général, cette erreur se produit Lorsqu'une variable dans une étendue locale et une variable dans l'étendue contenant ont le même nom, un ombrage se produit. L’observation rend impossible l’accès à la variable dans la portée qui contient et obscurcit la valeur à laquelle un identificateur fait référence

Reportez-vous à cet article pour des exemples de code expliquant cela.

0
Junaid