Angular中如何定义仅接受两个指定值的字符串类型变量

完全可以在TypeScript中实现该需求，你最初写的colorScheme?: string = 'positive|negative'是错误写法——这行代码只是把变量的默认值设置为了内容是positive|negative的普通字符串，不会产生任何取值约束效果。

标准实现方案 #

使用TS的字符串字面量联合类型即可实现严格的取值范围限定，写法如下：

// 定义取值范围被约束的自定义类型
type ColorScheme = 'positive' | 'negative';

// 给变量/属性标注该类型，赋值时就只能选允许的两个值
let colorScheme?: ColorScheme;

// 以下赋值合法
colorScheme = 'positive';
colorScheme = 'negative';

// 赋值其他任意字符串都会触发TS类型报错
// colorScheme = 'invalid-value'; // 类型校验不通过

Angular组件@Input场景的注意点 #

你提到最初在Angular组件中给@Input()属性标注该类型时不生效，通常是两类问题导致：

• 模板传值为动态生成的字符串：如果传入的是运行时拼接、计算得到的字符串，TS静态编译阶段无法识别其具体值，会抛出类型错误，确认传值合规的前提下可以通过类型断言处理；如果是固定传值，直接在模板中写死字面量即可正常校验
• 类型作用域问题：自定义的ColorScheme类型需要正确导出，保证组件使用方可以访问到该类型定义，否则类型约束不会生效

你后续验证通过的@Input() colorScheme?: ColorScheme;写法是完全符合TS规范的标准实现，后续如果需要新增允许的取值，直接在联合类型中追加对应的字符串字面量即可，不需要额外引入枚举就能实现字符串取值的枚举约束。

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