如何在Package B中全局访问HTMLMediaElement接口的属性

问题背景 #

Package A 中定义了 HTMLMediaElement 接口，声明了一系列媒体状态常量的类型；同时提供了实现该接口的 Video 类，通过 getter 方法返回这些常量的具体值（例如 HAVE_CURRENT_DATA 返回 4）。目前在 Package B 中已导入这两者，希望直接通过 HTMLMediaElement.xxx 的形式访问这些常量，无需依赖 Video 实例。

解决方案 #

TypeScript 接口仅存在于编译阶段，运行时没有对应的实体对象，因此需要手动创建同名对象并挂载 Video 类的静态属性，具体步骤如下：

1. 调整Package A的Video类（若有权限） #

将 Video 类中的实例 getter 改为静态 getter，让类本身可直接访问这些常量：

// Package A 的 Video 类实现
export class Video implements HTMLMediaElement {
  public static get HAVE_CURRENT_DATA(): number {
    return 4;
  }
  public static get HAVE_METADATA(): number {
    return 1;
  }
  // 其余常量同理实现静态getter
}

若无法修改 Package A，可直接通过 new Video().HAVE_CURRENT_DATA 获取值后挂载，但不推荐（会创建不必要的实例）。

2. 在Package B中构建全局访问对象 #

导入相关模块后，创建与接口同名的对象并挂载所有常量，若需全局访问可挂载到全局对象（如浏览器环境的 window）：

// Package B 中的实现
import { HTMLMediaElement, Video } from 'package-a';

// 构建包含所有媒体状态常量的对象
export const HTMLMediaElement = {
  HAVE_METADATA: Video.HAVE_METADATA,
  HAVE_CURRENT_DATA: Video.HAVE_CURRENT_DATA,
  HAVE_NOTHING: Video.HAVE_NOTHING,
  NETWORK_NO_SOURCE: Video.NETWORK_NO_SOURCE,
  HAVE_ENOUGH_DATA: Video.HAVE_ENOUGH_DATA,
  NETWORK_EMPTY: Video.NETWORK_EMPTY,
  NETWORK_LOADING: Video.NETWORK_LOADING,
  NETWORK_IDLE: Video.NETWORK_IDLE,
  HAVE_FUTURE_DATA: Video.HAVE_FUTURE_DATA,
} as const;

// 浏览器环境下挂载到全局window，实现全局访问
declare global {
  interface Window {
    HTMLMediaElement: typeof HTMLMediaElement;
  }
}
window.HTMLMediaElement = HTMLMediaElement;

3. 类型一致性保障 #

通过类型断言确保构建的对象符合接口声明的常量类型：

// 提取接口中的常量类型
type MediaStateConstants = Pick<HTMLMediaElement, 
  'HAVE_METADATA' | 'HAVE_CURRENT_DATA' | 'HAVE_NOTHING' | 
  'NETWORK_NO_SOURCE' | 'HAVE_ENOUGH_DATA' | 'NETWORK_EMPTY' | 
  'NETWORK_LOADING' | 'NETWORK_IDLE' | 'HAVE_FUTURE_DATA'
>;

// 确保对象类型匹配
export const HTMLMediaElement = {
  // 常量赋值...
} as const satisfies MediaStateConstants;

使用示例 #

配置完成后，即可在 Package B 中直接访问：

console.log(HTMLMediaElement.HAVE_CURRENT_DATA); // 输出 4

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