typescript optional property with a getter

Question

This is a simplified example:

class PersonParms{
    name:string;
    lastName:string;
    age?:number;
    get fullName(){return this.name + " " + this.lastName;}
}

class Person{
    constructor(prms:PersonParms){
    }
}

new Person({name:'John',lastName:'Doe'})  // ts error: Property 'fullName' is missing in type '{ name: string; lastName: string; }'.

The idea is to pass a literal object as the intizalizer of PersonParms but having that getter you can neither declare the getter optional or add the property to the object literal. Is there another way to achieve it?

Consider defining an interface `interface IPersonParms { name:string; lastName:string; age?:number; readonly fullName?: string; }`. Casting object literal to class doesn't seem to be useful - getter won't magically appear there anyway, you'll need to create an instance of a `PersonParms` class. — Aleksey L., Feb 11 '18 at 06:47

score 13 · Answer 1 · answered Feb 11 '18 at 08:03

Very interesting. I think, you should report an issue to TypeScript, because methods can be optional (see below), but property getters not. It is strange.. As a workaround I can suggest two variants. A nice one:

class PersonParms {
    name:string;
    lastName:string;
    age?: number;

    getFullName?() {return this.name + " "+this.lastName;}
}

And a second one, that is hacky, because there we make all the properties optional when passing to constructor.

class PersonParms {
    name:string;
    lastName:string;
    age?: number;

    get fullName(){return this.name + " "+this.lastName;}
}

class Person{
    constructor(prms: Partial<PersonParms>){
    }
}

I second that. It is quite misleading to have to assign a value to a property that's (intentionally) read-only in the initialization - and that's effectively where the case described here takes us. — Wojtek, Jul 19 '18 at 19:21

score 6 · Answer 2 · answered Apr 27 '20 at 18:53

6

As of April 2020, there is NO way to implement this.

There is an inconclusive PR for this: https://github.com/microsoft/TypeScript/pull/16344

A proposed solution via an interface is presented here: https://github.com/microsoft/TypeScript/pull/16344

Personally, the solution did not meet my needs, and I rather declared the property as private.

Hopefully, we can have better luck in the future.

answered Apr 27 '20 at 18:53

Santiago M. Quintero

1,237
15
22

1

Your comment saved me hours of searching for a solution that doesn't exist. I felt there is no possible way this was oversight, must just be me not understanding some typescript syntax. But nope... this essential, fundamental thing was indeed NOT implemented, and now typescript is preventing me from doing what should be possible. Awesome. Setting to private is not a work-around, and I haven't found one yet. – dapug Oct 14 '21 at 21:55

score 2 · Answer 3 · answered Feb 10 '18 at 21:58

2

Is there another way to achieve it?

Here is how I would do it:

class Person {
  constructor(public config: { name: string, lastName: string }) {}
  age?: number;
  get fullName() { return this.config.name + " " + this.config.lastName; }
}

new Person({ name: 'John', lastName: 'Doe' })

answered Feb 10 '18 at 21:58

basarat

261,912
58
460
511

Yes but I will use PersonParms as base in several other classes so the optional getter should be in PersonParns to not have to repeat it in all the subclasses. – tru7 Feb 10 '18 at 23:00

Bogdan · Accepted Answer · 2018-11-24T08:07:27.000

2

I found this solution which is ok for me:

class Person {
  name?:string;
  lastName?:string;
  age?: number;
  fullName?:string;

  constructor(public config: { name: string, lastName: string }) {
    Object.defineProperty(this,'fullName',{
           get(){return this.name + " " + this.lastName;}
          });

}

edited Nov 24 '18 at 08:07

answered Nov 24 '18 at 06:30

Bogdan

656
15
25

This worked for my case as well. I am deprecating a property `address` in favor of `addressLine1`, but while callers switch over, I need to support both. I wanted a way to set `addressLine1` to the same value of `address` if `address` was set by the caller. https://tsplay.dev/NdElMm – uPaymeiFixit Mar 23 '23 at 05:09

score 1 · Answer 5 · answered Jan 19 '19 at 20:52

If you creates a new instance of PersonParms then the error will be gone.

class PersonParms{
    name:string;
    lastName:string;
    age?:number;
    get fullName(){return this.name + " "+this.lastName;}
}

class Person{
    constructor(prms:PersonParms){
    }
}

const personParams = new PersonParms();
personParams.name = 'John';
personParams.lastName = 'John';
new Person(personParams)  // No error because this is an instance of PersonParams

I am not sure where/how do you use PersonParms.fullname but in your case I would use this:

interface PersonParms{
    name:string;
    lastName:string;
    age?:number;    
}

class Person implements PersonParms{
    name: string;
    lastName: string;
    age?:number
    constructor(prms: PersonParms) {
        this.name = prms.name;
        this.lastName = prms.lastName;
        this.age = prms.age;
    }

    get fullName(){return this.name + " "+this.lastName;}
}

const person = new Person({ name: 'John', lastName: 'Doe' });

console.log(person.fullName); // John Doe

score 1 · Answer 6 · answered Jul 10 '21 at 17:20

Remember that optional is a type concept. A getter is an implementation. The implementation can return an optional type. In a class that implements an interface with an optional readonly property, the class may leave off the getter. See this answer get and set in TypeScript

score 0 · Answer 7 · answered Nov 24 '18 at 06:51

0

class PersonParms {
  name: string;
  lastName: string;
  age?: number;
  fullName?: string = this.name + ' ' + this.lastName;
}

class Person {
  constructor(prms: PersonParms) {
  }
}

new Person({ name: 'John', lastName: 'Doe' });

answered Nov 24 '18 at 06:51

Akshay

52
2

Hi Akshay, instead of just showing the code you should also explain what you've changed and why it solves the problem. – JJJ Nov 24 '18 at 07:14
1

Here I made only one change. fullName?: string = this.name + ' ' + this.lastName; – Akshay Nov 24 '18 at 07:23
It is set in constructor. Is not alternative to getter setter – ahmadalibaloch Dec 14 '19 at 18:12

score 0 · Answer 8 · answered Sep 29 '20 at 21:18

If you cast the object this will prevent the compile time error.

export class IndividualModel {
    constructor(individual: IndividualModel = null) {
        if (individual) {
            this.individualKey = individual.individualKey;
            this.firstName = individual.firstName;
            this.lastName = individual.lastName;
        }
    }

    individualKey: string;
    firstName?: string;
    lastName?: string;
    get fullName(): string {
        return `${this.lastName}, ${this.firstName}`;
    }
}

const individual = new IndividualModel(<IndividualModel>{ individualKey: 'some-key' });

score 0 · Answer 9 · answered Dec 25 '22 at 23:11

If you don't want to make every property optional using Partial, you can just omit the getters.

class PersonParms{
        name:string;
        lastName:string;
        age?:number;
        get fullName(){return this.name + " " + this.lastName;}
    }
    
    class Person{
        constructor(prms: Omit<PersonParms, 'fullName'> ){
        }
    }
    
    new Person({name:'John',lastName:'Doe'})

score -3 · Answer 10 · answered Nov 24 '18 at 07:39

-3

   class PersonParms {
      name: string;
      lastName: string;
      age?: number;

     getFullName?(): string | null { return this.name + ' ' + this.lastName; }
  }

  class Person {
     constructor(prms: PersonParms) {
     }
  }
 new Person({ name: 'John', lastName: 'Doe' });

answered Nov 24 '18 at 07:39

Akshay

52
2

`getFullName?()` is not a valid typescript syntax – Alex Parloti Jun 25 '20 at 11:42

typescript optional property with a getter

10 Answers10