CODEWITHSUNDEEP
angulartypescript
Nitu Dhaka
Nitu Dhaka

Reputation: 1320

Type is not assignable to type, Property is missing in type (error not catachable)

I am newbie on typescript and been stuck in this for 4 hours. Finally decided to post here My data is following`
data.js

        let links=
[
      {
         "type":"header",
         "title":"Account"
      },

      {
         "title":"Profile",
         "description":"View your profile",
         "url":"http://www.test.com/user/profile/url/here",
      },
      {
         "title":"Board",
         "description":"View your board",
         "url":"http://www.test.com/user/board/url/here",
      },
      {
         "type":"separator"
      },
      {
         "title":"Settings",
         "description":"Manage your settings",
         "url":"http://www.test.com/user/settings/url/here",
      }

];

factory.js

  import { LinkType } from './user-profile.enum';
import {MenuLinkType } from './user-profile.interface';
import {UserService } from '../user.service';
import { PlatformService } from '../platform.service';

abstract class MenuItem implements MenuLinkType {
 abstract get type():LinkType;
}

export  class MenuHeaderItem extends MenuItem  {
    constructor(private _title: string){
        super();
    }
    get type():LinkType {
          return  LinkType.Header;
    }
  get title():string {
    return  this._title;
  }
}

export class MenuSeparatorItem extends MenuItem {
  get type(): LinkType {
    return LinkType.Separator;
  }
}

export class MenuLinkItem extends MenuItem {
    constructor(private title: string, private _url:string, private _description:string){
        super();
    }
  get type(): LinkType {
    return LinkType.Link;
  }
  get title1(): string {
    return  this.title;
  }
  get description(): string {
    return  this._description;
  }
  get url(): string {
    return  this._url;
  }
}

export type MenuItemKind = MenuItem | MenuHeaderItem | MenuSeparatorItem | MenuLinkItem;

And my another service file is

Intermediate.service.js

  import {Injectable} from '@angular/core';
import { UserService } from '../user.service';
import { MenuItemKind, MenuHeaderItem,MenuSeparatorItem,MenuLinkItem } from './user-profile.factory';
import { Observable } from 'rxjs/Observable';
import  'rxjs/add/operator/map';

@Injectable()
export class UserIntermediateService {
     constructor(private userService: UserService) {
  }
 userDetail(userid):Observable<MenuItemKind>{
 let userRes =   this.userService.getUserDetail(userid);
 let obs = {} as MenuItemKind;
   obs = Object.keys(userRes).map(k => <MenuItemKind>userRes[k]);
    return obs;
  }
}

Errors coming:-

-intermediate.service.ts (14,4): Type 'MenuHeaderItem[]' is not assignable to type 'MenuHeaderItem'.

intermediate.service.ts (15,5): Type 'MenuHeaderItem' is not assignable to type 'Observable'. Property '_isScalar' is missing in type 'MenuHeaderItem'.

any help will be appreciated. Thanks in advance.

Upvotes: 1

Views: 5312

Answers (1)

Thiago Barcala
Thiago Barcala

Reputation: 7333

You declared obs as MenuItemKind but you are trying to assign an array of MenuItemKind to it.

let obs = {} as MenuItemKind;
obs = Object.keys(userRes).map(k => <MenuItemKind>userRes[k]);

But note that in this case you don't need to declare the type of obs, since it can be inferred:

let obs = Object.keys(userRes).map(k => <MenuItemKind>userRes[k]);

You also declared the function userDetail with return type Observable<MenuItemKind>, but the variable obs is actually of type MenuItemKind[].

Upvotes: 2

Related Questions