父界面中的Typescript保存界面

Question

我正在嘗試編寫一個通過WebSocket接收消息的Angular2應用程序。 消息具有不同的內容，但始終包含消息標識符。 這就是為什么我想使用兒童-父母結構。 但是，當我嘗試運行以下代碼時，編譯器給我一個錯誤。 先感謝您。

打字稿代碼

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 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 PlayerData extends Message {
    age?: String
}

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

並返回如下的交集類型：

this.messages = <Subject<Message>>wsService
            .connect(CHAT_URL)
            .map((response: MessageEvent): PlayerData & ScoreInfo  => {
                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
                    }
                }
            });

Answer 2

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

您正在使用三種不同的接口，因此請使用泛型類型any而不是消息接口的特定主題。

打字稿中的多態性