Ngrx参数类型错误：分发StoreUser动作时出现类型不匹配问题

我有一个用户注册服务，代码如下：

public signup = (user:UserModel) => {
    console.log('UserService.user', user)

    return this.httpClient.post<{user:UserModel}>(this.url, {user}).pipe(
      tap(user => {
        console.log('UserService.user tap', user)
        this.store.dispatch(StoreUser({user}))
      })
   )
 }

尝试将后端返回的用户信息分发至StoreUser动作时出现类型错误，错误提示如下：

类型“{ user: UserModel; }”缺少类型“UserModel”中的以下属性：firstName、lastName、password、email、token(2739)
user.actions.ts(6, 13): 预期类型来自属性“user”，该属性在类型“{ user: UserModel; }”上声明
(property) user: UserModel

相关依赖代码：

UserModel类 #

export class UserModel {
    public firstName:string = '';
    public lastName:string = '';
    public password:string = '';
    public email:string = '';
    public token:string = '';
}

StoreUser动作 #

import { createAction, props } from "@ngrx/store";
import { UserModel } from "./user.model";

export const StoreUser = createAction(
    '[Store user] Store user',
    props<{ user:UserModel }>()
  );

tap操作符里的user是HTTP响应的完整对象，类型为{user: UserModel}，并非UserModel本身。直接将该对象传入StoreUser时，相当于给动作要求的UserModel类型参数传了一个嵌套对象，导致类型不匹配触发错误。

从响应对象中提取出真正的UserModel类型值，再传入StoreUser即可：

public signup = (user:UserModel) => {
    console.log('UserService.user', user)

    return this.httpClient.post<{user:UserModel}>(this.url, {user}).pipe(
      tap(response => {
        console.log('UserService.user tap', response.user)
        this.store.dispatch(StoreUser({user: response.user}))
      })
   )
 }

如果不想修改变量名，也可以直接通过嵌套属性访问：

this.store.dispatch(StoreUser({user: user.user}))

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