如何為也是對象的構造函數定義打字稿接口？

Question

我收到此錯誤：

This expression is not constructable.
  Not all constituents of type '(new (arg0: HTMLDivElement, arg1: object) => Embed) | { VIDEO_READY: string; }' are constructable.
    Type '{ VIDEO_READY: string; }' has no construct signatures.

這是我的界面：

declare global {
  interface Window {
    Twitch: {
      Embed: new (arg0: HTMLDivElement, arg1: object) => Embed;
    } | {
      Embed: {
        VIDEO_READY: string;
      };
    };
  }
}

這是用法：

    embed = new window.Twitch.Embed(video.value, {
      video: props.twitch,
    });
    embed.addEventListener(window.Twitch.Embed.VIDEO_READY, () => {
      player = embed.getPlayer();
      player.pause();
      resizeIframe();
    });

使用 Twitch API window.Twitch.Embed是一個構造函數和一個對象......

Answer 1

我會將它定義為單個對象，而不是將其拆分為一個聯合對象。

這是完整的例子

// Your usage
embed = new window.Twitch.Embed(htmlDiv, {
    video: 123,
});
embed.addEventListener(window.Twitch.Embed.VIDEO_READY, () => {
    // ... 
});


// The definition
declare global {
    interface Window {
        Twitch: {
            Embed: {
                new(arg0: HTMLDivElement, arg1: object): Window['Twitch']['Embed'];
                VIDEO_READY: string;
            }
        }
    }
}


// Some excess irrelevant stuff
declare var embed: any;
declare var htmlDiv: HTMLDivElement;
export const exportSomething = 123;

Answer 2

在我看來，您正在嘗試在 Angular/Typescript 項目中使用 Twitch 交互式播放器。

我最近遇到了同樣的問題，這就是為什么我決定為 Twitch 交互式嵌入播放器實現一個 Typescript 包裝器。 這與 Angular 100% 兼容，因此如果您仍然需要一種方法來實現這一點，請查看此存儲庫。 希望有幫助^ ^

https://github.com/frozencure/twitch-player