Typescript / Angular 2: Property is missing in type

Question

I'm still quite new to Typescript and have trouble wrapping my head around interfaces. As I understand an interface is a type description or a contract for a class. It allows me to define, which properties a class can have and of which type they are. I try to implement that, but always get this error:

error TS2420: Class 'ResultPage' incorrectly implements interface 'ResultPageInterface'.
Property 'entries' is missing in type 'ResultPage'.

Here is the code for the interface

export interface ResultPageInterface {
  entries:Array<any>;
  page_number:number;
  page_size:number;
  total_entries:number;
}

export class ResultPage implements ResultPageInterface {}

And here the class where I want to use it.

import { Injectable } from '@angular/core';
import { ResultPage } from '../interfaces/result-page.interface';

@Injectable()
export class SomeClass {

  constructor() {}

  buildPage(res:any): ResultPage {
    let page:ResultPage = new ResultPage();
    page.entries = res.data;
    page.page_number = res.pagination.page_number;
    page.page_size = res.pagination.page_size;
    page.total_entries = res.pagination.total_entries;
    return page;
  }

}

Nitzan Tomer · Accepted Answer · 2016-11-02 10:30:40Z

You need to put the members in the class as well so that it will indeed implement the interface:

class ResultPage implements ResultPageInterface {
    public entries: Array<any>;
    public page_number: number;
    public page_size: number;
    public total_entries: number;

    constructor() {
        this.entries = [];
    }
}

You can also have the members private and use getters:

class ResultPage implements ResultPageInterface {
    private _entries: Array<any>;
    private _page_number: number;
    private _page_size: number;
    private _total_entries: number;

    constructor() {
        this._entries = [];
    }

    public get entries() {
        return this._entries;
    }

    public get page_number() {
        return this._page_number;
    }

    public get page_size() {
        return this._page_size;
    }

    public get total_entries() {
        return this._total_entries;
    }
}

Günter Zöchbauer · Accepted Answer · 2016-11-02 10:27:44Z

3

implements ResultPageInterface you state that ResultPage implements ResultPageInterface but it actually doesn't.

It should be

export class ResultPage implements ResultPageInterface {
  entries:Array<any>;
  page_number:number;
  page_size:number;
  total_entries:number;
}

answered Nov 2, 2016 at 10:27

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Comments

Sibeesh Venu · Accepted Answer · 2018-12-31 12:04:10Z

1

Just in case if you do silly mistakes. I was getting the same error today.

ERROR in src/app/components/home/home.component.ts(11,3): error TS2322: Type 'undefined[]' is not assignable to type 'StreamData'.
Property 'messageId' is missing in type 'undefined[]'. src/app/components/home/home.component.ts(18,24): error TS2339: Property 'push' does not exist on type 'StreamData'.

I changed my code from dashboardData: StreamData = []; to dashboardData: StreamData[] = [];, that fixed the issue.

answered Dec 31, 2018 at 12:04

Sibeesh Venu

22.3k17 gold badges116 silver badges153 bronze badges

Collectives™ on Stack Overflow

Typescript / Angular 2: Property is missing in type

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related