TypeScript 命名空间

JavaScript 模块化（ES Modules）已经逐步取代 TypeScript 的命名空间。
Vite 等其他前端构建工具已经逐步取代 TS 的打包命令

命名空间

namespace User {
  export let title = 'User';
}
namespace Member {
  export  let title = 'Member';
  export namespace User{
    export let title = 'Muber->user'
  }
}

console.log(User.title);

文件编译

最原始的方式，直接编译成 JS 文件然后在 HTML 中使用。

文件打包

通过下面的方式，可以将多个 TS 文件打包成一个 JS 文件。

但是需要手动指名需要合并的一系列文件的文件名。

tsc --outFile ./dist/app.js User.ts App.ts

reference 引用

/// <reference> 是一种特殊的注释语法，用于告诉 TypeScript 编译器当前文件依赖于另一个文件。这在命名空间（namespace）中尤其有用，因为命名空间可以跨多个文件定义。

/// <reference path="user.ts">

tsc --outFile ./dist/app.js

AMD 与 RequireJS 管理

关系链： JavaScript (语言) → AMD (模块标准) → RequireJS (具体实现工具)

演进对比： AMD 是 ES6 模块前的重要过渡方案，现代开发推荐使用原生 import/export 语法，RequireJS 多用于维护遗留系统

define(['exports'], function(exports) {
  exports.title = 'User Module';
  exports.User = class User {
    constructor(name) {
      this.name = name;
    }
  };
});

require(['user'], function(user) {
  const { User, title } = user;
  console.log(title); // 输出：User Module
  const userInstance = new User('Alice');
  console.log(userInstance.name); // 输出：Alice
});

混合模块模式

如果在配置了 RequireJS 的 TypeScript 项目中，出现 import {User} from 'user.js' 属于 混合模块模式，其运作原理如下：

核心机制

TypeScript 编译策略
通过 tsconfig.json 配置：

{
  "compilerOptions": {
    "module": "AMD",          // 关键配置：将 import 编译为 define/require
    "moduleResolution": "node" // 或 classic
  }
}

编译器会将 ES6 的 import 转换为 RequireJS 的 define 依赖数组
实际生成的是 AMD 格式代码，与 RequireJS 兼容

运行时加载逻辑

// 编译前 (TS)
import { User } from './user.js';

// 编译后 (JS) → 转为 AMD 格式
define(["require", "exports", "./user"], function(require, exports, user_js_1) {
  const currentUser = new user_js_1.User();
});

# TypeScript 命名空间

# 命名空间

# 文件编译

# 文件打包

# reference 引用

# AMD 与 RequireJS 管理

# 混合模块模式

# 核心机制