What is the best way to iterate through two object keys in TypeScript?

Question

What is the best way to iterate through two object keys in TypeScript?

I recently created a Vector class but I am encountering some issues with the syntax.

Here is the code snippet:

export class Vector {
  x: number;
  y: number;

  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }

  add(v: Vector) {
    var x: number, y: number;

    for (var component in this) {
      component == "x"
        ? (x = this[component] + v[component])
        : (y = this[component] + v[component]);
    }

    return new Vector(x, y);
  }
}

The issue lies in the syntax here:

https://i.sstatic.net/KPdA3.png

In the statement "return new Vector(x, y)", the error message appears as "Variable 'x' is used before being assigned". Additionally, when referencing "v[component]", the error states that "Type 'Extract<keyof this, string>' cannot be used to index type 'Vector'."

Although the code functions properly, it's important for me to rectify these syntax errors and write it correctly.

typescript syntax-error

Answer 1

Answer №1

@T.J. Crowder made a valuable comment. If you insist on using a loop in your function, you have to specify the key type for the compiler:

TS Playground link

You can manually do it this way:

add (v: Vector): Vector {
  const vec = new Vector();

  for (const key in vec) {
    type K = 'x' | 'y';
    vec[key as K] = this[key as K] + v[key as K];
  }

  return vec;
}

Alternatively, you can use an assertion function within the remaining scope:

function assertType <T = unknown>(value: unknown): asserts value is T {}

add (v: Vector): Vector {
  const vec = new Vector();

  for (const key in vec) {
    assertType<'x' | 'y'>(key);
    vec[key] = this[key] + v[key];
  }

  return vec;
}

Answer 2

@T.J. Crowder made a valuable comment. If you insist on using a loop in your function, you have to specify the key type for the compiler:

TS Playground link

You can manually do it this way:

add (v: Vector): Vector {
  const vec = new Vector();

  for (const key in vec) {
    type K = 'x' | 'y';
    vec[key as K] = this[key as K] + v[key as K];
  }

  return vec;
}

Alternatively, you can use an assertion function within the remaining scope:

function assertType <T = unknown>(value: unknown): asserts value is T {}

add (v: Vector): Vector {
  const vec = new Vector();

  for (const key in vec) {
    assertType<'x' | 'y'>(key);
    vec[key] = this[key] + v[key];
  }

  return vec;
}

Answer 3

Answer №2

In my personal opinion, this is the method I prefer to use:

  add(v: Vector): vector {
    const res = new Vector();

    Object.keys(this).forEach(component => {
      res[component] = this[component] + v[component];
    });

    return res;
  }

I quickly put together a sandbox demonstration here

Answer 4

In my personal opinion, this is the method I prefer to use:

  add(v: Vector): vector {
    const res = new Vector();

    Object.keys(this).forEach(component => {
      res[component] = this[component] + v[component];
    });

    return res;
  }

I quickly put together a sandbox demonstration here

What is the best way to iterate through two object keys in TypeScript?

Answer №1

Answer №2

Similar questions

Exploring the nuances of checking lists in TypeScript

Obtaining data from a TypeScript decorator

Having trouble making API calls from the NextJS endpoint

Having trouble opening a JPEG file that was generated using the Writefile Api in Ionic-Cordova

The enigma of TypeScript

What is the best way to bring a JavaScript library into a TypeScript project if the library includes a declaration file?

What is the best way to bring in local modules within the browser environment using Playwright?

Raycast failing to detect objects that have been displaced from their original starting position

Tips for ensuring a function in Angular is only executed after the final keystroke

Troubleshooting Typescript compilation using tsc with a locally linked node package

A function injected into a constructor of a class causes an undefined error

The creation of a Firebase user account with the specified email and password

Issue with Jest mock function failing to trigger axios instance function causing it to return undefined

Exploring the Way Constructors are Utilized with Decorators in TypeScript

Tips for preventing the need to convert dates to strings when receiving an object from a web API

Make TextField with type number forcibly show dot as decimal separator

Leveraging ES6 Symbols in Typescript applications

Utilizing Angular and TypeScript: The best approach for managing this situation

Having Trouble with Ionic 2's Loading Controller

When using React and Material UI, there seems to be an issue with the Popover component where calling `setAnchorEl(null)` on the onClose event does not properly