在前端开发中，模块化是一个非常重要的概念，可以有效地管理代码，提高代码的可维护性和可复用性。在 ES6 中，引入了模块化语法，可以通过 import 和 export 关键字来实现模块化。在 TypeScript 中，也可以使用 ES6 模块化语法来进行模块化开发，但是与传统的模块化开发方式有一些区别。
ES6 模块化语法
ES6 中的模块化语法主要包括两个关键字：import 和 export。通过 export 关键字，可以将模块中的变量、函数或类等导出，使其可以在其他模块中使用。例如：
// moduleA.ts
export const a = 1;
export function foo() {}
export class Person {}
// moduleB.ts
import { a, foo, Person } from './moduleA';在 moduleA 中，我们使用 export 关键字将变量 a、函数 foo 和类 Person 导出。在 moduleB 中，我们使用 import 关键字引入了 moduleA 中导出的变量、函数和类。
TypeScript 中的 ES6 模块化语法
在 TypeScript 中，我们也可以使用 ES6 的模块化语法来进行模块化开发。与 ES6 中的模块化语法类似，我们可以使用 export 关键字将变量、函数或类等导出，使用 import 关键字引入其他模块中的内容。例如：
// moduleA.ts
export const a = 1;
export function foo() {}
export class Person {}
// moduleB.ts
import { a, foo, Person } from './moduleA';与 ES6 中的模块化语法类似，我们使用 export 关键字将变量 a、函数 foo 和类 Person 导出。在 moduleB 中，我们使用 import 关键字引入了 moduleA 中导出的变量、函数和类。
import/export 的区别
在 TypeScript 中，与 ES6 不同的是，我们还可以使用 import 和 export 关键字来实现命名空间和模块的分离。在 ES6 中，所有的 export 都是公开的，而在 TypeScript 中，我们可以使用 export default 关键字来导出默认的模块。例如：
// javascriptcn.com 代码示例
// moduleA.ts
const a = 1;
function foo() {}
class Person {}
export { a, foo, Person };
export default Person;
// moduleB.ts
import Person, { a, foo } from './moduleA';在 moduleA 中，我们使用 export 关键字将变量 a、函数 foo 和类 Person 导出，同时使用 export default 关键字将类 Person 导出。在 moduleB 中，我们使用 import 关键字引入了 moduleA 中导出的变量 a 和函数 foo，同时使用 import Person from './moduleA' 引入了默认导出的类 Person。
另外，ES6 中的 import 和 export 关键字只能用于模块化开发，而在 TypeScript 中，我们还可以使用 namespace 关键字来实现命名空间的分离。例如：
// javascriptcn.com 代码示例
// moduleA.ts
namespace MyModule {
export const a = 1;
export function foo() {}
export class Person {}
}
// moduleB.ts
import { MyModule } from './moduleA';在 moduleA 中，我们使用 namespace 关键字创建了一个名为 MyModule 的命名空间，并在其中使用 export 关键字导出了变量 a、函数 foo 和类 Person。在 moduleB 中，我们使用 import 关键字引入了 moduleA 中的命名空间 MyModule。
总结
ES6 中的模块化语法和 TypeScript 中的 ES6 模块化语法都可以用于模块化开发，但在 TypeScript 中，我们还可以使用 export default 关键字来导出默认的模块，使用 namespace 关键字来实现命名空间的分离。在实际开发中，我们应该根据项目的具体需求，选择合适的模块化开发方式。
参考代码
// javascriptcn.com 代码示例
// moduleA.ts
const a = 1;
function foo() {}
class Person {}
export { a, foo, Person };
export default Person;
// moduleB.ts
import Person, { a, foo } from './moduleA';
// moduleC.ts
namespace MyModule {
export const a = 1;
export function foo() {}
export class Person {}
}
// moduleD.ts
import { MyModule } from './moduleC';来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656b0066d2f5e1655d3783ee