TypeScript接口和實現

Question

我在玩TypeScript和接口。 我有以下代碼

interface Control {
    name: string;
    onSelect():string;
}

class Button {
    name:string="button";
    onSelect = function() {
        return "hello";
    }
}

var a:Button = new Button();
var b:Control = {"name": "arbitrary", "onSelect": () => { return "ahoy!"; }};

var trigger = function(c:Button) {
    console.log(c.name, "says", c.onSelect());
}

trigger(a);
trigger(b);

編譯並運行時不會抱怨。 任何人都可以解釋為什么我的trigger函數接受b即使它期望得到類型的Button且b的類型為Control 。

即使Button要顯式實現Control ，我也要的是Button而不是Control 。 出於所有預期目的， Button可能包含其他成員。

TypeScript是否只是因為它們在結構上相同就推斷實現？ 是否允許在期望實現類的地方傳遞接口？ （不是嗎？）

Answer 1

如接口上的TypeScript文檔所述：

TypeScript的核心原則之一是類型檢查重點在於值的“形狀”。 有時稱為“鴨子打字”

在“鴨子打字”中 ：

如果它看起來像鴨子，並且像鴨子一樣游泳，那么很可能就是鴨子。

換句話說，TypeScript檢查提供的對象或類型的形狀（方法和屬性）。 如果提供的對象包含接口描述的所有屬性和方法，則該對象極有可能被視為與所描述的接口兼容的對象。

在您的示例中，您的接口和類看起來完全相同，因此TypeScript將您的對象視為與所描述的接口兼容。

如果您檢查生成的JavaScript ，請注意根本沒有提及您的界面-這是因為TypeScript接口本質上是開發人員提供的類型元數據，可以幫助TypeScript驗證類型兼容性。

Answer 2

您的interface和class都具有相同的實現，因此，在期待一個Button您正在傳遞兼容的對象（其名稱返回字符串，而onSelect函數返回一個字符串）

如果您向Button添加另一個屬性，如greeting: string ，它將在trigger(b)上報錯，提示其無效。

interface Control {
    name: string;
    onSelect:() => string; // this is another way to write function that returns a string
}

class Button implements Control {
    name:string="button";
    onSelect = function() {
        return "hello";
    }
    greeting: string; // adding this will cause trigger(b) to fail
}