【问题标题】:Angular 2 & Typescript Observable Function Parameter - What Does Pipe Do?Angular 2 和 Typescript 可观察函数参数 - 管道做什么?
【发布时间】:2017-05-07 16:00:29
【问题描述】:

最近我需要在一个函数中获取一个 Observer 参数,我在办公桌上敲了敲头,试图弄清楚如何在 Typescript 中做到这一点。您可能还记得在 C# 中使用 delegate 参数;这基本上就是我在这里想要做的。这是subscribe(observer: Observer<any>) 的一部分。我这样做的原因是因为我试图为订阅添加 AOP 类型的书挡。这不是重要的部分。

基本上要让它工作,你必须在你的函数参数后面添加一个| 字符,它最终是这样的:

(observer: Observer<any>| ((值:任意) => void)): void

我的问题基本上是该函数签名中的粗体部分有什么作用?我已经搜索了我能想到但无法弄清楚的所有资源。如果没有| 之后的部分,我会收到此错误:

'(res: any) => void' 类型的参数不能分配给参数 类型为“观察者”。类型 '(res: 任何)=> 无效'。

一旦我添加了管道字符和之后的部分,我就能够以传统的观察者方式毫无问题地订阅(使用箭头函数),并且我还确认所有订阅都有效(排除了管道之后的部分作为默认值)。任何想法都将不胜感激,因为我讨厌看到一些有用的东西,但不知道为什么!

【问题讨论】:

    标签: angular typescript angular2-observables


    【解决方案1】:

    正如@echonax 所说:这意味着或正如@Rob 所说的那样Union Type

    但我开始写这个,我不想把它扔掉:),只是因为我很慢。 :)

    第一个限制你接受观察者的方法

    class SubscribeMe<T> {
        observable: Observable<T>;
        susbscribe(observer: Observer<T>){
            return observable.susbscribe(observer);
        }
    }
    

    然后您尝试使用类似签名的动作来调用它 Action 就像

        type Action = <T>(t:T)=> void     
    

    通过做:

        susbscribeMe = new SubscribeMe<any>();
        susbscribeMe.susbscribe((x)=> console.log(x));
    

    这与之前提供的签名不匹配。

    然后你在方法中添加了类似签名的动作

     class SubscribeMe<T> {
        observabel: Observable<T>
        susbscribe(observer: Observer<T>| (x)=> void ){
            return observable.susbscribe(observer);
        }
    }    
    

    或者...

     class SubscribeMe<T> {
        observabel: Observable<T>
        susbscribe(observer: Observer<T>| Action<T>){
            return observable.susbscribe(observer);
        }
    }
    

    你告诉打字稿你可以用行动或观察者打电话给我

    ...最后这一切都是可能的,因为 Rx.Observable 接口 (rxjs/Observable.d.ts)

    为“订阅”定义一个重载签名,如下所示

     *  subscribe(): Subscription;
     *  subscribe(observer: PartialObserver<T>): Subscription;
     *  subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;
    

    这意味着您可以订阅

    • 或一个动作
    • 或观察者
    • 或 Null/Nothing/Nada

    但总是会返回订阅

    例如:

    import * as Rx from "rxjs";
    
    export class SubscribeMe<T> {
    
        private _events = new Rx.Subject<T>();
    
        /** 
        * Hide the source of the observable  
        * */
        get events(): Rx.Observable<T> { return this._events.asObservable(); }
    
        /**
        *  Accept any signature accepted by Rx.Observabe INTERFACE (rxjs/Observable.d.ts)
        *  subscribe(): Subscription;
        *  subscribe(observer: PartialObserver<T>): Subscription;
        *  subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;
        * 
        * as in OR Action<Ievent> Or Observer<Ievent> Or Null/Nothing/Nada
        */
        subscribe = (observer?: (e:T) => void | Rx.Observer<T>) => {
            return this.events.subscribe(observer);
        }
    }
    

    【讨论】:

    • 这是一个很好的答案 - 如果我能同时接受我会:)
    【解决方案2】:

    这意味着observer 的类型是Observer&lt;any&gt;

    |()

    ((value: any) =&gt; void) : 输入为any 值,输出为void 的函数。

    【讨论】:

    • 在打字稿中也称为union type
    • 太棒了!现在完全清楚了。由于Angular 2,我一直在考虑“管道”,而不是“OR”,这就是我遇到麻烦的原因。非常感谢!!
    • @CarlosMuentes 哈哈,没问题。很高兴你明白了:)
    猜你喜欢
    • 2021-07-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-16
    • 2017-06-11
    • 2019-06-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多