typescript - 输入动态对象引用

Question

我的 assets 文件夹有一个索引文件，其中包含如下所示的分组图像导出

// assets/index.ts
export const UI_ELEMENTS = {
  BUTTON_BLUE_ACTIVE: require("./button_blue_active.png"),
  BUTTON_BLUE_DISABLED: require("./button_blue_disabled.png"),
  BUTTON_BLUE_HOVER: require("./button_blue_hover.png")
}

然后我继续在我的一些文件中使用它

import { UI_ELEMENTS } from "./assets/index.ts"

const buttonImage = UI_ELEMENTS[`BUTTON_BLUE_${variant}`]

如您所见，变体是动态的，即可以是 ACTIVE DISABLED 或 HOVER，具体取决于具体情况。

buttonImage 出现以下类型错误

[ts] Element implicitly has an 'any' type because type '{ BUTTON_BLUE_ACTIVE: any; BUTTON_BLUE_DISABLED: any; BUTTON_BLUE_HOVER: any; }' has no index signature. [7017]

我想弄清楚我应该如何键入我的 UI_ELEMENTS 以保持自动完成事件并消除此错误。

Answer 1

在您的情况下，您应该明确地将每个对象标记为任意对象。避免开始使用 --noImplicitAny 的诱惑，这会消除消息。

export const UI_ELEMENTS = {
  BUTTON_BLUE_ACTIVE: require("./button_blue_active.png") as any,
  BUTTON_BLUE_DISABLED: require("./button_blue_disabled.png") as any,
  BUTTON_BLUE_HOVER: require("./button_blue_hover.png") as any
}

或者您可以对以下内容使用更多的类型安全性，它强制所有对象在文字中都具有相同的类型，就像您拥有的一样(除了因为它们是任何对象，所以该部分对您的情况没有多大帮助。您仍然可以使用以下方法完成类型完成:

export type ObjectOf<T> = { [k: string]: T };

/**
 * Allows you to enforce that an object's properties are all of the same type and creates a type safe object that you
 * get auto complete for.
 *
 * Example:
 *
 * const Ab = createObjectOf<number>({a: true}); // Compile error
 *
 * const Ab = createObjectOf<number>({a: 1, b: 2});
 * Ab.a.toFixed() (with autocompletion)
 */
export function createObjectOf<TValue>() {
    return function <T extends ObjectOf<TValue>>(v: T) {
        return v;
    };
}

export const UI_ELEMENTS = createObjectOf<any>()({
  BUTTON_BLUE_ACTIVE: require("./button_blue_active.png"),
  BUTTON_BLUE_DISABLED: require("./button_blue_disabled.png"),
  BUTTON_BLUE_HOVER: require("./button_blue_hover.png")
})