CODEWITHSUNDEEP
angularjsangulartypescript
mxle
mxle

Reputation: 481

How to compute a property on a class in typescript?

In javascript I would have done it like this:

function a(b,c) {this.foo = b; this.bar = c; this.yep = b+c}
// undefined
b = new a(1,2)
// a {foo: 1, bar: 2, yep: 3}

But I haven't been able to find any way to do it in typescript. None of this works:

class A {
    foo: number;
    bar: number;
    yep: foo + bar;
}

class A {
    foo: number;
    bar: number;
    yep: this.foo + this.bar;
}

class A {
    foo: number;
    bar: number;
    let yep:number = this.foo + this.bar;
}

class A {
    foo: number;
    bar: number;
    yep: number;

    constructor() {
        this.yep = this.foo + this.bar;
    }
}

class A {
    foo: number;
    bar: number;

    get yep(): number {
        return this.foo + this.bar;
    }
}

class A {
    foo: number;
    bar: number;
    yep: function () {return this.get("foo") + this.get("bar")};
}

I initialize it like this: 

somevar: A = {
    foo: 1,
    bar: 2
}

Also I tried this:

somevar: A = {
    foo: 1,
    bar: 2,
    this.yep: this.foo + this.bar
}

Thank you for your help. This math will have be more difficult and I'll need it more than once, so I don't want to put it in the template.

Upvotes: 1

Views: 6685

Answers (5)

seidme
seidme

Reputation: 13048

The example of the TS class with a computed property:

class Person {
    firstName: string;
    lastName: string;
    fullName: string;

    constructor (firstName: string,  lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.fullName = firstName + ' ' + lastName;
    }
}

let person = new Person('John', 'Doe');
console.log(person.fullName); // => John Doe

The example using the getter:

class Person {
    firstName: string;
    lastName: string;

    constructor (firstName: string,  lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    get fullName(): string {
        return this.firstName + ' ' + this.lastName;
    }
}

let person: Person = new Person('John', 'Doe');
console.log(person.fullName); // => John Doe

Upvotes: 6

Søren Høyer Kristensen
Søren Høyer Kristensen

Reputation: 454

Another variant.

You will not lose type safety doing it this way with Object.assign.

Remember, unless you specifically enable strictNullChecks (recommended), TypeScript will always consider undefined | null assignable to anything.

interface IA {
  foo: number;
  bar: number;
}

class BaseClass {
  constructor(obj: IA) {
    if (obj) Object.assign(this, obj);
  }
}

class A extends BaseClass implements IA {
  public foo: number;
  public bar: number;

  constructor(obj: IA) {
    super(obj);
  }

  public get yep(): number {
    return this.foo + this.bar;
  }
}

const somevar: A = new A({
  foo: 1,
  bar: 2,
})

console.log(somevar)

Upvotes: 0

cartant
cartant

Reputation: 58400

A is a class and not an interface, so you need to construct an instance. You cannot simply assign an object literal. It's not enough for the 'shape' to be compatible; it must be an instance of the class.

Variables declared with private, protected or public in the constructor will be added to the class.

For example:

class A {
  public yep: number;

  constructor(
      public foo: number, // will be transpiled in the constructor to: this.foo = foo;
      public bar: number  // will be transpiled in the constructor to: this.bar = bar;
  ) {
        this.yep = foo + bar; 
    }
}

const a: A = new A(1, 2);

Upvotes: 3

Wintergreen
Wintergreen

Reputation: 234

Try this,

 export class A {


    public foo: number;
    public bar: number;
    public yep: number
    constructor(a: number, b: number) {

        this.bar = a;
        this.foo = b;
        this.yep = this.bar + this.foo;

    }

    public get(): number {
        return this.yep;
    }
}

   let a = new A(1, 2);
        a.get();

Upvotes: 0

Kaddath
Kaddath

Reputation: 6151

if you want to do this as a class:

class A {
    foo: number;
    bar: number;
    yep: number;
    constructor(a: number, b: number) {
        this.foo = a;
        this.bar = b;
        this.yep = a + b;
    }
    //add getter or setter functions
}

let inst = new A(1, 2);

Upvotes: 0

Related Questions