代码之家 › 专栏 › 技术社区 › Filip Micanek

一个角度util函数的类型推理

typescript-generics observable rxjs typescript angular

1

Filip Micanek · 技术社区 · 2 年前

我目前在Angular工作,我的HTTP客户端返回 Observable<HttpResponse<T>> 。我正在尝试创建一个util函数,该函数包装此内容并返回 Promise<T>

  const response = await baseResponseHandler(this.api.getAccountInfo('response'); //response is unknown

这是util函数:

export async function baseResponseHandler<
  K,
  T extends Observable<HttpResponse<K>>,
>(arg: T): Promise<K> {
  const value = await firstValueFrom(arg); //rxjs Observable -> Promise
  if (value.ok) {
    return value.body;
  }
  return value.body;
}

为什么它没有正确地推断出类型?

2 回复 | 直到 2 年前

1

3

jonrsharpe 2 年前

export async function baseResponseHandler<K>(
 arg: Observable<HttpResponse<K>>
): Promise<K> {
  const value = await firstValueFrom(arg);
  if (value.ok) {
    return value.body;
  }
  return value.body;
}

现在,当你称之为

const response = await baseResponseHandler<myType>(this.api.getAccountInfo('response');

2

0

Naren Murali 2 年前

我们可以获取API的类型并将其存储在 T ,然后我们基于此配置其余部分 T 如下所示!

import { HttpResponse } from '@angular/common/http';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { firstValueFrom, Observable } from 'rxjs';
import 'zone.js';
import { ApiService } from './api.service';

export async function baseResponseHandler<T>(
  arg: Observable<HttpResponse<T>>
): Promise<T> {
  const value = await firstValueFrom(arg); //rxjs Observable -> Promise
  if (value.ok) {
    return <T>value.body;
  }
  return <T>value.body;
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App {
  name = 'Angular';

  constructor(private api: ApiService) {}

  ngOnInit() {
    this.getDummy();
  }

  async getDummy() {
    const response = await baseResponseHandler(
      this.api.getAccountInfo('response')
    ); //response is unknown
    console.log(response);
  }
}

bootstrapApplication(App);

stackblitz