"Computed" property in Typescript

user_13302 0
Viewed 35530

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?

angular typescript properties c#
3 Answers

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.

user_1591450

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.

user_73163650

You can also define getters and setters in JavaScript.

Try this in your Component Class:

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

And then in your Template:

Simply use fullName like this:

<p>{{ fullName }}</p>
user_26222920
Related