【问题标题】：AngularJS 2 Typescript interfaceAngularJS 2 打字稿界面
【发布时间】：2016-06-21 19:16:37
【问题描述】：

我有一个处理用户操作的服务和一个用户对象的接口。

user.service.ts

import {Injectable} from 'angular2/core';

export interface User {
  name: string;
  email?: string;
  picture?: string;
}

@Injectable()
export class UserService {
  me: User;

  constructor() {

  }

  setUser(user: User) {
    this.me = user;
  }
}

在我的登录组件中，我尝试使用从登录服务返回的配置文件设置用户，但我收到此错误：

类型“{}”上不存在属性“firstName”。

import {Component} from 'angular2/core';

import {User, UserService} from './services/user.service';
import {LinkedinService} from './services/linkedin.service';

declare const IN: any;

console.log('`Login` component loaded asynchronously');

@Component({
  selector: 'Login',
  providers: [
    UserService,
    LinkedinService
  ],
  template: require('./login.html')
})
export class LoginComponent {
  me: User;

  constructor(public linkedinService: LinkedinService, public userService: UserService) {
    this.me = userService.me;
  }

  ngOnInit() {
    console.log('hello `Login` component');
  }

  login() {
    this.linkedinService.login()
      .then(() => this.linkedinService.getMe()
      .then(profile => this.userService.setUser({ name: profile.firstName })));
  }
}

linkedin.service.ts

import {Injectable} from 'angular2/core';

declare const IN: any;

@Injectable()
export class LinkedinService {
  constructor() {
    IN.init({
      api_key: 'xxxxxxxxxxx',
      authorize: true
    });
  }

  login() {
    return new Promise((resolve, reject) => {
      IN.User.authorize(() => resolve());
    });
  }

  getMe() {
    return new Promise((resolve, reject) => {
      IN.API.Profile('me').result((profile) => resolve(profile.values[0]));
    });
  }
}

我正在尝试从 UserService 导入用户界面并在 LoginComponent 中使用，但我不知道我做错了什么。任何想法？我不确定是否必须使用 LoginComponent 中的用户界面，对吗？

【问题讨论】：

请注意：如果那是您的真实api_key，您应该删除它。其次，在你的大箭头语句中，做一个console.log(profile)，这样你就可以确保firstName是返回对象的一个属性。您可以通过在语句中添加大括号来编写多个语句：.then(profile => { console.log(profile); this.userService.setUser({name: profile.firstName}); });

标签： interface typescript angular

【解决方案1】：

缩小代码范围：

  .then(() => this.linkedinService.getMe())
  .then(profile => this.userService.setUser({ name: profile.firstName })));

profile 的类型由this.linkedinService.getMe() 的响应驱动。好像是Promise<{}>。它没有成员firstName。因此错误：

Property 'firstName' does not exist on type '{}'.

修复

检查linkedinService 的代码/签名。这与问题包含的user.service.ts 文件无关?

更新

专注于代码：

 getMe() {
    return new Promise((resolve, reject) => {
      IN.API.Profile('me').result((profile) => resolve(profile.values[0]));
    });
  }

返回的值由传递给resolve 的内容驱动。所以请确保profile.values[0] 具有正确的类型。或者向编译器提供提示：

 getMe() {
    return new Promise<{firstName:string}>((resolve, reject) => {
      IN.API.Profile('me').result((profile) => resolve(profile.values[0]));
    });
  }

【讨论】：

我检查了但无法解决。我还用user.service.ts 文件更新了我的问题。