How to loop through two object keys in typescript?

Question

I made a Vector class but I have some problem with the syntax.

This is my code:

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);
  }
}

Here is the syntax problem I have:

As you see "x" and "y" in line "return new Vector(x,y)" say "Variable 'x' is used before being assigned"... And for the "v[component]" says "Type 'Extract<keyof this, string>' cannot be used to index type 'Vector'."

I don't know what I have done wrong, the code works but I want to write it correctly.

Why not the simple and straightforward way? The loop just complicates things without providing any benefit as far as I can see... Dynamic loops over property keys are problematic when you're trying to use a static type system (TypeScript). They're possible, but problematic. — T.J. Crowder
– T.J. Crowder, Commented Nov 14, 2021 at 19:24
Side note: Please don't use the conditional operator where an if statement is the logical choice. There's literally no reason to do so. if (component === "x") { /*x = ...*/ } else { /*y = ...*/ }. — T.J. Crowder
– T.J. Crowder, Commented Nov 14, 2021 at 19:28
That was my first idea but I want to complicate things to learn how to use it. I came from use JavaScript so I wanna do things more complicated xD — Luis Sulbarán
– Luis Sulbarán, Commented Nov 14, 2021 at 19:39

jsejcksn · Accepted Answer · 2021-11-14 21:13:41Z

2

@T.J. Crowder has commented some sound advice. However, if you are intent on using a loop in your method, you'll need to narrow the key type for the compiler:

TS Playground link

You can do it manually:

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;
}

Or by using an assertion function for the remainder of the 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;
}

answered Nov 14, 2021 at 21:13

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jhecht Over a year ago

I'd also be curious to know OP's reason for not just doing new Vector(this.x + v.x, this.y + v.y)

T.J. Crowder Over a year ago

There's no reason to repeat x and y, just use type K = keyof Vector;. (I'd also use Key or VectorKey for clarity, rather than K.)

jsejcksn Over a year ago

@T.J.Crowder No, that still produces a compiler error: playground

T.J. Crowder Over a year ago

@jsejcksn - Doh! Of course. (I've had my coffee now. :-) ) But I'd solve that by excluding function property keys rather than repeating x and y. Also, I'd strongly suggest not using empty assertion functions (in dev; they can be empty in prod after testing, e.g. via assert or similar). So something like this.

BenMcLean981 · Accepted Answer · 2021-11-14 21:41:57Z

0

Personally this is the way I would do it.

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

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

    return res;
  }

I threw together a quick sandbox example here

answered Nov 14, 2021 at 21:41

BenMcLean981

8488 silver badges16 bronze badges

1 Comment

jsejcksn Over a year ago

This produces a variation of the same compiler error in the question: TS Playground link

Collectives™ on Stack Overflow

How to loop through two object keys in typescript?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related