video.js最新版本未导出Player类，React转TypeScript遇阻

问题背景 #

将video.js官方React示例转TypeScript时，会遇到两个类型报错：

1. 初始化播放器时，Player类型无法赋值给useRef<null>的类型
2. 尝试通过videojs.Player指定类型时，提示'videojs' has no exported member named 'Player'

解决方案 #

方法一：通过ReturnType推导播放器类型（推荐，无需额外依赖）

最新版video.js不再直接导出Player类型，但可以通过TypeScript的ReturnType工具类型，直接获取videojs函数的返回值类型：

import videojs from 'video.js';
import { useRef, useEffect } from 'react';

// 推导videojs实例的类型
type VideoJSPlayer = ReturnType<typeof videojs>;

const VideoPlayer = () => {
  // 给ref指定正确的联合类型：Player实例或null
  const playerRef = useRef<VideoJSPlayer | null>(null);

  useEffect(() => {
    const videoElement = document.createElement('video-js');
    const options = { /* 你的播放器配置 */ };

    if (!playerRef.current) {
      // 赋值时类型会自动匹配
      playerRef.current = videojs(videoElement, options, () => {
        console.log('播放器初始化完成');
      });
    }

    // 组件卸载时清理播放器实例
    return () => {
      if (playerRef.current) {
        playerRef.current.dispose();
        playerRef.current = null;
      }
    };
  }, []);

  return (
    <div data-vjs-player>
      <video className="video-js" />
    </div>
  );
};

export default VideoPlayer;

方法二：使用@types/video.js的类型定义

如果你已经安装了@types/video.js（确保版本与video.js本体兼容），可以直接从包中导入Player类型：

import videojs from 'video.js';
// 注意用type关键字导入类型
import type { Player } from 'video.js';
import { useRef, useEffect } from 'react';

const VideoPlayer = () => {
  const playerRef = useRef<Player | null>(null);

  useEffect(() => {
    // 后续逻辑同方法一
  }, []);

  return <div data-vjs-player><video className="video-js" /></div>;
};

内容的提问来源于stack exchange，提问作者Mintee