使用方法将来自后端的JSON对象作为适当的typescript类键入

我试图将从后端返回的json映射到角度正确的typescript类

以下是我的后端代码：

findMessagesWithOtherUserAccount(otherId:Number):Observable<Message[]> {
    return this.http.get('/api/message/find-messages-with-other-useraccount/' + otherId)
        .map(this.extractMessages);
}

private extractMessages(res:Response) {
    let body = res.json();
    return body || {};
}

我尝试从组件中引用

isRecipient

方法：

   getSenderFirstName(message:Message):string {
        if (message.isRecipient(this.currentUserAccount)) {
            return this.otherUserAccount.firstName;
        }
        return 'Moi';//FIXME: i18n/translate
    }

export class MessageConversationComponent implements OnInit {

    messagesWithOtherUserAccount:Message[];
    currentUserAccount:UserAccount;
    otherUserAccount:UserAccount;

    constructor(private messageService:MessageService,
                private userAccountService:UserAccountService,
                private routeSegment:RouteSegment) {
    }

    ngOnInit() {
        this.messageService.findMessagesWithOtherUserAccount(2)
            .subscribe(param=>this.messagesWithOtherUserAccount = param);
        this.userAccountService.retrieveOtherUserAccount(2)
            .subscribe(param=> this.otherUserAccount = param); 
   this.userAccountService.currentUserAccount$.subscribe(param=>this.currentUserAccount = param);
    }

    getSenderFirstName(message:Message):string {
        if (message.isRecipient(this.currentUserAccount)) {
            return this.otherUserAccount.firstName;
        }
        return 'Moi';//FIXME: i18n/translate
    }
}

但是，我得到了这个错误：

browser_adapter.js:81 TypeError: message.isRecipient is not a function
    at MessageConversationComponent.getSenderFirstName (message-conversation.component.js:50)

指示未键入消息（普通js对象除外）

以下是完整的组件：

   getSenderFirstName(message:Message):string {
        if (message.isRecipient(this.currentUserAccount)) {
            return this.otherUserAccount.firstName;
        }
        return 'Moi';//FIXME: i18n/translate
    }

export class MessageConversationComponent implements OnInit {

    messagesWithOtherUserAccount:Message[];
    currentUserAccount:UserAccount;
    otherUserAccount:UserAccount;

    constructor(private messageService:MessageService,
                private userAccountService:UserAccountService,
                private routeSegment:RouteSegment) {
    }

    ngOnInit() {
        this.messageService.findMessagesWithOtherUserAccount(2)
            .subscribe(param=>this.messagesWithOtherUserAccount = param);
        this.userAccountService.retrieveOtherUserAccount(2)
            .subscribe(param=> this.otherUserAccount = param); 
   this.userAccountService.currentUserAccount$.subscribe(param=>this.currentUserAccount = param);
    }

    getSenderFirstName(message:Message):string {
        if (message.isRecipient(this.currentUserAccount)) {
            return this.otherUserAccount.firstName;
        }
        return 'Moi';//FIXME: i18n/translate
    }
}

以及模板：

            <div *ngFor="let message of messagesWithOtherUserAccount" class="media col-xs-12">
                <div class="media-body Lui" ng-class="getMessageClasses(message)">
                    <div class="media-heading">
                        {{getSenderFirstName(message)}} <small><span am-time-ago="message.sendDate"></span></small>
                    </div>
                    <p class="message-text">{{message.text}}</p>
                </div>
            </div>

{{getSenderFirstName（消息）}}
{{message.text}

您不能将JSON强制转换为类实例。如果您确实需要一个包含方法的类，则需要使用

newsomeclass（）

创建它，如：

private extractMessages(res:Response) {
    let body = res.json();

    if(body) {
      return new Message(
        body.id,
        new UserAccount(body.sender),
        new UserAccount(body.recipient),
        new Date(body.sendDate),
        body.messageRead,
        body.text);
    } else {
      return new Message(
    }
}

---

如果您只希望对属性进行类型化访问，则可以使用接口而不是类，并转换到此接口以获得自动完成和静态类型检查。

Typescript不提供任何额外的方法将普通对象转换为类实例。您应该为

消息

定义一个只包含普通属性的接口。将函数的返回类型标记为TypeScript类型不会使实际对象成为该类型的实例。您接收的对象没有您定义的类消息的原型函数可能重复