Dfyjkt

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>

Could try using an array of string;

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

In html:

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

In typescript:

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