--strict

看到題主let h: Handler = new Handler()的寫法，我估計題主來自Java背景。JavaScript全是自動推斷，c++11也有auto關(guān)鍵字，只有Java拖到了今年3月才給了var。右邊的類型是確定的，左邊還要再多寫一個類型聲明，麻煩到這種程度的寫法也就Java有了。

Typescript希望在嚴謹和方便之間取得平衡，而不是糾結(jié)于數(shù)學(xué)上的正確，所以允許了一些（微軟認為常用的）類型不兼容。如果想盡可能像Java一樣嚴格，可以打開編譯器的--strict選項。

類實現(xiàn)的方法有可能不校驗其內(nèi)部的參數(shù)結(jié)構(gòu)

class SideBar implements UIElement {
    addClickListener(onclick, hello) {
        onclick('event');
    }
}

這段代碼會報錯，報的什么錯呢？

類型“SideBar”中的屬性“addClickListener”不可分配給基類型“UIElement”中的同一屬性。
不能將類型“(onclick: any, hello: any) => void”分配給類型“(onclick: (this: void, e: string) => void) => void”。

注意到兩個any了嗎？這里報錯，實際上是參數(shù)數(shù)量的錯誤，參數(shù)類型檢查被跳過了。SideBar中的addClickListener方法沒有提供完整的類型簽名，所以TypeScript直接不管參數(shù)類型了。

如果從嚴謹?shù)慕嵌葋砜?，很坑爹對吧。所以我們打開--strict。現(xiàn)在addClickListener(onclick)也會報錯了：

參數(shù)“onclick”隱式具有“any”類型。

如果說“接口都定義好了，參數(shù)還不能自動推斷出來嗎？”，確實是這樣的，畢竟Java的lambda已經(jīng)做到了。但總之TypeScript現(xiàn)在還不支持……微軟：你來咬我呀~

被接口定義的回調(diào)函數(shù)的返回值實際實現(xiàn)可以和接口定義的類型不一致

It's a feature, not a bug. 讓我們考慮

let foo: () => void;
foo = () => 1;

這是合法的。對Java來說不可理喻對不對。然而

TypeScript里的類型兼容性是基于結(jié)構(gòu)子類型的。 結(jié)構(gòu)類型是一種只使用其成員來描述類型的方式。 它正好與名義（nominal）類型形成對比。 (類型兼容性)

對于函數(shù)返回值，

類型系統(tǒng)強制源函數(shù)的返回值類型必須是目標函數(shù)返回值類型的子類型 (來源同上)

上面的定義太深奧了，講人話：可以多給，不能少給。() => void是什么意思？你別指望我會返回什么東西，但我到底會返回什么，不關(guān)你事。

為什么要這樣設(shè)計？考慮

let realData = { username: 'liqi0816', avatar: 'liqi0816.jpg', page: 'liqi0816.html' };
let mock = true;

function foo(): { username: string } {
    if (mock) {
        return { username: 'test'};
    }
    else {
        return realData;
    }
}

你可以指望我返回的東西有username屬性，但我到底會返回什么，不關(guān)你事。這樣很方便對不對？

所以回到題主的問題

addClickListener(onclick: (this: void, e: string) => void): void

人話：我不需要回調(diào)函數(shù)有返回值，就算有，我也保證不用，所以你愛返回啥返回啥。

放置了幾天無人回答,有可能寫的太難懂了,自己又查查文檔搗鼓了幾下,出現(xiàn)了一些思路

問題研究

我們再次使用一下之前我提供的完整的例子:

interface UIElement {
    addClickListener(onclick: (this: void, e: string) => void): void;
}

class SideBar implements UIElement {
    addClickListener(onclick: (this: void, e: string) => void): void {
        onclick('event');
    }
}

class Handler {
    info: string = 'ok';
    onClickGood(this:void,event:string):void{
        console.log('clicked');
        console.log(event);
    }
}
let h: Handler = new Handler();
let uiElement: SideBar = new SideBar();

uiElement.addClickListener(h.onClickGood)

如果不嚴格的說這實際上就是一個觀察著模式,我這里提供一分同樣功能的JS版本(沒有模擬繼承):

function SideBar(){

}
SideBar.prototype.addClickListener = function (callback){
    callback('event');
}

function Handler(){
    this.info = 'ok';
}
Handler.prototype.onClickGood = function (event){
    console.log(event);
}

let handler = new Handler();
let sidebar = new SideBar();

sidebar.addClickListener(handler.onClickGood);

運行輸出:

event

此時在如果我們打印onClickGood內(nèi)部的this輸出的肯定是全局對象(沒有開啟嚴格模式)

但是一般在使用觀察者模式的時候,我們一般傳入的只是一個函數(shù)而已,不會去傳入一個對象的方法,如下:

window.addEventListener('click',function (event){
    console.log(event)
})

這個才是回調(diào)函數(shù),回調(diào)函數(shù)沒有狀態(tài)this指向的就是全局.

原來的問題是如何在TypeScript中獲取正確的this類型,而解決的方法就是顯式的指定this的類型為void.

interface UIElement {
    addClickListener(onclick: (this: void, e: string) => void): void;
}
class Handler {
    info: string = 'ok';
    onClickGood (this:void,event:string) :void {
        console.log(event);
    }
}

上面onClickGood方法和UIElement接口定義的addClickListener要求傳入的函數(shù)格式一致,然后你的this終于獲得了正確的類型指向.

但是可笑在TypeScript是有類型推斷的,這一點在官方手冊指南的接口一章有提及,我們只提供了UIElement卻沒有提供實現(xiàn)類,現(xiàn)在我們提供一個實現(xiàn)類:

class SideBar implements UIElement {
    addClickListener(onclick: (this: void, e: string) => void): void {
        onclick('event');
    }
}

但是如果有正確的類型推斷,我們可以省略SideBar,addClickListener方法中的類型約束,但是去掉的結(jié)果就是該方法失去了類型檢查功能:

interface UIElement {
    addClickListener(onclick: (this: void, e: string) => void): void;
}
class SideBar implements UIElement {
    addClickListener(onclick) {
        onclick('event');
    }
}
class Handler {
    info: string = 'ok';
    onClickGood (this:Handler,event:string) :void {
        console.log(event);
    }
}

這是可以運行的但是onClickGood可不符合UIElement中addClickListener接受函數(shù)定義的類型.

實際上不僅僅是函數(shù),對于一個普通的類型來說工作的也有點不正常:

interface UIElement {
    addClickListener(onclick:string): void;
}

class SideBar implements UIElement {
    addClickListener(onclick) {
        onclick('event');
    }
}

class Handler {
    info: string = 'ok';
    onClickGood (this:Handler,event:string) :void {
        console.log(event);
    }
}

這個例子中UIElement中的addClickListener接受類型直接改成了string這個例子依然可以通過檢查,當然他是不可以運行的.

為什么

進過一番折騰后,我找到了一個可以合理解釋這一切的原因.

首先:

1. 類型推斷工作只能限制一層

   interface UIElement {
       addClickListener(onclick:string): void;
   }
   
   class SideBar implements UIElement {
       addClickListener(onclick:number) {
           
       }
   }

   這個例子中實現(xiàn)類工作類型為number但是接口規(guī)定為string,類型不對報錯了.

   但是如果我們在提供一個類繼承SideBar:

   interface UIElement {
       addClickListener(onclick:string): void;
   }
   
   class SideBar implements UIElement {
       addClickListener(onclick) {
           
       }
   }
   
   class Menu extends SideBar {
       addClickListener(onclick:number){
   
       }
   }

   Menu即使改成了number類型也沒有問題.

2. 類型推斷下的參數(shù)實際類型是any
   實際上類型推斷約束是正確的不允許你修改類型,但是如果你不指定類型默認的就是any它輸入任何類型的子類

   而由于上一級類型以及是any了,后續(xù)的類型就可以指定任何類型了

結(jié)果

類型推斷在函數(shù)接口上工作的很好,對于一般的接口而言工作的不是很理想.

例子完美情況下的類型推斷:

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function (src, sub) {
    let result = src.search(sub);
    return result > -1;
}

所以對于多重繼承來說類型推斷工作的不是很好,我們只能將類型寫全,不過對于回調(diào)函數(shù)我們完全可以定義一個函數(shù)接口,來簡化代碼量:

interface EventCallback {
    (this: void, e: string):void;
}

interface UIElement {
    addClickListener(onclick:EventCallback): void;
}

class SideBar implements UIElement {
    addClickListener(onclick:EventCallback): void {
        onclick('event');
    }
}

class Handler {
    info: string = 'ok';
    onClickGood(this: void, event: string): void {
        console.log('clicked');
        console.log(event);
    }
}
let h: Handler = new Handler();
let uiElement: SideBar = new SideBar();

uiElement.addClickListener(h.onClickGood)