如何解决Spotify Web Playback SDK的TypeScript类型定义问题

1. 自定义类型声明文件 #

创建一个类型声明文件（比如src/types/spotify-web-playback-sdk.d.ts），手动扩展Window接口并定义Spotify SDK相关类型，覆盖不透明的部分：

interface SpotifyPlayer {
  connect(): Promise<boolean>;
  disconnect(): void;
  getCurrentState(): Promise<Spotify.PlaybackState | null>;
  // 根据你用到的方法补充其他类型
}

declare namespace Spotify {
  interface PlaybackState {
    device_id: string;
    // 补充你需要的播放状态字段
  }

  interface PlayerConstructor {
    new(options: {
      name: string;
      getOAuthToken: (cb: (token: string) => void) => void;
      volume?: number;
    }): SpotifyPlayer;
  }

  const Player: PlayerConstructor;
}

declare global {
  interface Window {
    Spotify: typeof Spotify;
    onSpotifyWebPlaybackSDKReady: (() => void) | undefined;
  }
}

保存后，TypeScript会自动识别这些类型，你就能正常使用window.Spotify、window.onSpotifyWebPlaybackSDKReady以及device_id等字段。

2. 临时使用类型断言 #

如果只是快速调试或临时解决，可直接用类型断言跳过类型检查：

// 断言window.Spotify为任意类型
const spotify = window.Spotify as any;
const player = new spotify.Player({
  name: "My React Player",
  getOAuthToken: (cb) => cb("your-token-here"),
});

// 对device_id断言
const deviceId = playbackState.device_id as string;

注意这种方式会失去类型校验的优势，仅适合临时场景。

3. 使用社区维护的类型包 #

安装第三方类型包来覆盖SDK的类型定义：

npm install @types/spotify-web-playback-sdk --save-dev

安装完成后，TypeScript会自动读取这些类型，无需手动编写声明文件。注意确认包的版本与你使用的Spotify SDK版本匹配，避免出现类型不兼容问题。

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