web-dev-qa-db-fra.com

Propriété "calculée" dans Typescript

Mes amis, je suis en train d’apprendre par l’exercice Angular 6 & 7, et j’ai rencontré ce problème à plusieurs reprises.

Imaginez que j'ai une classe/interface/type - par exemple. Person - avec quelques propriétés, qui sont renvoyées par un appel d'API Web - quelque chose comme ceci:

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

Ce que j'aimerais pouvoir faire, c’est d’afficher le nom complet (par exemple, "Prénom + [Espace] + Nom"), par exemple. un Angular grid (AG-Grid) ou un autre endroit - où je ne peux pas utiliser une expression concat ou quoi que ce soit, mais je dois faire référence à une propriété unique de la classe/interface/type.

En C #, je créerais simplement une propriété

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

et en finir avec cela - mais comment puis-je faire cela en dactylographie? D'après ce que j'ai lu et recherché, cela semble être non pris en charge - vraiment?!? !!? Comment cela peut-il être ??? Cela ressemble à une opération aussi simple et souvent utilisée - quelle est la raison pour laquelle cela n’existe pas en dactylographie? Ou existe-t-il - et je n'ai tout simplement pas trouvé le moyen de faire cela dans TS? 

c#angulartypescriptproperties
2
marc_s

S'il s'agit d'une interface, il n'y a pas de syntaxe car toutes les propriétés de JavaScript peuvent avoir des fonctions getter/setter au lieu d'être des champs exposés. C'est un problème de mise en œuvre.

Les membres BTW dans TypeScript utilisent camelCase:

export interface Person {
    firstName: string;
    lastName : string;
    jobTitle : string;

    fullName : string;
}

class SimplePerson implements Person {

    // ...

    get fullName(): string {
        return this.firstName + " " + this.lastName;
    }
}
4
Dai

Vous pouvez également définir getters et setters en JavaScript.

Essayez ceci dans votre classe de composant:

person: Person;
...
// You got the person Object from your Backend API.
...
// Now
get fullName() { 
  return `${this.person.firstName} ${this.person.lastName}`; 
}

Et ensuite dans votre modèle:

Utilisez simplement fullName comme ceci:

<p>{{ fullName }}</p>
1
SiddAjmera

Javascript prend en charge get et set lors de la définition d'une propriété (principalement à l'aide de Object.defineProperty).

Apparemment, il existe une syntaxe pratique pour cela dans TypeScript (pour les classes):

class MyClass{
  firstName: string;
  lastName: string;

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

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

En ce qui concerne les interfaces, je ne suis pas sûr que cela soit possible car leur seul objectif est de décrire les données et non de les implémenter. 

1
Vivick

Pourrait essayer d'utiliser un tableau de chaîne;

var fullName: Array<string> = Array<string>();
var firstName: string = 'Bob';
var lastName: string = 'Boberanne';
fullName.Push(firstName);
fullName.Push(lastName);

En html: 

<p>{{fullName.join(' ')}}</p>
<p>{{[fistname, lastName].join(' ')}}</p>

Dans TypeScript:

fullName.join(' ');
[firstName, lastName].join(' ');
0
RetroCoder