angular - Lägg till egenskap till gränssnitt typescript

Så jag arbetar på ett Angular-projekt och skapade detta gränssnitt för att kunna visa viss data:

export interface UserData {
  name: string,
  vorname: string,
  strasse: string,
  plz: string,
  ort: string,
  handynummer: string,
  telefonnummer: string,
}

Om jag vill visa mer data i min databas, skulle jag behöva lägga till dessa datapunkter i detta gränssnitt, finns det ett sätt att skapa ett gränssnitt dynamiskt, eller skapa det i komponentens konstruktor?

Svar #1

Du kan inte dynamiskt ändra/skapa ett gränssnitt eftersom det bara är ett statiskt värde, används för strukturell typkontroll av Typescript-kompilatorn.

Men om du behöver alla egenskaper på det gränssnittet och en extra egenskap, kan du göra några saker:

Använd extends

Du kan också använda extends för att skapa ett nytt gränssnitt för detta specifika fall.

interface ExtendedUserData extends UserData {
 someOtherProperty: string
}

Använd Intersection-typer

Detta kan vara nära den typ av "dynamiskt" beteende som du letar efter. Säg att du har en egenskap som behöver vara ett objekt med alla egenskaper från UserData och en extra extraProperty.

Du kan skriva det så här.

fancyUserData: UserData & { extraProperty: string }

Med intersections typer kan du lägga till egenskaper ad hoc.

Användning i Angular

För att använda dessa typer i Angular kan du skapa en generell typ på din komponent som skulle se ut ungefär så här:

@Component({
  selector: 'example'
  template: `<h1>example</h1>`
})
export class ExampleComponent<T extends UserData> {}

Nu kan du ha data av typen T som måste ha alla UserData-egenskaper, och sedan lägga till vilka andra egenskaper du vill.

Så kort sagt, nej, du kan egentligen inte bygga dynamiska typer, och definitivt inte i komponentens konstruktor. Däremot kan du använda de metoder jag nämnde ovan för att utöka och forma dina gränssnitt efter behov.

Svar #2

För att lägga till en egenskap kan du definiera samma gränssnitt igen och lägga till de ytterligare egenskaperna:

interface SquareConfig {
  color?: string;
  width?: number;
}

interface SquareConfig {
  name: string;
}

let c: SquareConfig = {name:'jack', color:'blue'}
console.log(c) // {"name": "jack", "color": "blue"}

Relaterade artiklar