TypeScript中使用string类型参数索引对象报ts(7053)错误如何解决？

TypeScript 会自动推导slides对象的类型为仅包含barkingRoadProject一个固定键的结构，不允许任意字符串作为索引访问。你定义的slideName参数是宽泛的string类型，TS无法保证所有传入的字符串都恰好是slides上存在的合法键，因此抛出7053类型错误。

方案1：收窄参数类型（最推荐，类型安全最高） #

直接提取slides的所有键作为参数类型，从编译层面限制只能传入合法的键：

const slides = {
    "barkingRoadProject": ['boomerang-site1.jpg', 'boomerang-site2.jpg', 'boomerang-site3.jpg']
}

// 提取slides所有键的联合类型，此处等价于 type SlideKey = 'barkingRoadProject'
type SlideKey = keyof typeof slides

export const SlideSupply = (slideName: SlideKey): string[] => {
    return slides[slideName];
}

方案2：给对象添加索引签名（适合键不固定的动态场景） #

如果后续slides会动态新增其他键，可明确声明允许任意字符串作为键：

// 声明索引签名：键为string类型，值为string[]类型
const slides: Record<string, string[]> = {
    "barkingRoadProject": ['boomerang-site1.jpg', 'boomerang-site2.jpg', 'boomerang-site3.jpg']
}

export const SlideSupply = (slideName: string): string[] => {
    // 传入不存在的键时返回空数组兜底，避免运行时报错
    return slides[slideName] ?? [];
}

方案3：类型断言（适合确定参数100%合法的临时场景） #

如果不想修改原有类型定义，且能保证所有传入的slideName都是合法键，可直接添加断言跳过检查：

const slides = {
    "barkingRoadProject": ['boomerang-site1.jpg', 'boomerang-site2.jpg', 'boomerang-site3.jpg']
}

export const SlideSupply = (slideName: string): string[] => {
    return slides[slideName as keyof typeof slides];
}

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