arrays - 如何让 typescript 在以数组为目标的代理中对 set 方法感到满意？

Question

我正在使用 Typescript 构建一个 Vue3 网络应用程序，这让我很容易理解我的 CS 学位的操作系统讲座，它基本上是一个简单的组装虚拟机，可以接受 .asm 文件并执行逐步执行，同时突出显示寄存器中的变化和内存阵列。到目前为止，除了在内存块的值发生变化时突出显示内存块之外，我能够实现所有目标。我不能使用观察者，因为如果新值没有不同，它们不会触发，但即使发生这种情况，我也需要突出显示该块。就像将 1 分配给以前为 1 的位置一样。所以我选择了自定义代理。由于我使用键值对象作为寄存器，因此我能够在打字稿中毫无问题地做到这一点。但是当我尝试对内存结构做同样的事情时（但这次使用数组而不是对象），尝试设置代理处理程序时，打字稿对我尖叫。错误是这个->“类型'字符串|符号'不可分配给类型'数字'”，如果我不断言道具是一个数字，它不会让我这样做。

obj[prop] = value;

你能给我一些关于我应该如何做的建议吗，这是我定义代理的代码段。

import { ref, Ref, computed } from "vue";

export const MEM_SIZE = 100;

const m: number[] = new Array(MEM_SIZE).fill(0);

export const memory: Ref<Array<number | string[]>> = ref(
  new Proxy(m, {
    set: (target, prop: number, value) => {
      // console.log(`${key} was changed`);
      const register = document.querySelector(
        `.memblock-${prop}`
      ) as HTMLElement;
      register.classList.add("highlighted");
      target[prop] = value;
      return true;
    },
  })
);

然后打字稿警告我这样说->

"Type '(target: number[], prop: number, value: any) => true' is not assignable to type '(target: number[], p: string | symbol, value: any, receiver: any) => boolean'.
  Types of parameters 'prop' and 'p' are incompatible.
    Type 'string | symbol' is not assignable to type 'number'.
      Type 'string' is not assignable to type 'number'.ts(2322)"

但如果我做这样的事情，

import { ref, Ref, computed } from "vue";

export const MEM_SIZE = 100;

const m: number[] = new Array(MEM_SIZE).fill(0);

export const memory: Ref<Array<number | string[]>> = ref(
  new Proxy(m, {
    set: (target, prop, value) => {
      // console.log(`${key} was changed`);
      const register = document.querySelector(
        `.memblock-${prop as string}`
      ) as HTMLElement;
      register.classList.add("highlighted");
      target[prop] = value;
      return true;
    },
  })
);

打字稿给了我这个错误，

"Element implicitly has an 'any' type because index expression is not of type 'number'."

对此我能做些什么吗？

我让它与一个对象（用于寄存器）一起工作得很好，我是这样做的。

import { ref, Ref, computed } from "vue";
import { Reg } from "../types/reg";

export const reg = ref(
  new Proxy(
    {
      a: 0,
      b: 0,
      c: 0,
      d: 0,
      e: 0,
      f: 0,
      sp: 0,
      acc: 0,
      pc: 0,
      ivec: 0,
      int: 0,
      timer: 0,
      halt: false,
    } as {
      [key: string]: number | boolean;
    } & Reg,
    {
      set: (target, key: string, value) => {
        // console.log(`${key} was changed`);
        const register = document.querySelector(
          `.register-${key}`
        ) as HTMLElement;
        register.classList.add("highlighted");
        target[key] = value;
        return true;
      },
    }
  )
);

标签： arraystypescriptvuejs3proxieses6-proxy