TypeScript属性映射字符串字面量问题：无法访问属性

嘿，我明白你遇到的问题了！咱们先拆解下问题根源，再一步步搞定它。

问题出在哪？ #

你写的{ [s in keyof ValidAttributes]: string; }这里有个小误区：ValidAttributes是"FOO" | "BAR" | "BAZ"这种字符串字面量的联合类型，而keyof作用在它上面时，实际上返回的是keyof string——也就是字符串原型上所有方法的名称（比如toString、charAt这些）。这就导致你的attributes被错误定义成了一个包含所有字符串方法、且值都是string类型的对象，自然找不到FOO、BAR这些你真正想要的属性。

正确的写法 #

你需要直接遍历ValidAttributes这个联合类型本身，而不是用keyof去取它的键。修正后的代码如下：

type ValidAttributes = "FOO" | "BAR" | "BAZ";
interface MyInterface {
  // 去掉keyof，直接用ValidAttributes作为遍历的键集合
  attributes: { [s in ValidAttributes]: string; };
}
const doSomething = (data: MyInterface): void => {
  const foo = data.attributes.FOO; // 现在可以正常访问啦
  const bar = data.attributes["BAR"]; // 这个也没问题了
};

额外小技巧（可选） #

如果你的场景允许某些属性是可选的，可以在映射时加上?标记：

attributes: { [s in ValidAttributes]?: string; };

这样attributes对象就可以只包含部分ValidAttributes里的属性，不会触发类型错误。

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