如何在Typescript接口文件中表示返回類型？

Question

以下代碼之間有什么區別：

changeName(): ng.IPromise<any>;

和

changeName: () => ng.IPromise<any>;

我知道一種是返回類型，但我對第一種感到困惑。

這是函數體：

changeName = (): ng.IPromise<any> => {
        var self = this;
        self.chnAction = "PREFERENCES.CHANGE_NAME.SUBMITTING_BUTTON_TEXT";
        self.chnErrorMessage = null;
        return self.uss.changeName(
            self.chnNewFirstName,
            self.chnNewLastName)
            .then(
            (response: ng.IHttpPromiseCallbackArg<any>): any => {
                self.chnAction = "PREFERENCES.CHANGE_NAME.SUBMITTED_BUTTON_TEXT";
                self.chnNewFirstName = '';
                self.chnNewLastName = '';
                self.chnErrorMessage = null;
                self.logout();
                return this.$state.go('home.auth', { content: 'change_name_success' });
            },
            (error: ng.IHttpPromiseCallbackArg<any>): ng.IPromise<any> => {
                if (error.status === 500) {
                    self.chnErrorMessage = 'AUTH_SERVICE.UNABLE_TO_CONTACT_SERVER';
                } else {
                    var errors: string[] = [];
                    Object.keys(error.data.modelState).forEach((key) => {
                        errors.push.apply(errors, error.data.modelState[key]);
                    });
                    self.chnErrorMessage = errors[0];
                    self.chnErrorMessages = errors;
                    self.chnAction = "PREFERENCES.CHANGE_NAME.SUBMIT_BUTTON_TEXT";
                }
                return this.$q.reject(error);
            });
    };

Answer 1

根本的區別是：

• changeName(): ng.IPromise<any>; 代表一種方法 。
• changeName: () => ng.IPromise<any>; 表示可以容納函數的屬性 （此屬性與changeName = (): ng.IPromise<any> => { ... };匹配changeName = (): ng.IPromise<any> => { ... };因為這是將函數分配給屬性）。

因此，屬性和方法之間存在差異。 這是一個例子：

interface MyInterface {
    myMethod(): string;
    myProperty: () => string;
}

class MyBaseClass implements MyInterface {
    myMethod() {
        return "string";
    }

    myProperty = () => "string";
}

class MyChildClass extends MyBaseClass {
    myMethod() {
        return super.myMethod();
    }

    myProperty = () => super.myProperty(); // error
}

為什么用箭頭功能屬性，而不是一個方法有時做的原因是因為分配到的屬性箭頭功能保存的價值this不管，勢必它...

class MyClass {
    myMethod() {
        console.log(this);
    }

    myProperty = () => console.log(this);
}

new MyClass().myMethod.call({});   // outputs {}
new MyClass().myProperty.call({}); // outputs the instance of MyClass

......因為價值this是保存在構造函數中...

var MyClass = (function () {
    function MyClass() {
        // captures this here
        var _this = this;
        // guaranteed to always use instance of class for `this`
        this.myProperty = function () { return console.log(_this); };
    }
    MyClass.prototype.myMethod = function () {
        // not guarnateed to always use instance of class
        console.log(this);
    };
    return MyClass;
})();

旁注 ：您可以在JS中閱讀有關.call的信息 。

Answer 2

最好顯示整個代碼示例。 希望以下示例可以解釋您的問題：

class MyClass {

    changeName(): number {
        return 5;
    }

    changeName2 = ():number => {
        return 5;
    }
}

轉換為：

var MyClass = (function () {
    function MyClass() {
        this.changeName2 = function () {
            return 5;
        };
    }
    MyClass.prototype.changeName = function () {
        return 5;
    };
    return MyClass;
})();

[ 游樂場 ]

關於以下兩個定義之間的差異，有深入的解釋： 在構造函數與原型中聲明javascript對象方法

Answer 3

在界面上沒有區別。 這是一個使用兩種表示法的接口（為了清楚起見，我們使用string作為返回類型）：

interface MyInterface {
    foo(): string; // preferred
    bar: () => string;
}

在這里， foo是具有返回類型string的函數。 bar的類型也是帶有返回類型string的函數。 第一個符號通常是更干凈的。 以下對象與接口匹配：

let x: MyInterface = {
    foo: () => "",
    bar: () => ""
}

在類上 ，一種表示法將功能添加到原型，而另一種表示法將其添加為新實例的屬性（ this.myFunc = ... ）。 這具有與JavaScript完全相同的效果（並且幾乎不需要添加函數/方法作為實例屬性）。

class MyClass {
    bar(): string { return ""; } // prototype, preferred
    foo = () => ""; // instance property
}

正如我們在下面看到的，即使我已經反轉了foo和bar ，該類也適合我們的原始接口。 因此，該接口不會強加如何設置方法的實現細節。

let y: MyInterface = new MyClass();

請注意，類不是特殊類型-實際上是接口和實現。 因此，您可以像使用其他任何類型（無論是定義為接口還是類）一樣使用MyClass ：

let z: MyClass = {
    foo: () => "",
    bar: () => ""
}

關於類型（接口定義的類型），沒有區別，盡管在類中使用時，表示法會產生不同的實現。

Answer 4

以下代碼有什么區別

由於您沒有添加更多代碼來查看實際配置的內容。 如我所見，您有兩行代碼：

changeName(): ng.IPromise<any>;

按照這段代碼，人們可以理解它正在返回類型為any的promise，可以是任何東西， object, string, array, number等。

因此，可以說changeName()將返回<any>事物類型的ng.IPromise值。

---

而另一行代碼：

changeName: () => ng.IPromise<any>;

說這個函數將返回<any>的值ng.IPromise 。