如何在TypeScript中限制属性类型为百分比值？

要实现仅接收百分比值的变量类型，你可以利用TypeScript的模板字面量类型约束字符串格式，结合数字类型满足需求：

定义核心类型 #

// 字符串需为「数字+%」格式（支持整数/小数），同时兼容纯数字类型
type Percentage = `${number}%` | number;

使用示例 #

// 合法赋值
let validPercent1: Percentage = "30%"; // 标准百分比字符串
let validPercent2: Percentage = 30; // 纯数字形式的百分比
let validPercent3: Percentage = "25.75%"; // 带小数的百分比字符串

// 非法赋值（TypeScript编译阶段直接报错）
let invalidPercent1: Percentage = "foo"; // 非百分比格式字符串
let invalidPercent2: Percentage = "30"; // 缺少%符号
let invalidPercent3: Percentage = "abc%"; // 数字部分为非数字内容

进阶：限制为整数百分比 #

如果需要强制字符串只能是整数加%的格式，可以改用bigint约束数字部分：

type IntegerPercentage = `${bigint}%` | number;

// 合法
let validIntPercent: IntegerPercentage = "40%";
// 非法（小数字符串会触发报错）
let invalidIntPercent: IntegerPercentage = "40.5%";

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