施放不投射

时间:2016-03-23 15:08:27

标签: typescript angular

我做了一个简单的Http调用:

http.get('/test/data/user.json').
    map(res => <User> res.json()).
    subscribe(user => {
        console.log(typeof user);
        console.log(user);
        console.log(user.getName());
});

user.json中包含以下数据:

{
    "name":"Robert"
}

以及以下User类:

export class User{
    name:string;
    lastName:string;
    getName():string{
        return this.name;
    }
}

问题是我在控制台中得到的结果:

console.log(typeof user);
  

对象

console.log(user);
  

对象{name:&#34; Robert&#34;}

console.log(user.getName());
  

未捕获的TypeError:user.getName不是函数

问题

问题在于我的对象是object,而不是User,所以它没有所有属性,也没有方法。

还尝试使用基于Promise的通话和user.json() as User代替<User> res.json()

编辑:与投射到界面不相似,因为界面没有自己的行为。

1 个答案:

答案 0 :(得分:2)

如果要使用getName方法,则需要在映射响应正文时实例化新的User对象:

http.get('/test/data/user.json').
  map(res => {
    let body = res.json();
    return new User(body.name, body.lastName);
  })
  subscribe(user => {
    console.log(typeof user);
    console.log(user);
    console.log(user.getName());
  });

User课程将如下调整:

export class User{
  constructor(private name:string, private lastName:string) {}

  getName():string{
    return this.name;
  }
}

转换对象不会向现有对象添加方法。响应的json方法将使用JSON.parse简单地解析响应主体并返回原始对象。

请参阅此plunkr:https://plnkr.co/edit/7lKHvArpayrMAzm5Xgk1?p=preview