Nrthugu

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?

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:

export interface Person {

    firstName: string;

    lastName : string;

    jobTitle : string;



    fullName : string;

}



class SimplePerson implements Person {



    // ...



    get fullName(): string {

        return this.firstName + " " + this.lastName;

    }

}

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.

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>