NGXS 18.1.4升级后泛型动作创建分发的TypeScript类型错误排查

问题根源 #

NGXS 18.1.4新增了dispatch()参数的非空校验，你的createControl方法中泛型U没有明确的类型约束，TypeScript无法确认new actionConstructor(val)生成的实例符合ActionOrArrayOfActions要求的非空有效动作类型，因此抛出类型不兼容错误。

解决方案 #

给泛型U添加双重约束：

1. 约束U必须继承NGXS的Action基础类型（确保是合法的NGXS动作）
2. 约束U不能为null或undefined（满足新版本的非空要求）

修改后的createControl方法代码如下：

// 先导入NGXS的Action类型
import { Action } from '@ngxs/store';

private createControl<T, U extends NonNullable<Action>>(
  actionConstructor: new (val: T) => U, 
  initialValue: T
): FormControl<T> {
  const ctrl = new FormControl<T>(initialValue);
  this.subscriptions.push(
    ctrl.valueChanges.subscribe({
      next: val => {
        this.store.dispatch(new actionConstructor(val));
      }
    })
  );
  return ctrl;
}

原理说明 #

• U extends NonNullable<Action>：明确告诉TypeScript，U是一个非空的NGXS动作类，完全匹配ActionOrArrayOfActions类型对NonNullable<T>的要求
• 这样new actionConstructor(val)生成的实例会被TypeScript正确识别为合法的非空动作，消除编译错误

额外验证 #

你的调用代码this.setNameCtrl = this.createControl(SetName, 'Bob');不需要修改，因为SetName本身就是符合Action类型的非空类，会自动适配泛型约束。

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