Website-Suche

angular - „Berechnete“ Eigenschaft in Typescript

Leute, ich bin gerade dabei, "learning by doing" in Angular 6 & 7 zu machen, und ich bin diesem Problem schon mehrmals begegnet.

Stellen Sie sich vor, ich habe eine Klasse/Schnittstelle/Typ - z.B. Person - mit ein paar Eigenschaften, die von einem Web-API-Aufruf zurückgegeben werden - so etwas wie folgt:

export interface Person {
    FirstName: string;
    LastName: string;
    JobTitle: string;
    // so other properties - not relevant to this question
}

Was ich gerne tun würde, ist den vollständigen Namen (z. B. "Vorname + [Leerzeichen] + Nachname") in z. B. einem Angular-Grid (AG-Grid) oder an einem anderen Ort anzuzeigen - wo ich keinen concat-Ausdruck oder ähnliches verwenden kann, sondern auf eine einzelne Eigenschaft der Klasse/Des Interfaces/Des Typs verweisen muss.

In C# würde ich einfach eine Eigenschaft erstellen

string FullName { get { return $"{FirstName} {LastName}"; } }

und damit fertig sein - aber wie kann ich das in Typescript tun?? Nach dem, was ich gelesen und recherchiert habe, scheint dies nicht unterstützt zu werden - wirklich?!?!!? Wie kann das sein??? Scheint wie eine so einfache und oft verwendete Operation - was ist der Grund, dass es das in Typescript nicht gibt?? Oder gibt es das doch - und ich habe nur nicht den Weg gefunden, dies in TS zu tun?

Antwort #1

Wenn es sich um ein Interface handelt, gibt es keine Syntax, weil alle Eigenschaften in JavaScript Getter-/Setter-Funktionen anstelle von offenen Feldern haben können. Es ist eine Implementierungsangelegenheit.

Übrigens verwenden Member in TypeScript camelCase und nicht TitleCase:

export interface Person {
    // get + set:
    firstName: string;
    lastName : string;
    jobTitle : string;

    // get-only:
    readonly fullName : string;
}

class SimplePerson implements Person {

    public firstName: string; // value-property (“field”)
    public lastName: string;
    public jobTitle: string;

    get fullName(): string { // read-only property with getter function (this is not the same thing as a “function-property”)
        return this.firstName + " " + this.lastName;
    }
}

Ich stelle fest, dass es verwirrend ist, dass die Designer von TypeScript das Schlüsselwort readonly gewählt haben, um "lesbare" Eigenschaften in einem Interface zu kennzeichnen, obwohl es eine Implementierung nicht tatsächlich daran hindert, auch einen Property-Setter zu haben - ich hätte die Syntax lieber so gesehen wie readable fullName: string; und readwrite fullName: string; - C#/.NET hat dasselbe Problem: Das IReadOnlyList<T>-Interface bedeutet nicht, dass Implementierungen unveränderlich sein müssen.

Antwort #2

Javascript unterstützt get und set, wenn eine Eigenschaft definiert wird (meistens unter Verwendung von Object.defineProperty).

Offensichtlich gibt es eine praktische Syntax dafür in TypeScript (für Klassen):

class MyClass{
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string){
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }
}

Bezüglich Schnittstellen bin ich mir nicht sicher, ob so etwas möglich ist, da ihr einziger Zweck die Datenbeschreibung und nicht die Implementierung ist.

Verwandte Artikel