如果 url 是图像或视频，请检查 React-TypeScript

在 React-TypeScript 中，当从网络加载图像或视频时，需要确保 URL 是有效的。否则，该组件将无法正确加载或显示图像或视频文件。

为了避免错误，我们可以使用以下代码片段实现 URL 检查功能：

function isImageOrVideo(url: string): boolean {
  const imageTypes = ["jpg", "jpeg", "gif", "png"];
  const videoTypes = ["mp4", "avi", "mov", "wmv"];

  const extension = url
    .split(".")
    .pop()
    .toLowerCase();

  return imageTypes.includes(extension) || videoTypes.includes(extension);
}

上面的代码中，我们使用 isImageOrVideo 函数来检查 URL 是否是图像或视频。我们首先定义了我们所支持的图像和视频文件类型的数组，并且获取 URL 的文件扩展名。最后，我们检查扩展名是否是我们所支持的类型之一，并返回检查结果。

我们可以在使用图片或视频 URL 的组件中使用该函数，如下所示：

import React from "react";

interface Props {
  imageUrl: string;
}

const ImageComponent: React.FC<Props> = ({ imageUrl }) => {
  const [isValidUrl, setIsValidUrl] = React.useState(false);

  React.useEffect(() => {
    setIsValidUrl(isImageOrVideo(imageUrl));
  }, [imageUrl]);

  if (!isValidUrl) {
    return <div>Invalid URL!</div>;
  }

  return <img src={imageUrl} />;
};

上述代码中，我们将 isImageOrVideo 函数的结果存储在组件的状态变量 isValidUrl 中。在组件中，我们使用 React.useEffect 钩子来检查 URL 是否有效。如果 URL 无效，则将返回错误信息，否则将显示图像。

在 React-TypeScript 应用程序中，确保 URL 是有效的非常重要。通过使用上面的代码片段，我们可以轻松实现 URL 检查功能，从而为我们的应用程序增加更多的可靠性和安全性。