如何为Angular 2组件的@Input参数设置允许值并触发编译错误？

这问题问得很到位啊——要在编译阶段就把非法输入拦下来，比运行时验证靠谱多了！咱们可以结合TypeScript联合类型和Angular的严格模板检查来实现，分两步走：

1. 用TypeScript联合类型约束输入类型 #

首先定义一个只包含允许值的联合类型，把@Input的类型从string替换成这个联合类型：

// 先声明允许的取值范围
type AllowedInputValues = 'a' | 'b' | 'c' | 'd';

export class Foo {
  // 将输入类型限制为联合类型，默认值保持'a'
  @Input() myInput: AllowedInputValues = 'a';
}

这样一来，如果有人在TypeScript代码里直接给myInput传'x'这类非法值，TypeScript编译器会立刻抛出错误：Type '"x"' is not assignable to type 'AllowedInputValues'，直接在编译阶段就把问题扼杀。

2. 开启Angular严格模板检查，拦截模板中的非法输入 #

如果是在模板里写静态字符串（比如<foo myInput="x">），默认情况下Angular可能不会严格检查类型，这时候需要在tsconfig.json里开启严格模板类型检查：

{
  "compilerOptions": {
    // 保留你的其他编译配置
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInputTypes": true // 这是strictTemplates的子选项，开启后会严格校验输入类型
  }
}

配置完成后，只要有人在模板里传入不符合要求的静态值，Angular的模板编译器会直接报错，提示类型不匹配。

可选：加个运行时兜底检查 #

如果担心有人通过as any这类方式绕过TypeScript的编译检查，还可以给myInput加个setter做运行时校验：

type AllowedInputValues = 'a' | 'b' | 'c' | 'd';

export class Foo {
  private _myInput: AllowedInputValues = 'a';

  @Input() set myInput(value: AllowedInputValues) {
    const allowedValues: AllowedInputValues[] = ['a', 'b', 'c', 'd'];
    if (!allowedValues.includes(value)) {
      throw new Error(`myInput只能是${allowedValues.join(', ')}中的一个，当前传入值: ${value}`);
    }
    this._myInput = value;
  }

  get myInput(): AllowedInputValues {
    return this._myInput;
  }
}

这个兜底检查能在运行时也拦截非法值，进一步保障组件的输入安全性。

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