将 YouTube 搜索结果嵌入网站 - TypeScript

在本文中，我们将研究如何使用 TypeScript 将 YouTube 搜索结果嵌入到网站中。这将涉及到使用 YouTube Data API 和 TypeScript 的一些基本知识。

准备工作

在开始之前，您需要拥有一个有效的 Google 帐户和 YouTube API 密钥。如果您还没有，请根据以下步骤操作：

1. 转到 https://console.developers.google.com/
2. 创建一个新的项目，并为其命名
3. 在左侧菜单中选择“API 和服务”，然后选择“库”
4. 搜索“YouTube Data API”并启用它
5. 点击“创建凭据”创建 API 密钥
6. 将 API 密钥保存在安全的位置

安装 TypeScript

要使用 TypeScript 编写代码，您需要在计算机上安装 TypeScript。如果您还没有安装 TypeScript，请根据以下步骤操作：

1. 安装 Node.js (https://nodejs.org/)
2. 打开命令提示符或终端并运行以下命令：

   npm install -g typescript
   

创建 TypeScript 项目

现在，我们将创建一个简单的 TypeScript 项目来搜索 YouTube 并显示结果。按照以下步骤操作：

1. 创建一个新文件夹
2. 在文件夹中打开命令提示符或终端并运行以下命令：

   tsc --init
   

   这将创建一个名为 tsconfig.json 的文件。
3. 打开 tsconfig.json 并取消注释以下行：

   "target": "es5",
   "module": "commonjs",
   

4. 在命令提示符或终端中运行以下命令以安装依赖项：

   npm install google-auth-library googleapis
   

5. 创建一个名为 index.ts 的文件

现在，我们已准备好开始编写 TypeScript 代码。

编写 TypeScript 代码

在 index.ts 中，我们将编写代码，该代码将搜索 YouTube 并显示结果。以下是代码：

import * as googleapis from 'googleapis';
import { OAuth2Client } from 'google-auth-library';

interface IVideo {
  videoId: string;
  title: string;
  thumbnail: string;
}

async function searchYoutube(query: string, maxResults: number): Promise<IVideo[]> {
  const oauth2Client = new OAuth2Client();
  const { tokens } = await oauth2Client.refreshAccessToken();

  const youtube = googleapis.youtube({
    version: 'v3',
    auth: tokens.access_token
  });

  const result = await youtube.search.list({
    q: query,
    part: 'id,snippet',
    type: 'video',
    maxResults: maxResults
  });

  const videos: IVideo[] = result.data.items.map(item => ({
    videoId: item.id.videoId,
    title: item.snippet.title,
    thumbnail: item.snippet.thumbnails.high.url
  }));

  return videos;
}

async function main() {
  const videos = await searchYoutube('TypeScript Tutorial', 10);
  console.log(videos);
}

main().catch(console.error);

运行 TypeScript 代码

运行以下命令来编译并运行 TypeScript 代码：

tsc && node index.js

结论

在这篇文章中，我们学习了如何使用 TypeScript 编写代码来搜索 YouTube 并将结果嵌入到网站中。我们使用了 YouTube Data API 和 TypeScript 的一些基本知识来编写这个简单的应用程序。现在，您可以使用这些技术来创建自己的应用程序。