时间戳

首页 > 解决方案 > 如何在 mu 查询参数中包含类型安全？

angular - 如何在 mu 查询参数中包含类型安全？

问题描述

我有需要动态发送查询参数的服务。

方法服务 所以我的AuctionService.

getBids(id:number, params?: any) {
  return this.http.get(this._GET_AUCTION_URL + '/' + ApiPaths.auction + '/' + id + '/bids', {params});
}

当我发送查询参数时从我的组件

组件.TS

  let queryParams = {
      filterSupplierName: 'sds',
      filterBidAwardStatus: ['Awarded', 'Ignored']
    }

 this.getAuctionService
    .getAuctionBidsByGuidUsingGET(id, queryParams)
    .subscribe((data) => {
...

它动态地使 GET url 像这样

https://some-url/api/22222/bids?filterSupplierName=sds&filterBidAwardStatus=Awarded&filterBidAwardStatus=Ignored

现在我想在我的查询参数中设置类型安全，所以当我尝试发送例如某些键或值不正确的属性时，从组件中显示一些编译错误。

所以我需要 filterSupplierName of type string OR filterBidAwardStatus OF type array of string。

所以当我尝试

export interface IBidsFilter {
  filterSupplierName: string;
  filterBidAwardStatus: string[];
}
getBids(id:number, params?: IBidsFilter) {
  return this.http.get(this._GET_AUCTION_URL + '/' + ApiPaths.auction + '/' + id + '/bids', {params});
}

我得到错误没有过载

No overload matches this call.
  The last overload gave the following error.
    Type 'ITest' is not assignable to type 'HttpParams | { [param: string]: string | string[]; }'.
      Type 'ITest' is not assignable to type '{ [param: string]: string | string[]; }'.
        Index signature is missing in type 'ITest'

我尝试了什么

我试过了

getBids(id:number, params?: ITest) {
    let httpParams = new HttpParams();
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined) {
        if (typeof value === 'string') {
          httpParams = httpParams.set(key, value);
        }
        else {
          httpParams = httpParams.set(key, JSON.stringify(value));
        }
      }
    });
    return this.http.get(this._GET_AUCTION_URL + '/' + ApiPaths.auction + '/' + id + '/bids', {params: httpParams});
  }

现在我的组件具有类型安全性

这很好

let queryParams: ITest = {
      filterSupplierName: 'sds',
      filterBidAwardStatus: ['Awarded', 'Ignored']
 }

 this.getAuctionService
    .getAuctionBidsByGuidUsingGET(id, queryParams)
    .subscribe((data) => {

这会引发错误

let queryParams: ITest = {
      filterSupplierName: 'sds',
      someInvalidProp:222
 }

但现在的问题是，当获取 URL 被点击时，它看起来像

https://some-url/api/22222/bids? filterSupplierName=sds&filterBidAwardStatus=%5B%22Awarded%22,%22Ignored%22%5D

但我需要看起来像

https://some-url/api/22222/bids?filterSupplierName=sds&filterBidAwardStatus=Awarded&filterBidAwardStatus=Ignored

我怎样才能做到这一点？

标签： angulartypescript

解决方案

第一个解决方案

您可以从 扩展您的界面HttpParams，如下所示：

IBidsFilter 接口

import { HttpParams } from '@angular/common/http';

export interface IBidsFilter extends HttpParams {
  filterSupplierName: string;
  filterBidAwardStatus: string[];
}

唯一的问题是您可以拥有类型为的字段string | string[]

第二个解决方案：忽略这个

我已使用此解决方法修复了与查询相关的类型问题

getBids(id:number, params?: IBidsFilter) {

  return this.http.get(
       this._GET_AUCTION_URL + '/' + ApiPaths.auction + '/' + id + '/bids', 
       {params:  params as any}  
    // params as any is a workarround
  );

  }

它将修复您的错误：类型 'TypeName' 不可分配给类型 'HttpParams | 等等'。

你的功能将是类型安全的

推荐阅读