如何为接收RxJS操作符数组的剩余参数添加TypeScript类型？

要给接收RxJS操作符的剩余参数添加严谨类型，核心是利用RxJS提供的OperatorFunction类型，结合TypeScript泛型约束操作符的输入输出类型链，确保类型安全。

步骤1：导入必要类型 #

先导入RxJS核心类型，用于约束操作符和流的类型：

import { Observable, OperatorFunction, BehaviorSubject, delay } from 'rxjs';

步骤2：定义辅助类型（实现精准链式类型推断） #

如果需要精准追踪操作符链式调用后的最终输出类型，可以定义一个提取元组最后一个元素的辅助类型：

// 提取元组最后一个元素的类型，用于获取最终操作符的输出类型
type LastTupleElement<T extends any[]> = T extends [...infer _, infer Final] ? Final : never;

步骤3：给函数添加泛型约束 #

假设你的类中selector是Observable<TSource>类型，按以下方式定义testFunction：

class YourClass<TSource> {
  // 给selector指定明确的Observable类型
  private selector: Observable<TSource>;

  constructor(initialValue: TSource) {
    this.selector = new BehaviorSubject(initialValue);
  }

  testFunction<Ops extends OperatorFunction<any, any>[]>(
    ...args: Ops
  ): BehaviorSubject<ReturnType<LastTupleElement<Ops>>> {
    // pipe会自动校验操作符之间的输入输出类型兼容性
    this.selector.pipe(...args, delay(1000)).subscribe();
    
    // 根据实际场景转换类型，若selector本身是BehaviorSubject，直接断言即可
    return this.selector as unknown as BehaviorSubject<ReturnType<LastTupleElement<Ops>>>;
  }
}

简化版（无需极致链式推断时使用） #

如果不需要追踪每个操作符的类型转换，可直接约束操作符输入类型与selector一致：

class YourClass<TSource> {
  private selector: BehaviorSubject<TSource>;

  constructor(initialValue: TSource) {
    this.selector = new BehaviorSubject(initialValue);
  }

  testFunction<TResult>(
    ...args: OperatorFunction<TSource, TResult>[]
  ): BehaviorSubject<TResult> {
    this.selector.pipe(...args, delay(1000)).subscribe();
    return this.selector as unknown as BehaviorSubject<TResult>;
  }
}

类型校验效果 #

调用函数时，TypeScript会自动校验操作符的类型兼容性：

const instance = new YourClass<number>(0);
// 合法：take和skip的输入输出类型都与number匹配
instance.testFunction(take(1), skip(2));

// 报错：map返回string类型，后续操作符若期望number会触发类型提示
instance.testFunction(map(num => num.toString()), take(1));

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