如何在TypeScript中实现数字对象到对应px字符串对象的严格类型约束？

给定常量对象：

const nums = {
  100: 2,
  200: 4,
  300: 8,
  400: 16,
} as const;

需要创建一个与nums键一一对应的对象pixels，要求：

• 仅包含nums的所有键
• 每个键对应的值必须是nums中对应数字拼接'px'的字符串（比如键100必须对应'2px'）

此前的实现只能约束键的范围和值的格式，无法保证键值的严格匹配，比如下面的错误写法不会触发类型错误：

export const spacingStrings = {
  100: '8px',
  200: '2px',
  300: '2px',
} as const satisfies SpacingMap;

解决方案 #

通过TypeScript的映射类型创建严格的键值绑定类型，确保每个键对应唯一的字面量字符串类型：

1. 定义严格的映射类型

type StrictPixelsMap = {
  [K in keyof typeof nums]: `${typeof nums[K]}px`;
};

这个类型会遍历nums的每个键K，将对应值的类型固定为${nums[K]}px的字面量类型（比如键100对应类型'2px'，键200对应'4px'）。

2. 创建符合要求的对象
   使用as const satisfies语法，既保留对象的字面量类型，又确保键值严格匹配：

const pixels = {
  100: '2px',
  200: '4px',
  300: '8px',
  400: '16px',
} as const satisfies StrictPixelsMap;

此时如果给某个键赋值错误的字符串（比如100: '4px'），TypeScript会直接抛出类型错误，完全满足键值严格绑定的需求。

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