如何为TypeScript状态映射定义严格类型的CSS类名对象？

你需要用映射类型来确保每个状态键和对应的CSS类名严格绑定，Record之所以不行，是因为它会让所有键对应相同的类型集合，没法限制键值的一一对应关系。

正确的类型定义如下：

type State = 'active' | 'disabled';
type StateClassMap = {
  [K in State]: `component-name—-${K}`;
};

这样定义后，StateClassMap会被TypeScript推断为：

{
  active: "component-name—-active";
  disabled: "component-name—-disabled";
}

此时如果给active键赋值"component-name—-disabled"，TypeScript会直接抛出类型错误，完全符合你的需求。

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