crimx / observable-hooks

⚛️☯️💪 React hooks for RxJS Observables. Concurrent mode safe.
https://observable-hooks.js.org
MIT License
1.03k stars 44 forks source link

rfc: 为 useObservable 添加泛型以匹配多种 Observable #109

Closed suiyun39 closed 2 years ago

suiyun39 commented 2 years ago

当前问题

const state$ = useObservable(() => new BehaviorSubject(''))

state$ 始终被推断为 Observable<string>, 后续使用无法调用诸如: value, getValue() 等属性方法.

提议:

useObservable 的类型声明改为:

export function useObservable<
  TOutput, 
  TReturnType extends Observable<TOutput> = Observable<TOutput>
>(init: () => TReturnType): TReturnType;

这样当使用 Observable 的子类型时能得到正确的推断:

const state$ = useObservable(() => new BehaviorSubject(''))
// typeof state$ === BehaviorSubject<string>

同时依旧能保持原有的泛型返回类型:

const state$ = useObservable<string>(() => new Subject())
// typeof state$ === Observable<string>

补充

也可以使用另一种方法保证类型兼容:

type TOutput<T> = T extends Observable<any> ? T : Observable<T>

export function useObservable<T>(init: () => TOutput<T>): TOutput<T>

const state$ = useObservable(() => new BehaviorSubject(''))
// typeof state$ === BehaviorSubject<string>
const state$ = useObservable<string>(() => new Subject())
// typeof state$ === Observable<string>
crimx commented 2 years ago

好的,感谢反馈