时间戳

首页 > 解决方案 > 在 React Typescript 项目中使用来自 JS lib 的窗口对象

javascript - 在 React Typescript 项目中使用来自 JS lib 的窗口对象

问题描述

在 React 和 Typescript 中有一个全新的项目，我需要使用我的同事开发的 JS Lib。

使用 NPM 将 lib 打包并添加到项目中。min.js 的内容如下：

window.SharedObj=function(e){
...
}

因此，此库旨在在窗口范围内注册 SharedObj 的实例，我需要在我的顶级组件 (index.tsx) 中检索此实例。

我已经成功地这样做了：

require('path/lib.min.js');

// @ts-ignore
new SharedObj();

if ((window as any).SharedObj) {
    ReactDOM.render(
        <React.StrictMode>
            <App/>
        </React.StrictMode>,
        document.getElementById('root')
    );
}

这行得通，但我认为 ts-ignore 和 "as any" 来完成这项工作似乎是错误的。

你有更好的解决方案吗？我可以扩展 Window 定义吗？

标签： javascriptreactjstypescriptwebpack

解决方案

您可以将Window对象全局声明为作为SharedObj其属性之一的接口。

declare global {
  interface Window {
    // you'll need to explicitly specify the
    // type of arguments & function return type
    SharedObj: (e: ArgsType) => ReturnType;
  }
}

推荐阅读