Angular结合NgRx Store时TypeScript接口属性访问疑问

你遇到的现象和NgRx的属性处理逻辑无关，核心问题出在Angular响应式表单的默认类型上：

• 未指定泛型的FormGroup实例，this.form.value的默认返回类型是any。TypeScript中any类型会完全绕过类型检查，你把any类型的值传给任意类型的参数，TS都不会抛出类型不匹配错误，不管你给RegisterRequestInterface加多少字段、传参结构和接口差多少，都不会触发TS校验。
• NgRx 本身不会做任何隐式属性匹配、结构自动转换，你传入registerAction的参数会被原样挂载到action对象上。你现在的代码实际生成的action结构是{type: REGISTER, username: xxx, email: xxx, password: xxx}，完全不符合你定义的{request: {user: {...}}}结构，只是目前还没有代码（比如effect、reducer）读取action.request.user的逻辑，所以运行时没有抛出错误，属于隐藏bug，后续走到请求发送逻辑时会直接因为取到undefined报错。

你需要在提交时手动构造符合action类型要求的参数结构，示例如下：

onSubmit(): void {
  const submitData: RegisterRequestInterface = {
    user: this.form.value
  };
  this.store.dispatch(registerAction({
    request: submitData
  }));
}

如果想从根源上避免这类传参错误，可以给FormGroup指定明确的泛型类型，让this.form.value获得强类型校验，传入错误结构时TS会直接报错。

这是TypeScript原生的索引访问类型语法，和NgRx没有直接关系，常见使用场景包括：

• 复用嵌套层的类型定义，避免重复写相同的结构。比如给注册表单做类型标注时，可以直接取嵌套的user结构作为表单值类型，不用重复声明username/email/password三个字段：

  type RegisterFormValue = RegisterRequestInterface["user"];
  // 初始化表单时直接传入泛型获得类型提示
  this.form = this.fb.group<RegisterFormValue>({
    username: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    password: ['', Validators.required],
  });
  

• 声明变量、写selector或effect逻辑时，如果只需要用到user层级的属性，直接用索引访问类型拿到对应类型即可，不需要额外拆分接口定义，避免多处重复定义类型导致后续字段变更时出现不一致问题。
• 做工具类型转换时，比如需要把user层的所有字段转为可选、必选等映射类型时，直接取嵌套层类型做转换更方便。

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