如何使用'any'类型变量作为键？解决TS索引类型报错

问题原因 #

你遇到的报错本质是：process.env.PUBLIC_DOMAIN在TypeScript中的类型是string | undefined，你的三元判断只排除了null，但没处理undefined的情况（环境变量未配置时会是undefined），导致domain的类型仍然是string | undefined。而urls对象的键是明确的'jp'和'us'，用undefined或非合法键的字符串去索引对象，就会触发TS的类型检查错误。

解决方案 #

这里提供几种简洁且类型安全的处理方式：

方案1：用as const锁定对象键的类型

先给urls对象添加as const，让TypeScript推断出具体的键类型，而非宽泛的string：

// urls.ts
export const urls = {
    'jp' : '/images/tea.svg',
    'us' : '/images/coffee.svg',
} as const;

// 导出键类型，后续复用
export type DomainKey = keyof typeof urls;

然后在.tsx文件中处理环境变量，确保domain只能是合法的键类型：

import { urls, DomainKey } from './urls';

const rawDomain = process.env.PUBLIC_DOMAIN;
// 空值合并运算符??处理undefined/null，同时用类型断言收窄范围
const domain: DomainKey = (rawDomain as DomainKey) ?? 'us';

<Image src={urls[domain]} />

方案2：用类型守卫做合法性校验

如果不想用类型断言，可以通过类型守卫确保环境变量的值是合法键：

import { urls } from './urls';

type DomainKey = keyof typeof urls;

const rawDomain = process.env.PUBLIC_DOMAIN;
let domain: DomainKey = 'us';

// 检查rawDomain是否存在且是urls的合法键
if (rawDomain && rawDomain in urls) {
    domain = rawDomain as DomainKey;
}

<Image src={urls[domain]} />

方案3：手动定义键类型并约束对象

如果需要更明确的类型声明，可以手动定义键的联合类型：

// urls.ts
type DomainKey = 'jp' | 'us';
export const urls: Record<DomainKey, string> = {
    'jp' : '/images/tea.svg',
    'us' : '/images/coffee.svg',
};

然后处理环境变量：

import { urls, DomainKey } from './urls';

const domain = (process.env.PUBLIC_DOMAIN as DomainKey | undefined) ?? 'us';

<Image src={urls[domain]} />

额外优化建议 #

• 优先使用??（空值合并运算符）替代三元判断，它会同时处理null和undefined，代码更简洁。
• 把域名对应的图片路径和键类型统一放在一个文件中维护，避免后续新增域名时重复修改类型。

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