如何让Node.js项目中TypeScript函数可在浏览器控制台调用？

核心原因 #

直接用export声明的函数会被TS/打包工具封装在模块作用域内，不会自动暴露到浏览器的全局window对象，所以控制台调用时会出现ReferenceError。

推荐解决方案 #

1. 类型安全的全局挂载（最推荐） #

先扩展TS的Window接口，让类型系统识别你要暴露的函数，再挂载到window上，既保留类型检查，又实现全局调用：

// 扩展Window接口，可放在当前文件顶部或全局类型文件（如global.d.ts）
interface Window {
  doThing: (x: number, y: number) => void;
}

// 定义函数
export function doThing(x: number, y: number): void {
  // 你的业务逻辑
  console.log(`执行doThing，参数：${x}, ${y}`);
}

// 挂载到全局window
window.doThing = doThing;

这样在控制台直接输入doThing(1,2)就能调用，TS也会对函数参数和返回值做类型校验，避免any带来的类型丢失问题。

2. 禁用模块系统（适合简单场景） #

如果你的项目不需要使用ES模块（没有import/export语句），可以修改tsconfig.json让TS直接生成全局作用域的函数：

// tsconfig.json
{
  "compilerOptions": {
    "module": "None", // 禁用模块系统
    "target": "ES5",
    "outDir": "./dist"
  }
}

然后代码里不需要export，直接声明函数：

function doThing(x: number, y: number): void {
  // 逻辑
}

编译后函数会直接存在全局作用域，控制台可直接调用，但这种方法不适合需要模块化的复杂项目。

3. 配置打包工具输出UMD格式（兼顾模块化和全局） #

如果用Webpack、Vite等打包工具，可以将输出配置为UMD格式，这样模块既可以被其他代码import使用，也能在全局暴露：
以Webpack为例，修改配置：

// webpack.config.js
module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    library: 'MyApp', // 全局变量名
    libraryTarget: 'umd',
    globalObject: 'this'
  },
  // 其他TS loader配置...
};

打包后，你可以通过window.MyApp.doThing在控制台调用，同时其他模块也能通过import { doThing } from './my-app'引入。

对比临时方案 #

你之前用(window as any).doThing = doThing的方法虽然能生效，但丢失了TS的类型校验能力，推荐用第一种类型安全的挂载方式替代，既满足需求又符合TS的最佳实践。

内容的提问来源于stack exchange，提问作者Josh Brunton