AngularJS 2 Typescript interface

Question

I have a service for handling users operations and an interface for the user object.

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;
  }
}

In my login component I try to set the user with the profile returned from the login service but I get this error:

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

login.component.ts

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]));
    });
  }
}

I'm trying to import the User interface from UserService and use inside the LoginComponent but I don't know what I'm doing wrong. Any idea? I am not sure if I have to use the User interface inside the LoginComponent, is that right?

One note: If that's your real api_key, you should remove it. Second, in your big arrow statement, do a console.log(profile) so you can ensure firstName is a property of the returned object. You can write multiple statements by adding curly brackets in your statment: .then(profile => { console.log(profile); this.userService.setUser({name: profile.firstName}); }); — Levi Fuller
– Levi Fuller, Commented Mar 9, 2016 at 3:15

basarat · Accepted Answer · 2016-03-09 02:49:39Z

1

Narrow in on the code :

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

The type of profile is driven by the response of this.linkedinService.getMe(). Seems like it is something like Promise<{}>. It does not have the member firstName. Hence the error:

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

Fix

Check to the code / signatures of linkedinService. This has nothing to do with the user.service.ts file that the question contains 🌹

Update

Focus in on the code:

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

The value returned is driven by what is being passed to resolve. So make sure profile.values[0] has the right type. Alternatively provide the hint to the compiler:

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

edited Mar 9, 2016 at 2:49

answered Mar 8, 2016 at 2:49

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1320990 Over a year ago

I checked it but couldn't solve. I also updated my question with the user.service.ts file.

Collectives™ on Stack Overflow

AngularJS 2 Typescript interface

1 Answer 1

Fix

Update

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Fix

Update

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related