Angular HttpClient提交请求时仅发送嵌套模型PK或指定字段的实现方案

方案1：独立定义序列化转换函数（优先选择，类型安全、易维护） #

这是最推荐的做法，显式声明转换前后的类型，逻辑集中可复用，不会出现隐式类型问题：

// 定义和后端约定的请求体类型
interface UserRequestPayload {
  id: string
  organization: string
}

// 统一转换方法
function serializeUserForRequest(user: User): UserRequestPayload {
  return {
    ...user,
    organization: user.organization.id
  }
}

// 调用示例
const user = new User("abc", new Organization("xyz"))
httpClient.post<UserRequestPayload>(url, serializeUserForRequest(user))

方案2：单次使用时用类型断言绕开检查 #

如果只是临时用一次，不想单独封装函数，可以直接通过类型断言跳过TS的类型校验：

const user = new User("abc", new Organization("xyz"))
const requestData = {
  ...user,
  organization: user.organization.id
} as unknown as Record<string, any>

httpClient.post(url, requestData)

方案3：全局拦截器统一处理（适合多接口同规则场景） #

如果项目中大量接口都要求嵌套对象仅提交id字段，可以通过HTTP请求拦截器做全局转换，不用每个请求单独处理：

// 以Angular HttpClient拦截器为例
@Injectable()
export class NestedIdInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.body && typeof req.body === 'object') {
      const transformedBody = this.traverseAndTransform(req.body)
      req = req.clone({ body: transformedBody })
    }
    return next.handle(req)
  }

  private traverseAndTransform(data: any): any {
    // 符合规则的单id嵌套对象直接转成id值
    if (data && typeof data === 'object' && 'id' in data && Object.keys(data).length === 1) {
      return data.id
    }
    // 递归处理数组
    if (Array.isArray(data)) {
      return data.map(item => this.traverseAndTransform(item))
    }
    // 递归处理普通对象
    if (typeof data === 'object' && data !== null) {
      return Object.fromEntries(
        Object.entries(data).map(([k, v]) => [k, this.traverseAndTransform(v)])
      )
    }
    return data
  }
}

原写法报错原因 #

你用Object.assign({}, user)生成的对象，TS依然会将其推断为User类型，所以organization字段的类型默认还是Organization，直接赋值字符串就会触发类型不匹配的报错，本质是TS的静态类型检查限制，并非对象本身不可修改。

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