如何编写TypeScript使编译后生成带export的ES5函数适配Blazor WASM

要实现将TypeScript代码编译为带export的ES5函数，适配Blazor WASM的JSInvoke需求，可按以下方式操作：

方法1：直接定义导出函数（最直接） #

如果不需要类的面向对象特性，直接用函数替代类定义并显式导出：

export function myClass() {
  // 原类构造函数内的逻辑
}

编译后直接生成目标代码：

export function myClass() {

}

方法2：调整TypeScript配置保留导出 #

若必须使用类的语法，修改tsconfig.json的模块配置，确保编译时保留ES模块导出：

{
  "compilerOptions": {
    "target": "ES5",       // 目标编译为ES5语法
    "module": "ESNext",    // 采用ES模块系统，保留export语句
    "outDir": "./dist",    // 指定编译输出目录
    "strict": true
  }
}

此时编写TS类：

export class myClass {
  constructor() {
    // 构造逻辑
  }

  someMethod() {
    // 方法实现
  }
}

编译后的ES5代码会保留export，类的方法会挂载到原型链上：

export function myClass() {
    // 构造逻辑
}

myClass.prototype.someMethod = function () {
    // 方法实现
};

方法3：显式补充导出（适配特殊配置场景） #

如果现有配置下export class编译后丢失导出，可在文件末尾显式添加导出声明：

export class myClass {
  // 类代码
}

// 显式导出类（编译后会转为导出对应的函数）
export { myClass };

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