TypeScript显式类型标注后为何仍将不可变类型识别为索引类型？

结论：完全可行 #

可以同时实现selectors数组元素的Selector类型校验和CSSFactory返回明确键名的强类型对象，核心是既要保留as const带来的字面量类型信息，又要对数组元素做类型约束。

原有写法无效的原因 #

在你给出的「无效写法」中，显式给selectors标注了readonly Selector[]类型：

const selectors: readonly Selector[] = [...] as const

TypeScript中，显式类型标注的优先级高于as const的类型推断。此时typeof selectors被强制解析为readonly Selector[]，而Selector接口里的k是宽泛的string类型，导致KeyUnion<typeof selectors>最终变成string，CSSFactory自然只能返回{ [x: string]: string }这种索引签名类型，丢失了具体的键名信息。

而「有效写法」虽然保留了字面量类型，但没有做Selector类型校验——如果数组里混入不符合Selector结构的元素，TypeScript不会报错。

实现方案 #

方案1：用satisfies语法（TypeScript 4.9+推荐） #

satisfies是专门用来校验类型兼容性但不覆盖原有推断类型的语法，完美适配需求：

const selectors = [
    { k: 'base', v: 'hub_toolbar', t: SelectorTypes.Id },
    { k: 'windowManager', v: 'window-manager-toolbar', t: SelectorTypes.Class },
    // 下面这行会触发类型错误，不符合Selector要求
    // { k: 'invalid', v: 'test', t: 'wrong-type' }
] as const satisfies readonly Selector[];

const toolBarSelectors = CSSFactory<KeyUnion<typeof selectors>>(selectors);
// toolBarSelectors 类型为 { base: string; windowManager: string }

方案2：用泛型辅助函数（兼容低版本TS） #

如果你的TypeScript版本低于4.9，可以定义一个泛型函数来做类型约束，同时保留字面量类型：

// 辅助函数：校验输入符合readonly Selector[]，并返回原类型
const createValidSelectors = <T extends readonly Selector[]>(selectors: T) => selectors;

// 使用方式
const selectors = createValidSelectors([
    { k: 'base', v: 'hub_toolbar', t: SelectorTypes.Id },
    { k: 'windowManager', v: 'window-manager-toolbar', t: SelectorTypes.Class },
    // 不符合Selector的元素会报错
    // { k: 'bad', v: 'test', t: 'invalid' }
] as const);

const toolBarSelectors = CSSFactory<KeyUnion<typeof selectors>>(selectors);
// 同样得到明确的键名类型

额外优化：让CSSFactory自动推断类型 #

可以修改CSSFactory的泛型定义，省去手动传入KeyUnion<typeof selectors>的步骤，让类型推断更自动：

const CSSFactory = <T extends readonly Selector[]>(
    selectors: T,
    defaultAttribute: string = 'data-testid',
): { [key in T[number]['k']]: string } => {
    // 示例实现逻辑
    return selectors.reduce((acc, curr) => {
        let selector: string;
        switch (curr.t) {
            case SelectorTypes.Id:
                selector = `#${curr.v}`;
                break;
            case SelectorTypes.Class:
                selector = `.${curr.v}`;
                break;
            case SelectorTypes.Attribute:
                selector = `[${curr.a || defaultAttribute}="${curr.v}"]`;
                break;
            case SelectorTypes.Type:
                selector = curr.v;
                break;
            case SelectorTypes.CSS:
                selector = curr.v;
                break;
            default:
                selector = '';
        }
        acc[curr.k as keyof typeof acc] = selector;
        return acc;
    }, {} as { [key in T[number]['k']]: string });
};

// 使用时无需手动传泛型，自动推断结果类型
const selectors = [
    { k: 'base', v: 'hub_toolbar', t: SelectorTypes.Id },
    { k: 'windowManager', v: 'window-manager-toolbar', t: SelectorTypes.Class },
] as const satisfies readonly Selector[];

const toolBarSelectors = CSSFactory(selectors);
// 自动得到 { base: string; windowManager: string }

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