如何导出TypeScript类以兼容原生JavaScript与Angular应用？

你的核心需求是让同一个TypeScript类既能在原生HTML/JavaScript环境（无模块加载器）直接使用，又能在**Angular（ES模块环境）**中通过导入复用。要实现这个，我们需要从代码导出逻辑和编译配置两方面做针对性调整：

1. 调整TypeScript代码的导出逻辑 #

我们要让代码同时支持ES模块导出（供Angular使用）和全局变量暴露（供原生JS使用），通过环境判断实现兼容，还能避免全局变量冲突：

// greeter.ts
export class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

// 仅在浏览器全局环境下，将类挂载到自定义命名空间中
if (typeof window !== 'undefined') {
  // 用唯一命名空间包裹，防止和其他全局变量冲突
  window.MySharedComponents = window.MySharedComponents || {};
  window.MySharedComponents.Greeter = Greeter;
}

2. 配置tsconfig.json适配跨环境 #

调整编译选项，让TypeScript生成同时兼容模块和全局环境的代码：

{
  "compilerOptions": {
    "target": "ES5", // 兼容绝大多数浏览器
    "module": "UMD", // 生成支持CommonJS/AMD/全局的通用模块代码
    "declaration": true, // 生成.d.ts类型文件，给Angular提供类型提示
    "outFile": "./dist/greeter.js", // 可选：将代码打包成单个文件，方便原生环境引入
    "strict": true,
    "esModuleInterop": true
  }
}

3. 两种环境的具体使用方式 #

原生HTML+JavaScript环境 #

直接引入编译后的JS文件，通过自定义全局命名空间访问类：

<script src="./dist/greeter.js"></script>
<script>
  const greeter = new MySharedComponents.Greeter('World');
  console.log(greeter.greet()); // 输出 "Hello, World"
</script>

Angular应用环境 #

直接通过ES模块导入，TypeScript的类型提示会自动生效：

// 在Angular组件中导入
import { Greeter } from './path/to/greeter';

@Component({
  selector: 'app-greeter',
  template: `<p>{{ greetMessage }}</p>`
})
export class GreeterComponent {
  greetMessage: string;
  
  constructor() {
    const greeter = new Greeter('Angular User');
    this.greetMessage = greeter.greet();
  }
}

关键注意事项 #

• 避免全局污染：一定要用自定义命名空间（比如MySharedComponents）包裹全局暴露的类，不要直接挂载到window根节点，防止和其他第三方库冲突。
• UMD模块的优势：UMD会自动检测运行环境，模块环境下用ES模块导出，浏览器全局环境下暴露为全局变量，完美适配你的跨场景需求。
• 类型支持：开启declaration: true生成的.d.ts文件，能让Angular开发时获得完整的类型提示，提升开发效率。

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