如何在TypeScript中创建带方法的Sprite对象？

问题描述 #

我希望我的sprite对象能包含所需的所有Sprite及其对应信息，这一点已在JavaScript中实现，现在学习TypeScript并尝试编写等价代码。

原JavaScript代码 #

const sprites = {
    addImage(image, width, height)
    {
        this[image] = new Image();
        this[image].src = "./assets/images/" + image + ".png";
        this[image].width = width;
        this[image].height = height;
    }
};

尝试的TypeScript代码（存在错误） #

let sprites: {
    name: string,
    src: HTMLImageElement,
    width: number,
    height: number
    addSprite: (image: string, width: number, height: number) => {
        this[image] = new Image();
    }
}

补充说明 #

我需要保留sprites[imageName]的调用格式，用于后续绘制：

gameCanvas.drawImage(sprites[element.image], element.x, element.y, sprites[element.image].width, sprites[element.image].height);

解决方案 #

你的TypeScript类型定义不符合实际对象结构，正确的方式是使用索引签名来定义动态添加的图片属性，同时明确方法类型：

正确的TypeScript实现 #

// 定义Sprites类型：允许任意字符串键对应HTMLImageElement，同时包含addImage方法
type Sprites = {
  [key: string]: HTMLImageElement;
  addImage: (image: string, width: number, height: number) => void;
};

// 实现sprites对象
const sprites: Sprites = {
  addImage(image, width, height) {
    const img = new Image();
    img.src = `./assets/images/${image}.png`;
    img.width = width;
    img.height = height;
    this[image] = img;
  }
};

说明 #

1. 索引签名[key: string]: HTMLImageElement：允许sprites对象通过任意字符串名称（图片名）访问对应的HTMLImageElement实例，完美匹配你需要的sprites[imageName]调用格式。
2. 明确addImage方法类型：指定方法的参数类型和返回值为void，TypeScript能正确推断方法内部this的指向，避免this[image]的报错。
3. 类型安全：当你调用sprites[element.image]时，TypeScript会自动识别它是HTMLImageElement类型，能正确提示width、height等属性，保证代码的类型安全性。

内容的提问来源于stack exchange，提问作者LadyMistLeaf