TypeScript类型提示问题：piped函数自动推导时编译失败如何解决？

问题背景 #

编写了一个带类型提示的piped函数，显式指定泛型类型时可正常运行，但启用自动类型推导时，Test 4编译失败：

import { Observable, of, map } from 'rxjs';

type NotObservable<T> = T extends (Observable<unknown>|Observable<unknown>[]) ? never : T;
function piped<Ob>(fn: (value: string) => (Observable<Ob>|NotObservable<Ob>)): Observable<Ob> {
  // 简化实现：模拟将值包装为Observable
  const result = fn('test');
  return (result instanceof Observable ? result : of(result)) as Observable<Ob>;
}

// Test 1: 正常运行
const valueF = (test: string): number => 42;
piped(valueF).pipe(map(x => x)); // x类型为number

// Test 2: 正常运行
const observable = (test: string): Observable<string> => of(test);
piped(observable).pipe(map(x => x)); // x类型为string

// Test 3: 带显式类型提示正常运行
const observable_or_value = (test: string): Observable<string>|number => Math.random() > 0.5 ? of(test) : 42;
piped<string|number>(observable_or_value).pipe(map(x => x)); // x类型为string|number

// Test 4: 自动类型推导失败
piped(observable_or_value).pipe(map(x => x));
// 错误信息:
// Argument of type '(test: string) => Observable<string> | number' is not assignable to parameter of type '(value: string) => string | Observable<string>'.
// Type 'number | Observable<string>' is not assignable to type 'string | Observable<string>'.
// Type 'number' is not assignable to type 'string | Observable<string>'.

错误原因 #

原泛型设计piped<Ob>要求传入函数的返回值必须是Observable<Ob>|NotObservable<Ob>，但TypeScript的类型推导无法处理这种双向约束：

• 当传入返回类型为Observable<string>|number时，TS尝试推导Ob：
  • 若Ob为string，则NotObservable<Ob>是string，但返回值中的number无法匹配string；
  • 若Ob为number，则Observable<Ob>是Observable<number>，但返回值中的Observable<string>无法匹配；
• 推导陷入矛盾后，TS错误地将Ob推断为string，导致number类型不兼容，最终报错。

修改方案 #

重构泛型逻辑，通过条件类型自动从返回值中提取最终要包裹的类型，避免双向约束：

1. 定义类型提取工具 #

type ExtractObservableValue<T> = 
  // 提取单个Observable的内部值
  T extends Observable<infer U> ? U : 
  // 提取Observable数组的内部值数组
  T extends Observable<infer U>[] ? U[] : 
  // 非Observable类型直接返回
  T;

2. 重构piped函数 #

让泛型捕获传入函数的返回类型R，再通过ExtractObservableValue推导最终输出的Observable类型：

function piped<R>(fn: (value: string) => R): Observable<ExtractObservableValue<R>> {
  const result = fn('test');
  return (result instanceof Observable ? result : of(result)) as Observable<ExtractObservableValue<R>>;
}

修改效果 #

所有测试用例均可正常编译，包括Test 4的自动类型推导：

• Test 1：输出Observable<number>，x类型为number
• Test 2：输出Observable<string>，x类型为string
• Test 3/Test 4：输出Observable<string|number>，x类型为string|number

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