时间戳

首页 > 解决方案 > 将 TypeScript 回调函数提升到窗口对象

reactjs - 将 TypeScript 回调函数提升到窗口对象

问题描述

我得到了一个工作 HTML 页面，其中包含如下所示的 JS 代码：

<script type="text/javascript">
    function nativeThingEventHandler(event) {
        console.log("event received: " + event);
    }

    window.onload = function() {
        if (typeof nativeThing !== "undefined") {
            console.log("Native thing was found");      
            nativeThing.setListener("nativeThingEventHandler");
        }
    }
</script>

其中nativeThing是 HTML 外部的本机对象，它执行操作，然后调用nativeThingEventHandler（如您所见，在 JS 代码的顶层定义）回调。我需要将此 HTML 页面集成到 React Typescript 项目中，而且我是 TypeScript 的新手。我在实现该nativeThingEventHandler函数时遇到了麻烦，以便可以通过 找到它，因此当对象发回事件nativeThing时，我不断收到错误消息。nativeThing如何在 typescript 中定义事件处理程序，以便在项目构建后，可以在 JS 代码的顶层找到它？

编辑澄清： nativeObject 的 API 期望setListener方法中有一个字符串，然后期望在 Javascript 的顶层（不在任何其他函数内部）有一个与该字符串同名的函数。所以这个问题专门关于如何编写一个打字稿函数，一旦编译，将导致该函数被放置在 javascript 的顶层。

标签： reactjstypescript

解决方案

一个丑陋的解决方法是手动将回调函数分配给下面的变量window：

import { nativeThingEventHandler } from 'somewhere';

(window as any).nativeThingEventHandler = nativeThingEventHandler;

推荐阅读