PIXI.js 加载器共享资源纹理检测名称中的拼写错误答案

【问题标题】：PIXI.js loader shared resources texture detect typo in namePIXI.js 加载器共享资源纹理检测名称中的拼写错误
【发布时间】：2021-02-11 02:33:10
【问题描述】：

在我们的游戏中，我们使用 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)
}

当我们调用项目时，我们这样写

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 或其他东西应该在这种情况下显示错误。我们如何确保它显示错误？

【问题讨论】：

标签： typescript visual-studio-code pixi.js

【解决方案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

【讨论】：