它是一個TypeScript反模式來動態調用存儲在文字中的成員函數嗎？

Question

在我的角度分量I類有用來處理事件以下模式：

private keyHandlers = { 
    'ArrowDown': function ($event) { 
    this.handleArrowDown($event); 
    }, 

    'ArrowUp': function ($event) { 
    this.handleArrowUp($event); 
    }, 
}; 

然後@HostListener像這樣：

@HostListener('keydown', ['$event']) 
    onKeyDown($event: KeyboardEvent) { 
    if (typeof this.kbdHandlers[$event.code] === 'function') { 
     this.keyHandlers[$event.code]($event); 
    } 
    } 

然後，再往下我有指定爲私人的個別處理器這個類的成員：

private handleArrowDown($event) { 
    // ... 
} 

private handleArrowUp($event) { 
    // ... 
} 

然而"noUnusedLocals": true,規則似乎不喜歡它，抱怨關於handleArrow *方法從未使用。所以我的問題是 - 這種方法是否被認爲是TypeScript中的一個反調試器，還是有辦法滿足編譯器並注意這些成員？

Answer 1

答案是肯定的，不是。

TypeScript不鼓勵動態參考，因爲它無法分析您的代碼並檢測到這種用法。所以，不幸的是，它會在這種情況下抱怨。

它有很好的幫助你的意圖，但它沒有做正確的事情。換句話說，它沒有足夠的知識去做正確的事情。

另一方面，它絕對不應該「禁止」這種用法，因爲TypeScript是JavaScript。因此應該有辦法來緩解這種情況。

事實上，它是在一個討論：https://github.com/Microsoft/TypeScript/issues/9448

現在，我會建議打開noUnusedLocals關閉（我知道，那會傷害它傷害了兩種方式）。

指出的@jmlopez，這裏有兩種解決方案：

export class SomeComponent { 
    private keyHandlers = { 
    // Specifying `this` will be processed by the compiler to make the function as used. 
    'ArrowDown': function (this: SomeComponent, $event) { 
     this.handleArrowDown($event); 
    }, 
    // Arrow function will have the same effect. 
    'ArrowUp': ($event) => { 
     this.handleArrowUp($event); 
    } 
    } 
    onKeyDown($event) { 
    if (typeof this.keyHandlers[$event.code] === 'function') { 
     this.keyHandlers[$event.code]($event); 
    } 
    } 
    private handleArrowDown(_event) { 
    // ... 
    } 

    private handleArrowUp(_event) { 
    // ... 
    } 
}