What is the process for calculating a class property in typescript?

Question

What is the process for calculating a class property in typescript?

If I were writing this in JavaScript, it would look like:

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}

However, I've been struggling to achieve the same in TypeScript. None of the following approaches seem to work:

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 tried initializing it as follows:

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

Additionally, I experimented with this approach:

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

Your assistance on resolving this matter is greatly appreciated. The complexity of the calculation requires a more efficient solution that can be reused without embedding it directly into the template.

angularjs angular typescript

Answer 1

Answer №1

Here is an illustration of a TypeScript class featuring a calculated property:

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

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

let individual = new Human('Alice', 'Smith');
console.log(individual.fullName); // => Alice Smith

Another example utilizing the getter:

class Individual {
    firstName: string;
    lastName: string;

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

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

let person1: Individual = new Individual('Bob', 'Johnson');
console.log(person1.fullName); // => Bob Johnson

Answer 2

Here is an illustration of a TypeScript class featuring a calculated property:

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

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

let individual = new Human('Alice', 'Smith');
console.log(individual.fullName); // => Alice Smith

Another example utilizing the getter:

class Individual {
    firstName: string;
    lastName: string;

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

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

let person1: Individual = new Individual('Bob', 'Johnson');
console.log(person1.fullName); // => Bob Johnson

Answer 3

Answer №2

X represents a category rather than an interface, requiring the creation of an instance. Merely assigning an object literal will not suffice. The 'shape' must not only be compatible but also match an instance of the category.

Any variables defined as private, protected, or public within the constructor will become part of the category.

For instance:

class X {
  public attribute: number;

  constructor(
      public parameter1: number,
      public parameter2: number
  ) {
        this.attribute = parameter1 + parameter2; 
    }
}

const x: X = new X(3, 5);

Answer 4

X represents a category rather than an interface, requiring the creation of an instance. Merely assigning an object literal will not suffice. The 'shape' must not only be compatible but also match an instance of the category.

Any variables defined as private, protected, or public within the constructor will become part of the category.

For instance:

class X {
  public attribute: number;

  constructor(
      public parameter1: number,
      public parameter2: number
  ) {
        this.attribute = parameter1 + parameter2; 
    }
}

const x: X = new X(3, 5);

Answer 5

Answer №3

For those who prefer organizing it as a class:

class B {
    x: number;
    y: number;
    z: number;
    constructor(a: number, b: number) {
        this.x = a;
        this.y = b;
        this.z = a * b;
    }
    // include getter or setter methods
}

let instance = new B(3, 4);

Answer 6

For those who prefer organizing it as a class:

class B {
    x: number;
    y: number;
    z: number;
    constructor(a: number, b: number) {
        this.x = a;
        this.y = b;
        this.z = a * b;
    }
    // include getter or setter methods
}

let instance = new B(3, 4);

Answer 7

Answer №4

Give this a shot:

class MyClass {
    constructor() {
        this.myVar = 100;
    }
    
    getMyValue() {
        return this.myVar;
    }
}

const myInstance = new MyClass();
myInstance.getMyValue();

Answer 8

Give this a shot:

class MyClass {
    constructor() {
        this.myVar = 100;
    }
    
    getMyValue() {
        return this.myVar;
    }
}

const myInstance = new MyClass();
myInstance.getMyValue();

Answer 9

Answer №5

A different approach.

Type safety remains intact when utilizing Object.assign in this manner.

It's important to note that without the explicit use of strictNullChecks (highly recommended), TypeScript will default to considering undefined | null as assignable to any type.

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)

Answer 10

A different approach.

Type safety remains intact when utilizing Object.assign in this manner.

It's important to note that without the explicit use of strictNullChecks (highly recommended), TypeScript will default to considering undefined | null as assignable to any type.

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)

What is the process for calculating a class property in typescript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Unable to retrieve form data like the username from my AngularJS controller

AngularJS - How to loop through a div to display all items

Executing Grunt: Setting up a dual Connect and Express server to operate on one port

Using the original type's keys to index a mapped type

AngularJS in action for a new Widget Framework

Add a npm module without type definitions

Handling a callback after the completion of another action in Angular 2

Identifying data types in arrays using TypeScript type predicates

An error has occurred in Angular2 and Ionic 2, where there is a TypeError preventing the reading of the property 'addEventListener' in the InAppBrowser

How can I arrange the ng-class based on the clicked item's order?

Utilizing ngClassEven and ngClassOdd in Angular 2 for Improved Styling

A DropdownListFor with a predefined value using ng-model

Updating Dropdown Selection in Angular 9 and 10

Assigning a value to the ng-model in AngularJs based on the user's selection from a Dropdown Menu

What is the process for creating custom event bindings in AngularJS?

Is it possible for me to add a string to a URL as long as the string is not null?

Expanding a piece of Bootstrap within an Angular project results in exceeding the "budget" during CI/CD implementation

An issue has occurred: Cannot access the properties of an undefined object (specifically 'controls')

sending a collection of image data arrays wrapped in FormField objects from Angular to Express

Enhancing data validation and converting strings to dates with Nest.js - DTO approach