具有复杂属性类型的对象字面量常量的类型定义

Question

我想要一个 TypeScript 对象字面量常量，其中包含已知但很长的属性列表，这些属性都具有相同的类型。下面是类型的定义和只有三个属性的简化示例。

type ContainerSize = {
  height: string;
  width: string;
  threshold?: number;
};

const CONTAINER_SIZES = {
  '/': { height: '65px', width: '220px' },
  '/info': { height: '220px', width: '220px' },
  default: { height: '700px', width: '500px', threshold: 480 },
} as const;

上面定义的问题是属性类型不是ContainerSize。这可以通过使用Record<string, ContainerSize> 作为对象类型来解决：

const CONTAINER_SIZES: Record<string, ContainerSize> = {
  '/': { height: '65px', width: '220px' },
  '/info': { height: '220px', width: '220px' },
  default: { height: '700px', width: '500px', threshold: 480 },
} as const;

但现在任何字符串都是有效的键，因此CONTAINER_SIZES['not-existing'] 不会显示错误。

除了像下面的示例那样两次写入属性之外，还有其他方法来定义对象字面量吗？

const CONTAINER_SIZES: Record<'/' | '/info' | 'default', ContainerSize> = {
  '/': { height: '65px', width: '220px' },
  '/info': { height: '220px', width: '220px' },
  default: { height: '700px', width: '500px', threshold: 480 },
} as const;

Answer 1

两种选择：

1. 通过先单独定义对象来推断键

2. 返回ContainerSize的无操作函数

从前一个对象推断键

必须可以在一个步骤中完成此操作，但您可以通过以下两个步骤完成此操作：

const _sizes = {
    '/': { height: '65px', width: '220px' },
    '/info': { height: '220px', width: '220px' },
    default: { height: '700px', width: '500px', threshold: 480 },
} as const;
const CONTAINER_SIZES: Record<keyof typeof _sizes, ContainerSize> = _sizes;

Playground link

正如您所指出的（谢谢！），这会丢失属性值的只读方面（CONTAINER_SIZE 的属性值和ContainerSize 对象的值），我们可以用Readonly 修复它两个地方：

const CONTAINER_SIZES: Readonly<Record<keyof typeof _sizes, Readonly<ContainerSize>>> = _sizes;

Playground link

无所事事的功能

当我希望在提供值（开发人员体验的东西）时强制执行 ContainerSize 时，我使用了另一个选项，即拥有一个无操作功能：

const cs = (size: ContainerSize) => size;

然后：

const CONTAINER_SIZES = {
    '/':      cs({ height: '65px', width: '220px' }),
    '/info':  cs({ height: '220px', width: '220px' }),
    default:  cs({ height: '700px', width: '500px', threshold: 480 }),
};

这为传递到cs 的对象文字中的属性名称等提供了自动完成功能。 （在我做这个的一个项目中，我很快发现我想在函数中添加一些跨属性验证逻辑，所以最终它不是什么都不做......）

Playground link