Angular 2:如何return属于多个类的对象扩展一个数组中的超类?
Angular 2: How to return objects belonging to multiple classes extending superclass in one array?
我正在尝试在 Angular 2-Native Script 应用程序中创建一个服务,该应用程序定义了一组新闻项,并具有多种对相同数据进行操作的方法。这些新闻项目可以是不同类型的,例如大、小等,每一个都可能有不同的参数。
我已经定义了接口和服务如下。
import { Injectable } from "@angular/core";
export interface NewsItem {
type: "big" | "small" |"referral";
title: string;
text: string;
imageUrl?: string;
}
export interface Referral extends NewsItem {
type: "referral";
username: string;
}
@Injectable()
export class NewsService {
private data = [
{ type: "big", title: "This is one big item!", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis, turpis vitae ornare accumsan, arcu tortor ultrices nunc, eu aliquam libero sapien vitae tellus.", imageUrl: "https://octodex.github.com/images/octocat-de-los-muertos.jpg" },
{ type: "small", title: "Yes, we code!", text: "Vivamus a sem eget erat feugiat hendrerit at quis massa. Nullam varius ac eros non dignissim. Fusce gravida arcu libero.", imageUrl: "https://octodex.github.com/images/baracktocat.jpg" },
{ type: "referral", title: "Yes, we code!", username:"Vasanthi Subramaniam", text: "Vivamus a sem eget erat feugiat hendrerit at quis massa. Nullam varius ac eros non dignissim. Fusce gravida arcu libero.", imageUrl: "https://octodex.github.com/images/baracktocat.jpg" }
]
private getItems(): NewsItem {
let result:NewsItem[] = this.data;
return result;
}
}
我收到如下错误:
Type '({ type: string; title: string; text: string; imageUrl: string; }
| { type: string; title: string...' is not assignable to type 'NewsItem[]'
如何定义数组以使其可分配给新闻项目?
只需将您的对象显式投射到引荐 class:
private data = [
{ type: "big", title: "This is one big item!", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis, turpis vitae ornare accumsan, arcu tortor ultrices nunc, eu aliquam libero sapien vitae tellus.", imageUrl: "https://octodex.github.com/images/octocat-de-los-muertos.jpg" },
{ type: "small", title: "Yes, we code!", text: "Vivamus a sem eget erat feugiat hendrerit at quis massa. Nullam varius ac eros non dignissim. Fusce gravida arcu libero.", imageUrl: "https://octodex.github.com/images/baracktocat.jpg" },
<Referral>{ type: "referral", title: "Yes, we code!", username:"Vasanthi Subramaniam", text: "Vivamus a sem eget erat feugiat hendrerit at quis massa. Nullam varius ac eros non dignissim. Fusce gravida arcu libero.", imageUrl: "https://octodex.github.com/images/baracktocat.jpg" }
]
我正在尝试在 Angular 2-Native Script 应用程序中创建一个服务,该应用程序定义了一组新闻项,并具有多种对相同数据进行操作的方法。这些新闻项目可以是不同类型的,例如大、小等,每一个都可能有不同的参数。
我已经定义了接口和服务如下。
import { Injectable } from "@angular/core";
export interface NewsItem {
type: "big" | "small" |"referral";
title: string;
text: string;
imageUrl?: string;
}
export interface Referral extends NewsItem {
type: "referral";
username: string;
}
@Injectable()
export class NewsService {
private data = [
{ type: "big", title: "This is one big item!", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis, turpis vitae ornare accumsan, arcu tortor ultrices nunc, eu aliquam libero sapien vitae tellus.", imageUrl: "https://octodex.github.com/images/octocat-de-los-muertos.jpg" },
{ type: "small", title: "Yes, we code!", text: "Vivamus a sem eget erat feugiat hendrerit at quis massa. Nullam varius ac eros non dignissim. Fusce gravida arcu libero.", imageUrl: "https://octodex.github.com/images/baracktocat.jpg" },
{ type: "referral", title: "Yes, we code!", username:"Vasanthi Subramaniam", text: "Vivamus a sem eget erat feugiat hendrerit at quis massa. Nullam varius ac eros non dignissim. Fusce gravida arcu libero.", imageUrl: "https://octodex.github.com/images/baracktocat.jpg" }
]
private getItems(): NewsItem {
let result:NewsItem[] = this.data;
return result;
}
}
我收到如下错误:
Type '({ type: string; title: string; text: string; imageUrl: string; }
| { type: string; title: string...' is not assignable to type 'NewsItem[]'
如何定义数组以使其可分配给新闻项目?
只需将您的对象显式投射到引荐 class:
private data = [
{ type: "big", title: "This is one big item!", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis, turpis vitae ornare accumsan, arcu tortor ultrices nunc, eu aliquam libero sapien vitae tellus.", imageUrl: "https://octodex.github.com/images/octocat-de-los-muertos.jpg" },
{ type: "small", title: "Yes, we code!", text: "Vivamus a sem eget erat feugiat hendrerit at quis massa. Nullam varius ac eros non dignissim. Fusce gravida arcu libero.", imageUrl: "https://octodex.github.com/images/baracktocat.jpg" },
<Referral>{ type: "referral", title: "Yes, we code!", username:"Vasanthi Subramaniam", text: "Vivamus a sem eget erat feugiat hendrerit at quis massa. Nullam varius ac eros non dignissim. Fusce gravida arcu libero.", imageUrl: "https://octodex.github.com/images/baracktocat.jpg" }
]