TypeScript文件含import时，无法从JavaScript实例化类的求助

问题场景 #

原本的TypeScript代码如下：

class FieldModel
{
    constructor() {  console.log('test'); }
}

编译后生成的JavaScript是全局变量形式，直接在浏览器控制台或遗留JS代码里用new FieldModel()就能正常实例化：

var FieldModel = /** @class */ (function () {
    function FieldModel() {
        console.log('test');
    }
    return FieldModel;
}());

但一旦给TS文件添加import声明（比如引入rxjs的Subject）：

import {Subject} from "rxjs";

class FieldModel
{
    constructor() {
        console.log('test');
        new Subject(); 
    }
}

TypeScript会把代码编译成AMD模块格式，类被包裹在define函数内部，无法直接从全局访问：

define("Path/to/the/typescript/file/without/extension", ["require", "exports", "rxjs"], function (require, exports, rxjs_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var FieldModel = /** @class */ (function () {
        function FieldModel() {
            console.log('test');
            new rxjs_1.Subject();
        }
        return FieldModel;
    }());
});

解决办法 #

1. 将类挂载到全局对象 #

在TypeScript代码末尾，手动把FieldModel挂载到浏览器的全局window对象上，同时处理TypeScript的类型校验：

import {Subject} from "rxjs";

class FieldModel
{
    constructor() {
        console.log('test');
        new Subject(); 
    }
}

// 扩展window接口，避免TS类型报错
declare global {
    interface Window {
        FieldModel: typeof FieldModel;
    }
}

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

编译后，FieldModel就会成为全局变量，直接用new FieldModel()就能访问。

2. 调整TypeScript编译选项 #

修改tsconfig.json的module配置，将模块系统改为umd（通用模块定义），这样编译后的代码既能支持模块加载器，也能在全局环境下使用：

{
  "compilerOptions": {
    "module": "umd",
    // 其他编译选项...
  }
}

编译后生成的代码会自动处理全局暴露的逻辑，无需手动修改代码。

3. 通过模块加载器访问 #

如果项目中已经使用了RequireJS这类AMD模块加载器，可以在控制台或遗留JS里通过require函数获取模块：

require(['Path/to/the/typescript/file/without/extension'], function(module) {
    const instance = new module.FieldModel();
});

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