如何在Vue2+TypeScript项目中导入@types/youtube的YouTube API类型

1. 安装依赖 #

首先确保已经将类型包安装到开发依赖：

npm install @types/youtube --save-dev
# 或使用yarn
yarn add @types/youtube --dev
# 或使用pnpm
pnpm add @types/youtube -D

2. 调整tsconfig.json配置 #

• 如果你的compilerOptions中显式配置了types数组，需要在数组中新增youtube项，保留原有其他类型配置即可：

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "types": ["youtube", "node"] // 原有其他类型如webpack-env等可保留
  }
}

• 如果你没有手动配置types数组，可跳过这一步，TS默认会引入typeRoots路径下所有类型包。

3. 移除重复全局声明 #

删除你之前在global.d.ts中手动声明的YT: any代码，@types/youtube已经自动声明了全局YT命名空间和Window.YT属性，手动声明会覆盖官方类型定义导致失效。
同时确保global.d.ts在你tsconfig.json的include数组包含的路径范围内，一般放在项目src目录下即可。

4. 组件代码优化 #

无需手动导入任何YT相关类型，TS会自动识别全局YT类型。你可以优化原有代码的类型定义：

// 把原有的any类型替换为更精准的HTMLElement
$refs!: {
  ytplayer: HTMLElement
};

所有YT相关的API都会自动获得类型提示，比如onReady回调的event参数会自动识别为YT.PlayerEvent类型。

生效验证 #

如果修改配置后仍有报错，重启IDE的TypeScript服务即可（VSCode可按快捷键Ctrl+Shift+P，选择「TypeScript: Restart TS Server」清除缓存）。将鼠标悬停在代码中的YT.Player上，能弹出对应的类型定义即配置成功。

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