我给你最干净、最标准、正好满足需求的写法：
支持：数字 100 / 字符串 100 / 百分比 100%
禁止：auto / 100px / abc / 其他

直接用这个升级版类型：

export interface Size {
  width?: number | `${number}` | `${number}%`;
  height?: number | `${number}` | `${number}%`;
}

它到底支持什么？

✅ 允许

• width: 100
• width: "100"
• width: "50%"
• width: "100.5%"
• 不传（因为是可选）

❌ 禁止（完美符合你的要求）

• width: "auto" → 报错
• width: "100px" → 报错
• width: "abc" → 报错
• width: true → 报错
• width: "100 %"（带空格）→ 报错

逐行解释

width?: 
  number        // 数字：100
  | `${number}` // 纯数字字符串："100"
  | `${number}%`; // 百分比字符串："50%"、"100%"

• ${number}% 是 TypeScript 内置模板字面量类型
• 它只匹配：数字 + 百分号这种格式
• 任何其他字符都会直接报错（包括 auto、px、rem 等）

如果你想更严格（不允许小数%）

用这个：

export interface Size {
  width?: number | `${number}` | `${integer}%`;
  height?: number | `${number}` | `${integer}%`;
}

这样 "50.5%" 也会被禁止，只允许 "100%"、"0%" 这种整数百分比。

总结

• 想要 支持 100%、禁止 auto → 用 ${number}%
• 这是 TypeScript 最标准、最优雅的方案
• 类型安全、自动提示、自动校验，完美适配前端样式宽高场景