TypeScript如何限制DeviceSize类型必须包含min-width且匹配Size属性值

实现方案 #

要实现你需要的严格类型校验，可以借助 TypeScript 4.1 以上版本支持的模板字面量类型，配合常量类型收窄实现精准的字符串格式匹配，完整实现如下：

type SizeType = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

// 用as const收窄size对象的属性为具体的字符串字面量，而非宽泛的string类型
const size = {
    sm: '576px',
    md: '768px',
    lg: '1024px',
    xl: '1440px',
    xxl: '2560px',
} as const;

// 根据需求二选一即可：
// 1. 要求属性值【必须包含】对应格式的min-width子串（前后可加其他媒体规则）
type DeviceSize = {
  [K in SizeType]: `${string}(min-width: ${typeof size[K]})${string}`
};
// 2. 要求属性值【严格等于】`(min-width: xxx)`格式
// type DeviceSize = {
//   [K in SizeType]: `(min-width: ${typeof size[K]})`
// };

interface Theme {
    device: DeviceSize;
    // 如果需要device的属性可选，改成 device: Partial<DeviceSize> 即可
}

校验效果 #

合法赋值（无类型报错）

const theme: Theme = {
    device: {
        sm: `(min-width: ${size.sm})`,
        md: `(min-width: ${size.md})`,
        lg: `(min-width: ${size.lg})`,
        xl: `(min-width: ${size.xl})`,
        xxl: `(min-width: ${size.xxl})`,
        // 如果用的是「包含子串」的类型，下面这种扩展写法也能通过校验
        // sm: `@media screen and (min-width: ${size.sm}) and (max-width: 767px)`
    },
}

非法赋值（触发类型报错）

const badTheme: Theme = {
    device: {
        sm: `(min-width: ${size.sm})`,
        md: `(min-width: ${size.md})`,
        lg: `(min-width: 100)`, // 报错：值不匹配模板要求
        xl: `(min-width: 220px)`, // 报错：值不匹配模板要求
        xxl: `abc`, // 报错：值不匹配模板要求
    },
}

核心逻辑说明 #

• as const 会把size对象的属性类型从通用的string收窄为具体的字符串字面量（比如sm的类型会变成'576px'而非string），才能让模板字面量精准匹配对应尺寸值
• 模板字面量支持灵活扩展规则，如果后续需要增加max-width、媒体类型等匹配要求，调整模板结构即可

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