video.js 版本 8.XX 类型、TypeScript React 和插件 [2023]

Question

问题：

背景：我正在移植带有 video.js 和插件的 jQuery 应用程序。到 TypeScript React 应用程序。

尝试将 video.js 当前版本 8.3.0 与 TypeScript 和第 3 方插件一起使用会导致类型错误，例如：Property 'playlist' does not exist on type 'Player'。

简化示例

应该注意的是，这个设置实际上可以在生产环境中使用多个插件，但是 TS 服务器会抛出错误。

import { useRef } from 'react';
import videojs from 'video.js';
import type Player from 'video.js/dist/types/player';
import 'videojs-playlist';

const videoElement = document.createElement('video-js');
const playerRef = useRef<Player | null>(null);
const playlist = [{...}];
const options = {...};

const player = (playerRef.current = videojs(videoElement, options));

player.autoplay(false);
player.playlist(playlist); // TS Error: Property 'playlist' does not exist on type 'Player'
player.playlist.autoadvance(0); // TS Error: Property 'playlist' does not exist on type 'Player'

先前的研究、解决尝试和潜在原因

对于想要将 video.js 与 TypeScript 和第 3 方插件一起使用的人们来说，这实际上是一个常见问题。虽然使用 video.js 版本 7.X 对于这种情况有可行的解决方案，但以下解决方案在 video.js 8.3 上都不适合我。

我相信当他们改变类型的工作方式时就会发生这种情况。

最初，我们在 7.X 中使用 DefinelyTyped 类型：

npm install --save @types/video.js

然后我们使用7.X中包含的类型：

import { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';

在 8.X 版本中，他们更改了类型：

import Player from 'video.js/dist/types/player';

我在另一个使用 video.js 7.X 和这些解决方案的应用程序中发现了之前的成功，但是这些解决方案在 8.3 上都不适合我：

• Video.js 心 TypeScript

• StackOverflow - 带 typescript 的 Videojs 插件

我查看了video.jsplayer.d.ts 文件以寻找线索，但是我无法从那里找出答案。

我也尝试过这个自定义 d.ts 文件示例，甚至添加一些anys 只是为了让它启动并运行，但没有运气：

// videojs-playlist.d.ts
import Player from 'video.js/dist/types/player';

declare module 'video.js' {
  export interface Player {
    playlist(options: any): void; // Also tried playlist(playlist?: { options: any }): void;
  }
}

我问了 co-pilot，它给了我一堆折旧的、非功能性的代码，与 video.js 版本 8.X 不兼容。

对于这个项目来说，回退到 7.X 并不是一个真正的选择。

同样，功能有效，但 TS 服务器继续抱怨。我怀疑解决方案最终在一个custom.d.ts文件中。希望有人能够在 video.js 的 8.X 版本中解决这个问题。先感谢您。