TypeScript中是否可限制变量可选值？如何约束接口属性取值范围

在TypeScript中完全可以实现属性取值的固定范围限制，你需要的效果通过字符串字面量联合类型即可实现。

直接在接口内定义 #

你预期的写法里多了多余的等号和大括号，正确写法直接在属性类型位置用|拼接允许的字符串值即可：

export interface Iphone {
    url: string;
    name: string;
    year: number;
    color: 'black' | 'blue' | 'light';
    number_of_cameras: number;
    popularity: boolean;
    quantity: number;
}

抽离可复用类型（推荐） #

如果这套颜色限定规则需要在多个接口、变量定义里复用，可以单独把允许的颜色值抽成类型别名，后续维护只需要修改一处：

type IphoneAvailableColor = 'black' | 'blue' | 'light';

export interface Iphone {
    url: string;
    name: string;
    year: number;
    color: IphoneAvailableColor;
    number_of_cameras: number;
    popularity: boolean;
    quantity: number;
}

实现效果 #

完成定义后，TypeScript会在静态检查阶段校验color的赋值：

• 赋值为'black'/'blue'/'light'三个值时，类型校验通过
• 传入其他任意字符串、非字符串值时，TS会直接抛出类型错误，编辑器也会实时标红提示

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