在react和typescript文件中使用外部JS函数

Question

在我的react/next.js/typescript 文件中，我在useEffect 中加载YouTube iframe API，如下所示

    useEffect(() => {
    const tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName('script')[0];
    const scriptContainer = document.head || document.documentElement;
    if (firstScriptTag) {
        scriptContainer.insertBefore(tag, firstScriptTag);
    }
    else {
        scriptContainer.appendChild(tag);
    }
}, []);

然后，在脚本的后面部分，我尝试使用“YT”，它是由 YouTube iframe API 脚本创建的对象，如下所示

async function all_api_requests_finished(): Promise<void> {
num_vids = unshuffled_video_ids.length;
shuffled_video_ids = shuffle(unshuffled_video_ids); // Assuming shuffle function exists and returns the shuffled array

// Loading player
player = new YT.Player('player', {
    videoId: shuffled_video_ids[curr_vid], // The code of the initial video to play
    height: '390',
    width: '640',
    events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange,
        'onError': onPlayerError,
    }
});
player_loaded = true;

};

但是，它不会让我构建这个 next.js/react 项目，并显示“找不到名称‘YT’。”。我如何让它知道我正在从外部脚本加载“YT”对象，这样它就不会在构建时中断？

提前谢谢你:)<3

Answer 1

您需要声明 youtube 为您创建的对象，以便 Next 和 React 不会抱怨未知类型。

如果它没有连接到窗户上（看起来并非如此），您可以这样做：

declare global {
  interface YT: {
  someMethod: (someParam: string) => void
  }
}

或者如果它自动附加到窗口：

declare global {
    interface Window { YT: ...; }
}

这些全局声明中的接口与应用程序中其他地方的接口和类型的工作方式相同，但您可能希望将其放入

.d.ts

文件中。这不再是必需的，但它使某些构建过程变得更容易。