使用RequireJS时TypeScript类型始终为undefined的问题排查

我来帮你梳理下你遇到的问题——用RequireJS加载TypeScript编译后的模块时类型为undefined，大概率是模块编译配置或者加载写法没匹配上，下面一步步给你解决思路：

1. 先把TypeScript编译配置改对 #

RequireJS是基于AMD模块规范的，所以你的TypeScript代码必须编译成AMD格式才能被正确识别。你需要在tsconfig.json里明确配置：

{
  "compilerOptions": {
    "module": "amd", // 核心：指定编译为AMD模块
    "target": "ES5", // 适配大多数浏览器和RequireJS环境
    "outDir": "./dist" // 可选，把编译后的JS文件统一放到dist目录，方便管理
  }
}

2. 修正模块导出与页面加载的写法 #

你的Person.ts写法本身没问题，但要注意编译后文件的引用和require的调用逻辑：

确认Person.ts的导出（两种写法都可行） #

你原来的ES模块导出写法是OK的：

export class Person { 
    name: string; 
    constructor() { 
        this.name = 'simon'; 
    } 
}

如果想更贴合AMD风格，也可以改成这种导出方式：

class Person {
    name: string;
    constructor() {
        this.name = 'simon';
    }
}

export = Person;

调整HTML里的加载代码 #

• 首先，data-main指向的必须是编译后的Person.js文件，不是ts源文件；
• 然后，require的回调函数要正确接收模块：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <!-- 如果编译后的文件在当前目录，就写Person；如果在dist目录就写dist/Person -->
    <script src="require.js" data-main="Person"></script>
</head>
<body>
<script type="text/javascript">
    // 完整的require调用写法
    require(['Person'], function(Person) {
        const personInstance = new Person();
        console.log(personInstance.name); // 应该能正常输出'simon'
    });
</script>
</body>
</html>

3. 几个容易踩的坑要排查 #

• 文件路径：确认require.js和编译后的Person.js路径是否对应，比如如果把编译产物放到了dist文件夹，data-main就得改成dist/Person；
• 编译产物检查：打开编译后的Person.js，看看开头是不是有define(...)的AMD模块结构，要是没有，说明编译配置没生效；
• 全局变量冲突：检查页面里有没有其他全局变量叫Person，会覆盖模块加载的结果。

按照这些步骤调整后，应该就能正常加载并使用Person模块了。

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