如何循环遍历打字稿中的两个对象键？

Question

我制作了一个 Vector class，但语法有问题。

这是我的代码：

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

这是我遇到的语法问题：

如您所见，“return new Vector(x,y)”行中的“x”和“y”表示“变量 'x' 在分配前已使用”... “v[component]”表示“类型 'Extract<keyof this, string>' 不能用于索引类型 'Vector'”。

我不知道我做错了什么，代码可以工作，但我想正确地编写它。

Answer 1

但是，如果您打算在方法中使用循环，则需要缩小编译器的键类型：

TS Playground link

您可以手动完成：

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

或者对范围的其余部分使用 assertion function：

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

就我个人而言，这就是我的做法。

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

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

    return res;
  }

我拼凑了一个快速沙箱示例 here

如何循环遍历打字稿中的两个对象键？

How to loop through two object keys in typescript?

syntax-error

typescript