微信小程序在TypeScript中定义全局变量

Question

尊敬的 Whosebug 用户，

我为浏览器和微信小程序做了一个模块。该模块是用多种 TypeScript 编写的，并被编译成一个缩小的文件。在该模块中，我需要使用 DOM/BOM API，例如 document、'window, 'navigator。在浏览器上加载使用编译后的单文件没有问题

但是在微信小程序上，没有Node上的global对象。也没有浏览器上的 document 和 window 全局对象。为了解决这个问题，我为每个环境创建了两个构建命令。

grunt build，浏览器的标准 TS 编译
grunt wx_build, 微信小程序标准TS编译加补丁

修补后的 js 文件如下所示：

// mymodule-bundle.min.js

// patch
window=require("./miniapp-adapter/src/index.js");
document=require("./miniapp-adapter/src/document.js").default;

// original compiled/minified code
(function(f){if(typeof exports==="object"&&typeof module!=="undefined")...

在微信小程序项目中，我把mymodule-bundle.min.js和miniapp-adapter放在同一个文件夹下。因此，我可以将我的 HTML5 应用程序移植到微信小程序。

但我想要一种更聪明的方法。

How can I declare the window or document global variable in mymodule.ts for WeChat mini-program runtime?

谢谢。

Answer 1

这是声明它们的方式：

declare const document: any
declare const window: any

要为智能感知获得更好的类型，如果您需要消费者使用它们，您只需将它们设为代表您放置在那里的内容的类型。否则你可以就这样离开他们。

在 Node 中你可以这样做：

declare namespace NodeJS {
  export interface Global {
    window: any
    document: any
  }
}

global.window = require("./miniapp-adapter/src/index.js");
global.document = require("./miniapp-adapter/src/document.js").default;

不过，要在 Node 上保持惯用，您应该将它们从模块中导出，而不是将它们加载到全局命名空间中。

微信小程序在TypeScript中定义全局变量

Defining global variables in TypeScript for WeChat mini program

typescript

dom

wechat

javascript-scope

wechat-miniprogram