带有Symbol.observable ponyfill的TypeScript可观察对象

Question

[我试图输入一个可观察的对象，并使用自定义的Symbol.observable ponyfill（类似于system-observable ponyfill；下面显示的代码），但是我想不出一种方法。

我尝试使用system-observable作为键，并尝试将typeof $$observable设置为Symbol.observable，但这些都不起作用。我不得不求助于对象，但是这种方法的问题是我必须强制对象（下面未显示），并且由于对象中的其他属性而导致难以捕获其他类型错误。输入错误。我也不能只做unique symbol，因为我想在一个单独的接口中定义它，而不必依赖功能。

[或者，我想知道是否有一种方法可以将其投射到比投射整个对象更精细的级别上（如果事实证明，如果不投射就无法做到）。

我提供了一个游乐场链接。任何帮助，将不胜感激。

首次尝试（无强制转换）

错误消息

Property'[Symbol.observable]'在类型'{{x：string]：（）=> {[x：string]：（（observer：Observer）=> {unsubscribe（）：void;}）中丢失| （（）=> {[x：字符串]：（（观察者：观察者）=> {unsubscribe（）：void;}）| ...; subscription（观察者：观察者）：{...;};}） ; subscription（观察者：观察者）：{...; }; }; }”，但在“容器”类型中为必填项。（2741）

代码

ReturnType<typeof makeObservableContainer>

游乐场链接：

// system-observable.ts
declare global {
  interface SymbolConstructor {
    readonly observable: symbol
  }
}

const $$observable = /* #__PURE__ */ (() =>
  (typeof Symbol === 'function' && Symbol.observable) || '@@observable')()

export default $$observable

// observer-creator.ts
interface Observer {
    next(): void;
}

interface Observable {
    subscribe: (observer: Observer) => { unsubscribe(): void };
    [Symbol.observable](): Observable;
}

interface Container {
    // How do I type this?
    [Symbol.observable](): Observable;
}

function makeObservableContainer(): Container {
    // error here because this is not assignable to `Container`
    return {
        [$$observable]() {
            return {
                subscribe(observer: Observer) {
                    // TODO
                    return {
                        unsubscribe() {
                            // TODO
                        }
                    }
                },
                [$$observable]() { return this }
            }
        },

        // other properties that should conform to `Container` interface
    }
}

---

第二次尝试（唯一的符号和一点点转换）

错误

Type'（）=> {subscription（observer：Observer）：{unsubscribe（）：void; };可观察的}'不可分配给'（）=> Observable'类型。类型'{{subscribe（observer：Observer）：{unsubscribe（）：void;};中缺少属性'[Symbol.observable]'。 };可观察的}”，但在“可观察”类型中为必填项。（（2322）

代码

Provided

游乐场链接：

// system-observable.ts
declare global {
  interface SymbolConstructor {
    readonly observable: unique symbol
  }
}

const $$observable: SymbolConstructor['observable'] = /* #__PURE__ */ (() =>
  (typeof Symbol === 'function' && Symbol.observable) || '@@observable')() as SymbolConstructor['observable']

export default $$observable

// observer-creator.ts
interface Observer {
    next(): void;
}

interface Observable {
    subscribe: (observer: Observer) => { unsubscribe(): void };
    [Symbol.observable](): Observable;
}

interface Container {
    // How do I type this?
    [Symbol.observable](): Observable;
}

function makeObservableContainer(): Container {
    // error here because this is not assignable to `Container`
    return {
        [$$observable]() {
            return {
                subscribe(observer: Observer) {
                    // TODO
                    return {
                        unsubscribe() {
                            // TODO
                        }
                    }
                },
                [$$observable]() { return this }
            }
        },

        // other properties that should conform to `Container` interface
    }
}

Answer 1

如果将Provided字符串强制转换为"@@observable"，则可以将any键入为唯一符号，这将使您可以将其用作接口的键：

$$observable