TypeScript：如何为对象数组编写接口，每个对象表示一个类，每个类的函数名相同

我正在导入Circle，将其插入一个名为

nodeObjects

的数组中，然后在该数组上循环，并为数组中的每个对象调用

update

和

draw

。我可以确保插入阵列的所有对象都具有

update

和

draw

功能

我曾尝试过编写接口，但我发现了错误

Argument of type '(object: NodeObjectInterface) => any' is not assignable to parameter of type '(value: object, index: number, array: object[]) => void'.
  Types of parameters 'object' and 'value' are incompatible.
    Type '{}' is missing the following properties from type 'NodeObjectInterface': update, draw ts(2345)

带有标记的错误点的代码

import { Circle } from './circle';

interface NodeObjectInterface {
  update(): void;
  draw(): void;
}

class Nodes {

  canvasWidth: number;
  canvasHeight: number;
  circle: object;
  nodeObjects: object[];

  constructor(width: number, height: number) {
    this.canvasWidth = width;
    this.canvasHeight = height;
    this.circle = new Circle(this);
    this.nodeObjects = [this.circle];
  }
  update(tick: number) {
    this.nodeObjects.forEach((object: NodeObjectInterface) =>
//                                           ^ error
      object.update(tick)
    );
  }

  draw(ctx: CanvasRenderingContext2D) {

    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);

    this.nodeObjects.forEach((object: NodeObjectInterface) =>
//                                           ^ error
    object.draw(ctx)
  );
  }
}

export { Nodes };

导入代码的圆圈是

interface NodesInterface {
    canvasWidth: number;
    canvasHeight: number;
  }

class Circle {
  canvasWidth: number;
  canvasHeight: number;
  constructor(nodes: NodesInterface) {
    this.canvasWidth = nodes.canvasWidth;
    this.canvasHeight = nodes.canvasHeight;
  }
  update(tick: number) {
     //
  }
  draw(ctx: CanvasRenderingContext2D) {
    ctx.fillStyle = 'red';
    ctx.fillRect(30, 30, 30, 30);
  }
}

export { Circle };

更新

export interface ClickedInterface {
  click(event: MouseEvent): void;
  mouseWheel(event: MouseEvent): void;
  mouseDown(event: MouseEvent): void;
  mouseUp(event: MouseEvent): void;
  mouseMove(event: MouseEvent): void;
}

interface NodeObjectInterface {
  update(tick: number): void;
  draw(ctx: CanvasRenderingContext2D): void;
}

class Nodes implements ClickedInterface {

  canvasWidth: number;
  canvasHeight: number;
  circle: object;
  nodeObjects: NodeObjectInterface[];

  constructor(width: number, height: number) {
    this.canvasWidth = width;
    this.canvasHeight = height;
    this.circle = new Circle(this);
    this.nodeObjects = [this.circle];
//                         ^ error
    // tslint:disable-next-line: no-unused-expression
    new InputHandler(this);
  }
  update(tick: number) {
    this.nodeObjects.forEach((object) =>
      object.update(tick)
    );
  }

  draw(ctx: CanvasRenderingContext2D) {

    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);

    this.nodeObjects.forEach((object) =>
    object.draw(ctx)
  );
  }

  click(event: MouseEvent) {
    console.log('click');
  }
  mouseWheel(event: MouseEvent) {
    console.log('wheel');
  }
  mouseDown(event: MouseEvent) {
    console.log('down');
  }
  mouseUp(event: MouseEvent) {
    console.log('up');
  }
  mouseMove(event: MouseEvent) {
    console.log('move');
  }
}

export { Nodes };

将唯一的错误保留为

(property) Nodes.circle: object
Type '{}' is missing the following properties from type 'NodeObjectInterface': update, draw ts(2739)

节点的父节点

import React, { useEffect, useRef } from 'react';
import { Nodes } from './nodes';
import './scss/App.scss';

const App: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const canvasWidth = 820;
  const canvasHeight = 620;
  useEffect(() => {
    if (canvasRef.current) {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');
      if (ctx) {
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        const nodes = new Nodes(canvasWidth, canvasHeight);
        let now = 0;
        const tickLoop = (epoch: number) => {
          const tick = epoch - now;
          now = epoch;
          ctx.clearRect(0, 0, canvasWidth, canvasHeight);
          nodes.update(tick);
          nodes.draw(ctx);
          requestAnimationFrame(tickLoop);
        };
        requestAnimationFrame(tickLoop);
      }
    }
  });

  return (
    <canvas
      ref={canvasRef}
      width={canvasWidth}
      height={canvasHeight}
    >
    </canvas>
  );
};

export { App };

import React，{useffect，useRef}来自“React”；
从“./Nodes”导入{Nodes}；
导入“/scss/App.scss”；
常量应用程序：React.FC=（）=>{
const canvasRef=useRef（null）；
常量画布宽度=820；
常数画布高度=620；
useffect（（）=>{
如果（canvasRef.current）{
const canvas=canvasRef.current；
const ctx=canvas.getContext（'2d'）；
如果（ctx）{
canvas.width=画布宽度；
canvas.height=画布高度；
const nodes=新节点（画布宽度、画布高度）；
现在设=0；
常量循环=（历元：数字）=>{
const tick=纪元-现在；
现在=新纪元；
ctx.clearRect（0，0，画布宽度，画布高度）；
节点。更新（勾选）；
节点绘制（ctx）；
requestAnimationFrame（滴答声循环）；
};
requestAnimationFrame（滴答声循环）；
}
}
});
返回(
);
};
导出{App}；

节点对象不应该有

节点对象接口

类型吗？可能？我该如何表达呢？在

节点

类中，替换

节点对象：对象[]与
节点对象：节点对象接口[]
this.nodeObjects=[this.circle]
现在给出错误
类型“{}”缺少类型“NodeObjectInterface”中的以下属性：更新，绘制ts（2739）
我明白了，这意味着
圆
类还必须实现
NodeObjectInterface
。因此，
类圆
应替换为
类圆实现节点对象接口
。它已经有了
draw
和
update
方法，所以我假设这就是您想要的。