TypeScript 入门之旅：玩转全屏模式（59 行代码）

前端

2023-11-11 13:07:17

作为前端开发的新手，您可能正在寻找一些实际项目来检验自己的技能。本指南将向您展示如何使用 TypeScript 构建一个简单的全屏按钮，代码量控制在 1KB 以内，让您轻松阅读和理解。

前言

在许多网站和应用程序中，全屏模式都是必不可少的。它允许用户沉浸式地浏览内容，获得更佳的视觉体验。在本文中，我们将一步一步地带您实现一个简单的 TypeScript 全屏按钮，让您轻松掌握这项实用技能。

实现步骤

1. 创建 TypeScript 项目

首先，您需要创建一个新的 TypeScript 项目。您可以使用命令行工具或您喜欢的代码编辑器来完成此操作。

2. 引入必要的库

要使用 TypeScript 构建全屏按钮，我们需要引入必要的库。在本例中，我们将使用以下库：

import { useEffect, useRef } from "react";

3. 定义组件

接下来，我们需要定义一个 TypeScript 组件来构建我们的全屏按钮。组件的代码如下：

const FullscreenButton = () => {
  const ref = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    const button = ref.current;
    if (!button) return;

    const toggleFullscreen = () => {
      if (!document.fullscreenElement) {
        button.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    };

    button.addEventListener("click", toggleFullscreen);

    return () => {
      button.removeEventListener("click", toggleFullscreen);
    };
  }, []);

  return <button ref={ref}>Toggle Fullscreen</button>;
};