angular - Gränssnitt fungerar inte på variabel (Objekt) där värdet deklareras med en funktion (Return) - TypeScript
Jag bygger en app med Ionic v3. Av någon anledning fungerar inte mitt gränssnitt när variabelvärdet returneras med en funktion.
Till exempel fungerar detta fint.
export interface Quote {
title: string;
}
export class HomePage {
quote: Quote;
constructor(public navCtrl: NavController) {
var foo = { title: 'Lorem ipsum dorem.' };
this.quote = foo; // Logs as {title: "Lorem ipsum dorem."}
}
}
Men så fort jag får värdet som returneras från en funktion. Saker kommer inte att fungera. (Samma gränssnitt, osv.)
quote: Quote;
constructor(public navCtrl: NavController) {
// Get & set qoute
this.quote = this.getQuote();
console.log(this.quote); // Returns: {title: "Lorem ipsum dorem."}
}
// Get random quote
getQuote(category: string = undefined) : object {
const quotes = [
{
title: 'Lorem ipsum dorem.'
},
{
title: 'Lorem ipsum dorem.'
},
{
title: 'Lorem ipsum dorem.'
}
];
if (category == undefined) {
return quotes[Math.floor(Math.random() * quotes.length)];
}
}
Men så snart jag vill bygga appen som en APK kommer det att stå:
line: 21
Type 'object' is not assignable to type 'Quote'. Property 'title' is missing in type '{}'.
L20: // Get & set qoute
L21: this.quote = this.getQuote();
L22: console.log(this.quote);
Jag antar att jag helt enkelt kan sätta värdet av this.quote i funktionen. Men varför fungerar inte detta? Tack för hjälpen.
Svar #1
problemet är med typer. Du definierar resultat som objekt:
getQuote(category: string = undefined) : object {..}
men det bör vara av typen Citat:
getQuote(category: string = undefined) : Quote {
Svar #2
object i TypeScript är en allmän kategori som omfattar alla objekt. När du kastar ditt objekt till object kan appen inte längre se dess egenskaper, så den vet inte att ditt objekt följer gränssnittet.
För att fixa det, ändra bara din funktion till getQuote(category: string=undefined) : Quote
