videojs中activeCues[0].text属性存在但Typescript编译提示不存在如何解决

根因说明 #

该报错是@types/video.js的类型定义和运行时实际结构不一致导致：

• 标准Web API中TextTrackCue是抽象基类，实际激活的字幕cue实例是它的子类VTTCue，text是VTTCue的自有属性
• 当前版本的@types/video.js将activeCues数组的项声明为基类TextTrackCue，未做正确的类型下推，因此编译阶段会提示属性不存在，运行时实际可正常访问。

正规解决方案 #

方案1：显式类型断言（最推荐，改动量最小） #

直接将访问的cue实例断言为VTTCue类型，符合TS类型规范，不会影响其他代码的类型检查：

const activeCue = activeCues[0] as VTTCue;
const cueText = activeCue.text;

如果你的TS环境未内置VTTCue类型定义，可在项目的类型声明文件（如global.d.ts）中补充：

interface VTTCue extends TextTrackCue {
  text: string;
  // 可按需补充其他用到的属性，如startTime、endTime等
}

方案2：全局扩展video.js类型定义 #

如果需要全局修复所有activeCues的类型问题，可在项目类型声明文件中覆盖原有定义：

import 'video.js';

declare module 'video.js' {
  interface TextTrack {
    activeCues: VTTCue[] | null;
  }
}

配置后项目内所有访问TextTrack.activeCues的代码都会自动识别为VTTCue类型，无需单独加断言。

方案3：类型守卫校验 #

如果需要做运行时安全校验，避免特殊场景下类型断言导致的错误，可添加类型守卫函数：

function isVTTCue(cue: TextTrackCue): cue is VTTCue {
  return 'text' in cue;
}

if (activeCues[0] && isVTTCue(activeCues[0])) {
  const cueText = activeCues[0].text;
}

不推荐长期使用// @ts-ignore的方式规避，该注释会跳过当前行所有类型检查，容易遗漏其他潜在的类型错误。

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