Angular组件输入组合的类型层面校验实现方案

嘿，这个需求我太熟悉了！想要在IDE层面就拦截非法的InputA和InputB组合，核心就是要让TypeScript意识到这两个输入不是独立的，而是存在绑定关系的。之前我也折腾过这个，给你分享两个可行的方案：

方案一：将输入合并为单一配置对象（最直接） #

这种方式是把原本独立的InputA和InputB打包成一个对象，用TypeScript的联合类型直接定义所有合法组合，这样IDE会立刻识别非法组合并报错。

首先在组件里定义合法组合的类型：

// 定义所有合法的输入组合
type ValidInputCombination =
  | { inputA: 'A1', inputB: 'B1' | 'B4' }
  | { inputA: 'A2', inputB: 'B1' | 'B2' | 'B3' }
  | { inputA: 'A3', inputB: 'B1' };

@Component({
  selector: 'my-component',
  template: '<div>{{ config.inputA }} - {{ config.inputB }}</div>'
})
export class MyComponent {
  // 只暴露一个配置输入
  @Input() config!: ValidInputCombination;
}

然后用户使用组件时，必须传入符合类型的配置对象：

<!-- 合法组合：IDE无报错 -->
<my-component [config]="{ inputA: 'A1', inputB: 'B1' }"></my-component>

<!-- 非法组合：IDE会直接提示类型错误 -->
<my-component [config]="{ inputA: 'A1', inputB: 'B2' }"></my-component>

这种方案的好处是简单粗暴，TypeScript的类型检查直接生效，用户在写代码时就能看到错误，不需要额外操作。

方案二：泛型组件+关联类型（保留独立输入） #

如果你不想合并输入，想保留inputA和inputB两个独立的@Input，可以用泛型组件结合条件类型来关联两者的合法性。

首先定义基础类型和关联规则：

type InputA = 'A1' | 'A2' | 'A3';
type InputB = 'B1' | 'B2' | 'B3' | 'B4';

// 定义每个InputA对应的合法InputB类型
type AllowedBForA<T extends InputA> =
  T extends 'A1' ? 'B1' | 'B4' :
  T extends 'A2' ? 'B1' | 'B2' | 'B3' :
  T extends 'A3' ? 'B1' :
  never;

然后把组件定义为泛型组件：

@Component({
  selector: 'my-component',
  template: '<div>{{ inputA }} - {{ inputB }}</div>'
})
export class MyComponent<T extends InputA> {
  @Input() inputA!: T;
  @Input() inputB!: AllowedBForA<T>;
}

不过这里有个小问题：Angular模板默认不会自动推断泛型类型，所以要让类型检查生效，用户需要在父组件的TS代码中定义符合类型的变量，再传递给组件：

// 父组件TS文件
// 合法组合：无报错
const validInputs = { inputA: 'A1' as const, inputB: 'B4' as const };
// 非法组合：TS会直接报错
const invalidInputs = { inputA: 'A1' as const, inputB: 'B2' as const };

然后在模板中使用：

<my-component [inputA]="validInputs.inputA" [inputB]="validInputs.inputB"></my-component>

这种方案保留了独立输入的结构，但需要用户配合TS变量传递参数，不能直接在模板里写字符串（否则TypeScript没法推断泛型）。

补充：结合运行时检查 #

不管用哪种方案，你之前实现的运行时错误抛出依然有用，可以作为最后一道防线——比如用户绕过了TypeScript检查（比如用any类型）时，运行时能及时报错。

备注：内容来源于stack exchange，提问作者Random Dev