Saving interface within parent interface in TypescriptorIn Typescript

Looking for assistance with building an Angular2 application that can receive messages via WebSocket. These messages vary in content but always include a message identifier. To handle this, I am aiming to implement a child-parent architecture. However, I encounter an error when trying to execute the following code snippet. Any help would be appreciated.

Typescript code

export interface Message {
    id: String
}

export interface PlayerData extends Message {
    age: String
}

export interface ScoreInfo extends Message {
    tBest: number,
    tPlayer: number
}

@Injectable()
export class GameCommunicationService {
    public messages: Subject<Message>;
    constructor(wsService: WebsocketService) {
        this.messages = <Subject<Message>>wsService
            .connect(CHAT_URL)
            .map((response: MessageEvent): Message => {
                let data = JSON.parse(response.data);
                if (data.id == 12) {
                    return {
                        id: data.id,
                        age: data.age
                    }
                } else if (data.id == 13) {
                    return {
                        id: data.id,
                        tBest: data.tBest,
                        tPlayer: data.tPlayer
                    }
                } else {
                    return {
                        id: data.id
                    }
                }
            });
    }
}

Error:

ERROR in D:/angular/src/app/game-communication.service.ts (57,7): Type '{   code: any; age: any; }' is not assignable to type 'Message'.
  Object literal may only specify known properties, and 'age' does not exist in type 'Message'.

ERROR in D:/angular/src/app/game-communication.service.ts (57,15): Cannot find name 'age'.

ERROR in D:/angular/src/app/game-communication.service.ts (57,7): Type '{ code: any; age: any; }' is not assignable to type 'Message'.
  Object literal may only specify known properties, and 'age' does not exist in type 'Message'.

ERROR in D:/angular/src/app/game-communication.service.ts (57,15): Cannot find name 'age'.

....

Answer №1

export interface Message {
    id: String
}
export interface PlayerData extends Message {
    age: String
}
export interface ScoreInfo extends Message {
    tBest: number,
    tPlayer: number
}
@Injectable()
export class GameCommunicationService {
    public messages: Subject<any>;
    constructor(wsService: WebsocketService) {
        this.messages = <Subject<any>>wsService
            .connect(CHAT_URL)
            .map((response: MessageEvent): any => {
                let data = JSON.parse(response.data);
                if (data.id == 12) {
                    return {
                        id: data.id,
                        age: data.age
                    }
                } else if (data.id == 13) {
                    return {
                        id: data.id,
                        tBest: data.tBest,
                        tPlayer: data.tPlayer
                    }
                } else {
                    return {
                        id: data.id
                    }
                }
            });
    }
}

To utilize the three different interfaces effectively, consider using the generic type 'any' instead of a specific Subject of the Message Interface.

Explore Polymorphism in Typescript for more insights

Answer №2

To ensure that certain fields are not required, you can use the `?` symbol as shown below:

export interface PlayerDetails extends Message {
    height?: string
}

export interface GameStats extends Message {
    topScore?: number,
    totalPlayers?: number
}

You can then create an Intersection type using the following approach:

this.data = <Subject<Message>>connectionService
            .connect(GAME_URL)
            .map((response: MessageEvent): PlayerDetails & GameStats  => {
                let info = JSON.parse(response.info);
                if (info.key == 10) {
                    return {
                        key: info.key,
                        height: info.height
                    }
                } else if (info.key == 11) {
                    return {
                        key: info.key,
                        topScore: info.topScore,
                        totalPlayers: info.totalPlayers
                    }
                } else {
                    return {
                        key: info.key
                    }
                }
            });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Syncing a line's position with the cursor in Angular using the ChartJs Annotation Plugin

I've been working on creating a crosshair using the annotation plugin, and while I've been able to modify the line's value, it doesn't seem to update on the chart. Here are the details of my chart options : public financialChartOptions ...

Combining multiple arrays of numbers in Typescript into one aggregate

I am looking to combine multiple number values from different arrays in Typescript. My data model looks like this: export class DataModel { date : string; number : any; } The main class contains an array of DataModels: export class CountryData ...

Simplifying parameter types for error handling in app.use callback with Express.js and TypeScript

With some familiarity with TypeScript but a newcomer to Express.js, I aim to develop a generic error handler for my Express.js app built in TypeScript. The code snippet below is functional in JavaScript: // catch 404 and forward to error handler app.use((r ...

*ngIf-else not displaying the alternate results

I am completely stuck and can't figure out why my code isn't working. Is there anyone who can help me identify the issue? I am attempting to display a "Ticket not found" message when there are no tickets to show. Despite trying to check the leng ...

What is the best way to verify both a null value and a length simultaneously within a template condition?

There is a data that can be null or an empty array, but the template should still be rendered if leaseApDto is not null or has a length greater than 0. I attempted to use the condition model.leaseApDto !== null || model.leaseApDto.length !=== 0, but they ...

Aframe's a-assets feature experiencing issues when loading dynamic data through Angular 2

Since there is no fixed number of assets that need to be loaded from the server, I am utilizing Angular 2 templates to dynamically create assets. Below is a snippet of sample code: <a-assets> <div *ngFor="let scene of floorData.scen ...

Integrate a post AJAX call into an Angular service for seamless functionality

I have come across an interesting scenario where I have to integrate old ajax code into a new Angular 10 application as per project requirements. Is it possible to directly run the existing ajax calls in the Angular service? Or, is there any node module ...

Using Angular - Executing a query only when a URL parameter is present

Can I execute this query only if a URL parameter (paramOne) is present? queryAndSubscribe(){ this._subscription = this._activatedRoute.params.pipe( tap (params => { console.log('params = ', params); }), switchMap ...

What is the best way to ensure that the first tab is always pre-selected among dynamic tabs?

I'm currently working on an angular 4 project and I need to implement a feature where there are three checkboxes. When the first checkbox is selected, a new tab should be dynamically created. So, if all three checkboxes are selected, there will be thr ...

Will adding a pipe to my code cause a delay in the loading of components?

Visual Representation of Components without Using Pipes Showing a Delay of 1300 milliseconds Illustration of Components Utilizing Pipes with a Delay of 1400 milliseconds ...

Guidelines on adjusting the hue of the card

I have created a directive to change the color of cards @Directive({ selector: "[appColor]", }) export class ColorDirective { @Input("color") color: string; constructor(private element: ElementRef, private render: Renderer2) { ...

Reinitializing various states using React Redux

My application consists of multiple Steps, each with their own state. I am attempting to create a link that triggers an onClick Action to reset all states back to their initial values. However, I am facing difficulties in achieving this. Within my Nav, I ...

The issue of Kendo Angular 2 Grid 0.12.0 failing to compile in AOT mode

After recently upgrading from version 0.7.0 to 0.12.0 for the Kendo Grid in Angular 2 (@progress/kendo-angular-grid), I encountered an issue with compiling my app using AOT mode. While the app compiles successfully without AOT, it fails when attempting to ...

I'm looking for some information on Typescript static functions - can anyone help me

Below is the code I am currently working with: class BaseClass { // includes a static method static someMethod() { } } class ChildClass extends BaseClass{ } class AnotherClass { protected variable: BaseClass; // Works fine with type &apos ...

Next.js does not support tooltips with custom children components

I created a unique Tooltip component and I'm attempting to include NextLink as the children. However, I encountered an error similar to the one below. Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Tooltip)`. Expected an e ...

Is it possible to set up Injector within TestBed?

Currently, I am in the process of writing test cases for a custom ErrorHandler within Angular. In my implementation, I have included Injector as a dependency in the constructor due to the understanding that providers are initialized after ErrorHandler. The ...

Submitting the object in the correct format for the Firebase database

My goal is to structure the Firebase database in the following way: "thumbnails": { "72": "http://url.to.72px.thumbnail", "144": "http://url.to.144px.thumbnail" } However, I am struggling to correctly set the keys '72' and '144&apos ...

Error: TypeScript compilation failed due to absence of tsc command in the system

Hello, I recently installed TypeScript and encountered an issue when trying to initialize tsc -v in the terminal. The error message I received was "bash: tsc: command not found." During the installation process, I used npm install -g typescript@latest whi ...

The XhrIoPool module was not designed to be used as a constructor

There was an error: TypeError: __WEBPACK_IMPORTED_MODULE_0__firebase_webchannel_wrapper__.XhrIoPool is not a constructor at new WebChannelConnection (http://localhost :8100/build/vendor.js:155972:21) at BrowserPlatform.loadConnect ...

What is the best way to incorporate infinite scrolling into my Angular carousel implementation?

After following an amazing tutorial, I was able to create a basic carousel using two directives and one component in Angular. However, the current version of the carousel lacks an 'infinite scrolling' mode, which is something I would like to inc ...