TypeError：不是函数typescript类 [英] TypeError: is not a function typescript class

问题描述

我在我的打字稿类中遇到以下错误，无法理解原因。我正在做的就是尝试调用传递令牌的辅助函数。

Im getting the following error in my typescript class and cannot understand why. All I am doing is trying to call a helper function passing the token.

错误：
发布错误：TypeError：this.storeToken不是函数（...）

Error: post error: TypeError: this.storeToken is not a function(…)

类：

/**
 * Authentication Service:
 *
 * Contains the http request logic to authenticate the
 * user.
 */
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';

import { AuthToken } from './auth-token.service';

import { User } from '../../shared/models/user.model';

@Injectable()
export class Authenticate {

  constructor(
    private http: Http,
    private authToken: AuthToken
  ) {}

  post(user: User): Observable<any> {
    let url = 'http://localhost:4000/';
    let body = JSON.stringify(user);
    let headers = new Headers({ 'content-type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(url + 'login', body, options)
      .map(this.handleData)
      .catch(this.handleError);
  }

  private storeToken(token: string) {
    this.authToken.setToken(token);
  }

  private handleData(res: Response) {
    let body = res.json();
    this.storeToken(body.token);
    return body.fields || {};
  }

  private handleError(error: any) {
    console.error('post error: ', error);
    return Observable.throw(error.statusText);
  }
}

我是打字稿的新手，所以我肯定我失踪了一些荒谬的简单。任何帮助都会很棒。

I am new to typescript so Im sure I am missing something ridiculously simple. Any assist would be great.

谢谢。

推荐答案

它应该要么是（使用 Function.prototype.bind ）：

It should either be (using Function.prototype.bind):

return this.http.post(url + 'login', body, options)
      .map(this.handleData.bind(this))
      .catch(this.handleError.bind(this));

或（使用 arrow functions ）：

return this.http.post(url + 'login', body, options)
      .map((res) => this.handleData(res))
      .catch((error) => this.handleError(error));

您所传递的方法的参考是什么，但它没有绑定到特定的这个，所以当方法执行时，函数体中的 this 不是类的实例，而是范围执行该方法。

What happens is that you are passing a reference to your method but it's not bound to a specific this, so when the method is executed the this in the function body isn't the instance of the class but the scope that executes the method.

其中每一个都帮助保持这个的正确上下文，但方式不同。

Each of of those help keep the right context for this, but in a different way.

另一种选择是：

export class Authenticate {
    ...

    private handleData = (res: Response) => {
        ...
    }

    private handleError = (error: any) => {
        ...
    }
}

这样方法已经绑定，但在这种情况下，它们不会成为原型的一部分，实际上只会成为类型函数的属性。

例如：

In this way the "methods" are already bound, but in this case they won't be part of the prototype, and will in fact become just properties of type function.
For example:

class A {
    method1() { }
    method2 = () => {}
}

编译为：

// es5
var A = (function () {
    function A() {
        this.method2 = function () { };
    }
    A.prototype.method1 = function () { };
    return A;
}());

// es6
class A {
    constructor() {
        this.method2 = () => { };
    }
    method1() { }
}

因为 method2 无法（轻松）覆盖，因此请注意此实现。

Because of that method2 can't be (easily) overriden, so beware of this implementation.

这篇关于TypeError：不是函数typescript类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！