In my Angular 2-Native Script app, I am working on creating a service that manages an array of news items with different types such as Big, Small, Referral, each having unique parameters. The service will include various methods to manipulate this data.
Below, you'll find the interface and service definitions:
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;
}
}
An error message I am encountering states:
Type '({ type: string; title: string; text: string; imageUrl: string; }
| { type: string; title: string...' is not assignable to type 'NewsItem[]'
I'm seeking guidance on how to structure the array to ensure it is compatible with News Items.