CODEWITHSUNDEEP
typescript
user762579
user762579

Reputation:

Typescript error TS2420 : Class incorrectly implements interface

Upon building my app , I get the following error, which seems strange to me as the property appName is stated :

ERROR in ../src/app/app.service.ts (30,14): Class 'AppService' incorrectly implements interface 'InternalStateType'. Property 'appName' is missing in type 'AppService'.)

app.service.ts

import {Injectable} from '@angular/core';

interface InternalStateType {
  [key: string]: any;
  appName: string;
  darkMode: boolean;
  defaultLang: string;
  topnavTitle: string;
  messagePanelOpen: boolean;
  sidenavOpen: boolean;
  sidenavMode: string;
  sidenavCollapse: boolean;
  pageFullscreen: boolean;
  pageFooter: boolean;
  initial: boolean
};


/**
 * App service
 */
@Injectable()
export class AppService implements InternalStateType {

  // Set your states default value.
  private state: InternalStateType = {
    appName: 'MyApp',
    darkMode: false,
    defaultLang: 'en',
    topnavTitle: 'MyApp',
    messagePanelOpen: false,
    sidenavOpen: false,
    sidenavMode: 'over',
    sidenavCollapse: true,
    pageFullscreen: false,
    pageFooter: false,
    initial: false
  };

  public cloneState(): InternalStateType {
    return JSON.parse(JSON.stringify(this.state));
  }

  public reloadState(state: InternalStateType) {
    this.state = state;
  }

  public getState(prop?: any): InternalStateType {
    const state = this.state;
    return state.hasOwnProperty(prop) ? state[prop] : state;
  }

  public setState(prop: string, value: any) {
    return this.state[prop] = value;
  }
}

Where am I wrong ? thanks for your feedback

Upvotes: 6

Views: 25781

Answers (2)

Sebastian Sebald
Sebastian Sebald

Reputation: 16846

The interface you defined does only has "direct properties", but your class that should implement InternalStateType all properties of InternalStateType are members of the state properties.

You have to remove the state property from your class. Everything should work then :)

Upvotes: 4

Saravana
Saravana

Reputation: 40534

You do not actually have the appName property on AppService type. Your state is typed as InternalStateType and has appName property. If you actually want AppService to implement InternalStateType, define it like below:

@Injectable()
export class AppService implements InternalStateType {

  private appName: string;
  // ... define other members of `InternalStateType` here

}

If you did not intend for AppService to implement InternalStateType, remove it from the class declaration:

export class AppService {
  // ...
}

Upvotes: 0

Related Questions