如何在TypeScript开发的React Native项目中设置全局变量并解决类型报错

你之前使用的扩展NodeJS.Global接口的方案是旧版本Node环境、老旧版本React Native的全局变量类型声明方式。当前React Native的TypeScript类型定义已经对齐ES标准，全局对象统一使用globalThis类型定义，因此扩展NodeJS.Global不会生效。
另外如果你的声明文件没有被TypeScript识别为模块，也会导致全局声明无效，这也是大部分同场景问题的诱因。

按以下步骤操作即可生效：

1. 首先在你项目的tsconfig.json中确认，你存放声明文件的路径已经被加入include数组，常见配置示例：

{
  "include": [
    "src/**/*",
    "global.d.ts" // 确保你的声明文件路径在这个列表里
  ]
}

2. 新建（或修改已有的）声明文件，比如根目录下的global.d.ts，写入如下代码：

// 这行是必须的，作用是将当前文件标记为模块，否则全局声明不会生效
export {}

declare global {
  // 在这里声明你需要的全局变量，注意必须使用var，不能用let/const
  var foo: any // 这里可以替换成你实际的变量类型
  // 新增其他全局变量继续往下加即可
  // var userInfo: {id: number, name: string}
}

3. 如果你习惯使用global.foo的写法而非globalThis.foo或者直接调用foo，可以在上述声明文件中额外加一行类型定义：

declare var global: typeof globalThis

• 声明全局变量时必须使用var关键字，let和const声明的顶层变量不会被合并到globalThis类型中
• 修改完声明文件后如果类型报错没有消失，可以重启TypeScript语言服务：VSCode用户按下Ctrl+Shift+P（Mac为Command+Shift+P），选择「TypeScript: Restart TS Server」即可

内容的提问来源于stack exchange，提问作者Sharique Khan