"Computed" property in Typescript

Question

Folks, I'm in the middle of "learning by doing" in Angular 6 & 7, and I came across this issue a number of times.

Imagine I have a class/interface/type - e.g. Person - with a few properties, that are returned by a Web API call - something like this:

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

What I'd like to be able to is show the full name (e.g. "FirstName + [Space] + LastName") in e.g. an Angular grid (AG-Grid) or someplace else - where I cannot use a concat expression or anything, but I need to refer to a single property on the class/interface/type.

In C#, I would just create a property

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

and be done with it - but how can I do this in Typescript?? From what I've been reading and researching, this seems to be unsupported - really?!?!!? How can that be??? Seems like such a simple and often-used operation - what's the reason this doesn't exist in Typescript?? Or does it exist - and I just haven't found the way to do this in TS?

Answer 1

If it's an interface then there's no syntax, because all properties in JavaScript can have getter/setter functions instead of being exposed fields. It's an implementation concern.

BTW members in TypeScript use camelCase not 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;     } } 

---

_{I note that it is confusing that TypeScript's designers chose to use the keyword readonly to denote "readable" properties in an interface when it doesn't actually prohibit an implementation from also having a property setter - I would have preferred the syntax to be something like readable fullName: string; and readwrite fullName: string; - C#/.NET has the same problem: the IReadOnlyList<T> interface does not mean implementations have to be immutable.}

Answer 2

Javascript supports get and set when defining a property (mostly using Object.defineProperty).

Apparently there's an handy syntax for it in typescript (for 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}`;   } } 

Regarding interfaces, I'm not sure such a thing is possible since their sole purpose is data description not implementation.