جاوااسکریپت - درک هشدار tslint «هیچ متغیر سایهزدهای وجود ندارد»

من یک تابع دارم که مرحله فعلی را در یک جریان ترتیبی بررسی میکند، بر اساس یک رشته خاص که ارسال شده است، و طبق آن مقدار، مقدار بعدی را در برنامه 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 زیرخط میکشد. اگر خطی که در آن مقداردهی اولیه به یک رشته خالی را انجام میدهم حذف کنم، این هشدار ناپدید میشود، اما سپس خطای Cannot find nextStageStep در دستور return من ظاهر میشود.

مشکل با هشدار متغیر سایهدار اصلی چیست، و آیا راه جایگزینی برای نوشتن این وجود دارد، و/یا آیا باید صرفاً هشدار tslint را در این موقعیت نادیده بگیرم؟

پاسخ شماره ۱

لینتر شکایت میکند چون شما متغیر یکسان را چندین بار تعریف میکنید. بنابراین مقادیر داخل closure که آن را شامل میشود را جایگزین میکنید.

به جای اعلام مجدد آن، فقط از آن استفاده کنید:

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

پاسخ شماره ۲

به طور کلی،
وقتی یک متغیر در یک حوزه محلی و یک متغیر در حوزه شامل آن نام یکسانی دارند، ایجاد سایه (shadowing) رخ میدهد. سایه باعث میشود دسترسی به متغیر در حوزه شامل غیرممکن شود و مشخص نباشد که یک شناسه در واقع به چه مقدار اشاره دارد.

const a = 'no shadow';
function print() {
    console.log(a);
}
print(); // logs 'no shadow'.

const a = 'no shadow';
function print() {
    const a = 'shadow'; // TSLint will complain here.
    console.log(a);
}
print(); // logs 'shadow'.

برای نمونه کدهایی که این را توضیح میدهند به این مقاله مراجعه کنید.