函数内TypeScript全局声明及Node.js脚本浏览器执行函数类型错误咨询

嘿，这俩问题都是TypeScript跨环境开发里的典型坑，我给你拆解着说清楚解决方案：

一、函数内部的全局声明问题 #

如果你是想在函数内部定义/扩展全局变量的类型，得注意TypeScript的模块作用域规则：

• 如果你的文件是模块文件（包含import/export语句），直接在函数里declare全局变量会无效，必须用declare global块来包裹类型声明：

  export function setupAppGlobals() {
    // 扩展Window全局接口，添加自定义全局变量类型
    declare global {
      interface Window {
        appVersion: string;
        initApp: () => void;
      }
    }
  
    // 现在给全局变量赋值就不会有类型错误了
    window.appVersion = "1.0.0";
    window.initApp = () => console.log("App initialized!");
  }
  

• 如果你的文件是全局脚本（没有任何import/export），直接在函数里declare就行，但尽量别这么做——全局变量容易导致命名冲突，能不用就不用。

小提醒：除非万不得已，优先用模块导出/导入来共享变量，全局变量是下策哦。

二、Node.js脚本中浏览器环境函数的类型错误 #

这种场景太常见了——比如写Node脚本生成要发给浏览器执行的代码，或者像Protractor这类E2E框架里，测试代码跑在Node但要操作浏览器上下文。解决方法有几个，按推荐度排序：

1. 针对性添加类型声明（最推荐） #

在你的浏览器专属函数内部，手动声明浏览器全局变量的类型，既保留类型检查，又不会污染Node环境的类型：

// Node环境下的脚本
const browserExecutableFunction = () => {
  // 声明当前作用域下的浏览器全局变量类型
  declare const window: Window & typeof globalThis;
  declare const localStorage: Storage;

  // 现在调用window.foo和localStorage就不会报错了
  window.foo();
  localStorage.clear();
};

// 序列化后发给浏览器执行
sendToBrowser(JSON.stringify(browserExecutableFunction.toString()));

2. 使用@ts-expect-error忽略特定错误 #

如果你确认这段代码只会在浏览器跑，不想写额外的类型声明，可以用@ts-expect-error（比@ts-ignore更严谨，因为如果后续错误消失了，TS会提醒你）：

const browserExecutableFunction = () => {
  // @ts-expect-error 此函数仅在浏览器环境执行，window为浏览器全局变量
  window.foo();
  // @ts-expect-error 同上，localStorage是浏览器专属API
  localStorage.clear();
};

3. 利用TypeScript配置隔离环境 #

如果这类浏览器专属代码比较多，可以单独建一个文件，然后在tsconfig.json里给这个文件单独配置DOM相关的lib：

{
  "compilerOptions": {
    // 全局配置（Node环境）
    "lib": ["ES2020", "Node"],
    // ...其他配置
  },
  "include": ["src/**/*"],
  "files": [
    "src/browser-only-code.ts"
  ],
  "extends": "./tsconfig.browser.json"
}

然后新建tsconfig.browser.json：

{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"]
  }
}

4. 针对Protractor场景的特殊处理 #

如果你用的是Protractor，直接安装官方类型定义包就行，它已经内置了浏览器环境的类型：

npm install @types/protractor --save-dev

安装后，TS就能自动识别browser、window、localStorage这些Protractor测试里常用的浏览器上下文变量了。

内容的提问来源于stack exchange，提问作者Estus Flask