javascript - 为什么从 JSON 文字到类型的转换不包括函数

标签 javascript typescript angular

我有一个像这样的模型类:

export class Task {

    public name: string;
    public status: string = "todo";

    public completeTask(): void {
        this.status = "done";
    }   
}

以及检索任务的服务:

export class TaskService {

    constructor(private _http: Http) {}

    public getTask(): Observable<Task> {
        return this._http
            .get("url")
            .map(res => res.json().data as Task)
    }
}

然后,当我尝试调用任务的 completeTask 函数时,我收到错误消息:

TypeError: task.completeTask() is not a function

当我将 JSON 文字对象转换为任务时,我得到了相同的结果。

let task: Task = <Task>{ name: "Make some coffee" }
task.completeTask(); // Results in error

我做错了什么吗?如何确保包含函数?

最佳答案

事实上,当您进行强制转换时,您并没有真正拥有您所强制转换的类型的实例。您只需声明一个具有文字形式的对象,而不是任务的实例。

如果它只是 TypeScript 提供的一种检查转换对象是否遵循类型结构的方法。但这不仅仅是在设计/编译时的运行时。

如果您希望能够使用您需要根据内容实例化一个新对象的类型的方法:

public getTask(): Observable<Task> {
    return this._http
        .get("url")
        .map(res => {
          let content = res.json().data;
          let task = new Task();
          task.name = content.name;
          task.status = content.status;
          return task;
        });
}

有关详细信息,请参阅此问题:

编辑

按照@ssube 的评论,您可以像这样声明Task 类:

export class Task {
  (...)

  constructor(obj:{name:string, status:string}) {
    this.name = obj.name;
    this.status = obj.status;
  }

  (...)
}

这样实例化会更容易:

public getTask(): Observable<Task> {
    return this._http
        .get("url")
        .map(res => new Task(res.json().data));
}

关于javascript - 为什么从 JSON 文字到类型的转换不包括函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36941990/

相关文章:

javascript - Particles.js 在 .html 文件中有效,但在 .ejs 文件中无效

javascript - 使用实时数据更新热图

angularjs - Angular 2 : Injecting a provider into a component using a custom decorator or annotation?

javascript - Lodash JS - 在普通 Javascript 中模拟 '_.intersectionWith'?

javascript - 创建用户时将数据写入 Firestore 不起作用

javascript - “string”无法分配给 Nullable<T>

Angular 4 : How to use await/async within subscribe

javascript - Typescript 和 Jquery 语法问题

angular - Windows 身份验证在 Microsoft Edge 浏览器中不适用于 Angular 2 应用程序

angular - 如何创建嵌套的表单组,基于模型的 react 表单