TypeScript访问嵌套全局对象 解决string无法作为索引类型报错

TypeScript报错的核心原因是GLOBALS.global没有显式声明字符串索引签名，你直接用任意string类型的paramName去索引对象时，TS无法确定索引的合法性，就会抛出隐式any的错误。你之前定义的全局类型只给根对象加了索引签名，没有覆盖到global、related的子层级，所以不生效。如果直接设为any会丢失类型推导的自动补全能力，所以我们需要做「保留已知结构推导 + 扩展通用索引签名」的类型定义。

第一步：定义通用类型并给GLOBALS声明类型 #

先定义参数值的通用结构，再给GLOBALS加交叉类型，既保留现有属性的自动补全，又支持字符串索引：

// 定义所有参数的取值类型：要么是字符串数组，要么是键为字符串的对象
type ParamValue = string[] | Record<string, unknown>;

// 先从现有GLOBALS推导已知结构，加as const可以让推导的类型更精确，自动补全更准确
const GLOBALS = {
    // Used by 2 or more components
    'global': {
        'colors': ['red', 'blue', 'green', 'yellow'],
        'icons': {
            'home': 'icon-home',
            'power': 'icon-power',
            'server': 'icon-server',
        }
    },
    // Related to components
    'related': {
        'component-1': {
            'direction': ['left', 'right', 'up', 'down'],
        },
        'component-2': {
            'direction': ['up', 'down'],
            'icon-set': {
                'arrow': { 'up': 'icon-arrow-up-1', 'down': 'icon-arrow-down-1' },
                'arrow-simple': { 'up': 'icon-arrow-up-2', 'down': 'icon-arrow-down-2' },
                'arrow-circle': { 'up': 'icon-arrow-up-3', 'down': 'icon-arrow-down-3' },
            }
        },
    }
} as const;

// 给GLOBALS声明最终类型，兼顾自动补全和任意索引合法性
type TypedGlobals = {
    global: Record<string, ParamValue> & typeof GLOBALS.global;
    related: Record<string, Record<string, ParamValue>> & typeof GLOBALS.related;
}

const typedGlobals = GLOBALS as unknown as TypedGlobals;

第二步：修改getGlobalParamList函数 #

把原来的GLOBALS替换成加了类型的typedGlobals，同时补全边界判断：

const getGlobalParamList = (paramName: string): string[] => {
    if (typedGlobals.global.hasOwnProperty(paramName)) {
        const paramList = typedGlobals.global[paramName];
        if (Array.isArray(paramList)) return paramList as string[];
        // 加null判断，避免typeof null返回object导致的运行时报错
        if (typeof paramList === 'object' && paramList !== null) return Object.keys(paramList);
        console.error(`Global parameter name ${paramName} is neither an array nor an object.`);
        return [];
    }
    console.error(`Undefined global parameter name ${paramName}.`);
    return [];
}

注：你示例里调用的getGlobalParamList('color')是笔误，正确的键名是colors，调用getGlobalParamList('colors')就会返回正确的数组。

第三步：实现组件专属参数获取函数 #

按照同样的逻辑实现getComponentParamList即可：

const getComponentParamList = (componentName: string, paramName: string): string[] => {
    // 先判断组件是否存在
    if (!typedGlobals.related.hasOwnProperty(componentName)) {
        console.error(`Undefined component name ${componentName}.`);
        return [];
    }
    const componentConfig = typedGlobals.related[componentName];
    // 再判断组件下的参数是否存在
    if (!componentConfig.hasOwnProperty(paramName)) {
        console.error(`Undefined parameter name ${paramName} for component ${componentName}.`);
        return [];
    }
    const paramList = componentConfig[paramName];
    if (Array.isArray(paramList)) return paramList as string[];
    if (typeof paramList === 'object' && paramList !== null) return Object.keys(paramList);
    console.error(`Parameter ${paramName} for component ${componentName} is neither an array nor an object.`);
    return [];
}

测试调用示例：

getComponentParamList('component-2', 'icon-set') // 返回 ['arrow', 'arrow-simple', 'arrow-circle']
getComponentParamList('component-1', 'direction') // 返回 ['left', 'right', 'up', 'down']

该方案既不会报TS的隐式any错误，输入参数时VS Code还会自动补全已经定义好的全局参数名、组件名、组件参数名，完全满足需求。

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