typescript - PIXI.js 加载器共享资源纹理检测名称中的错字

Question

在我们的游戏中，我们使用 typescript、pixi.js、vscode、eslint。
我们有一个像这样的图像文件字典

export function getAllImages(): {name: string, extension: string}[] {
    return [
        {name: 'tile_lumber', extension: '.svg'},
        {name: 'tile_brick', extension: '.svg'},
        ....
    ]
}

这是这样加载的

export function loadImages() {
    for(const img of getAllImages()) {
        PIXI.Loader.shared.add(img.name, getImagePath(img.name + img.extension), { crossOrigin: true })
    }

    PIXI.Loader.shared
        .on('progress', loadProgressHandler)
        .load(assetsFinishedLoading)
}

当我们调用 item 时，我们这样写

export function getBannerForPlayer(playerColor: PlayerColors): PIXI.Texture {
    switch(playerColor) {
        case PlayerColors.Bronze: return PIXI.Loader.shared.resources.banner_bronze.texture
        case PlayerColors.Silver: return PIXI.Loader.shared.resources.banner_silver.texture
        case PlayerColors.Gold: return PIXI.Loader.shared.resources.banner_goldf.texture
        ....
    }
}

即使没有名为 banner_goldf 的纹理，此代码也不会在编译器中给出错误。应该是 banner_gold .我们不小心推送了这段代码，它导致了游戏中的错误。
理想情况下，vscode、tsc 或其他东西应该在这种情况下显示错误。我们如何确保它显示错误？

Answer 1

相反，如果有一个定义列表，您可以为每个图像定义一个静态变量，如下所示:

export class ImageDefinition {
    name: string
    extension: string
    texture: PIXI.Texture | undefined
}

export class Images {
    static icon_player: ImageDefinition = {name: 'icon_player', extension: '.svg', texture: undefined }
}

图像可以加载

for(const img in Images) {
    const image: ImageDefinition = Images[img]
    PIXI.Loader.shared.add(image.name, getImagePath(image.name + image.extension), { crossOrigin: true })
}

加载图像后，您可以将加载的纹理存储在静态变量中

export function assetsFinishedLoading() {
    for(const img in Images) {
        const image: ImageDefinition = Images[img]
        image.texture = PIXI.Loader.shared.resources[image.name].texture
    }
}

您现在可以引用纹理，例如:

const texture = Images.icon_player.texture