如何在TypeScript中动态定义类型实现SX样式键自动补全？

方法1：使用satisfies关键字（TypeScript 4.9+推荐） #

利用TypeScript的satisfies关键字，既能约束每个样式属性符合SxPropType类型，又能保留对象自身的键名信息，实现自动补全：

import { SxPropType } from '@app/theme/types';

const style = {
  text: {
    color: 'blue',
    fontWeight: 700,
    fontSize: 20,
    letterSpacing: '1.2px',
    marginBottom: 7,
  },
  // 新增样式键时直接添加，无需手动更新类型
  subtitle: {
    color: 'gray',
    fontSize: 16,
  },
} satisfies Record<string, SxPropType>;

export default style;

方法2：基于对象推导类型（兼容低版本TS） #

如果你的TypeScript版本低于4.9，可以先让TS自动推导原始对象的键名，再通过索引类型约束值的类型：

import { SxPropType } from '@app/theme/types';

// 先定义未指定类型的原始对象，让TS自动捕获键名
const rawStyle = {
  text: {
    color: 'blue',
    fontWeight: 700,
    fontSize: 20,
    letterSpacing: '1.2px',
    marginBottom: 7,
  },
  // 新增键直接添加即可
  title: {
    color: 'red',
    fontSize: 24,
  },
};

// 自动生成类型：键为rawStyle的所有键，值为SxPropType
type AutoStyle = { [K in keyof typeof rawStyle]: SxPropType };

// 断言为约束后的类型，确保每个值符合SxPropType规范
const style = rawStyle as AutoStyle;

export default style;

原理说明 #

最初直接将style标注为SxPropType时，TypeScript会丢弃对象的具体键名信息，仅保留SxPropType的结构约束，导致自动补全失效。上述两种方法都通过保留对象自身的键名推导，同时约束每个值符合SxPropType，既满足类型安全，又实现了键名的自动补全，新增样式属性时无需手动维护类型定义。

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