如何让TypeScript模块中的函数可被Razor组件调用

1. 全局挂载方案（最直接） #

如果你的TS模块代码是这样的（testmod.ts）：

export function doSomething() {
  console.log("Hello from module");
}

要让Razor组件能访问，在模块末尾把需要暴露的成员挂载到浏览器全局的window对象上：

export function doSomething() {
  console.log("Hello from module");
}

// 挂载到全局window，解决Razor访问问题
(window as any).testmod = {
  doSomething
};

在Razor组件中，确保先加载编译后的JS文件，即可直接调用：

<script src="/path/to/testmod.js"></script>
<script>
  testmod.doSomething(); // 正常执行
</script>

2. 配置TS编译为UMD模块 #

修改tsconfig.json的编译选项，让模块输出为UMD格式——这种格式既支持ES模块的import/export，也能自动暴露到全局：

{
  "compilerOptions": {
    "module": "UMD",
    "outFile": "./dist/common.js", // 可选：合并所有模块到单个文件，方便全局引用
    "target": "ES6",
    "strict": true
  }
}

模块内正常导出成员即可：

export function formatDate(date: Date): string {
  return date.toLocaleDateString();
}

编译后，Razor里直接通过全局变量访问：

<script src="/dist/common.js"></script>
<script>
  common.formatDate(new Date()); // 调用工具函数
</script>

3. 无命名空间的最佳实践 #

• 放弃命名空间，保持模块独立性，内部模块间依然用import/export组织代码
• 仅将需要在Razor或控制台调用的公共API挂载到全局，避免污染全局空间
• 如果使用ASP.NET Core，也可以用type="module"的脚本标签直接导入模块（不暴露到全局）：

  <script type="module">
    import { doSomething } from '/path/to/testmod.js';
    doSomething();
  </script>
  

关于之前的testmod未定义问题 #

TS默认编译为ES模块，这类模块不会自动挂载到全局对象，Razor中直接访问自然找不到。必须通过显式全局挂载或UMD格式，才能让非模块脚本（比如Razor里的内联脚本）访问到模块成员。

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