在前端开发中，模块化是一个非常重要的概念。在过去，一个网页可能会包含数十个脚本文件，每个文件都有自己的作用域和变量名称，这给维护和管理带来了很大的麻烦。而现在，使用模块化的方式可以将代码拆分成多个小块，让每个小块都拥有自己的作用域和名称空间，避免了命名冲突和其他问题。TypeScript 中提供了一个非常强大的模块系统，让我们可以轻松地组织和管理代码。
ES6 模块语法
TypeScript 的模块系统基于 ES6 的模块语法。ES6 模块语法主要有两种导出方式：命名导出和默认导出。
命名导出
命名导出使用 export 关键字将一个变量或函数导出：
// 将一个变量导出
export const name = 'John';
// 将一个函数导出
export function greet() {
console.log('Hello, world!');
}可以使用花括号 {} 来导入一个或多个命名导出：
import { name, greet } from './module';默认导出
默认导出使用 export default 关键字将一个变量、函数或类导出：
// javascriptcn.com 代码示例
// 将一个变量导出为默认值
export default 'John';
// 将一个函数导出为默认值
export default function greet() {
console.log('Hello, world!');
}
// 将一个类导出为默认值
export default class Person {
name: string;
constructor(name: string) {
this.name = name;
}
}可以使用任何标识符来导入默认导出：
import myDefault from './module';
使用 TypeScript 模块
TypeScript 使用和 ES6 类似的语法来导入和导出模块。
导出模块
使用 export 关键字来导出一个变量、函数或类：
// javascriptcn.com 代码示例
// 导出一个变量
export const name = 'John';
// 导出一个函数
export function greet() {
console.log('Hello, world!');
}
// 导出一个类
export class Person {
name: string;
constructor(name: string) {
this.name = name;
}
}同时，也可以组合命名导出和默认导出：
// 命名导出一个变量
export const name = 'John';
// 默认导出一个函数
export default function greet() {
console.log('Hello, world!');
}导入模块
使用 import 关键字来导入一个模块：
import { name, greet } from './module'; // 导入命名导出
import myDefault from './module'; // 导入默认导出
console.log(name); // 输出 'John'
greet(); // 输出 'Hello, world!'
console.log(myDefault); // 输出 'John'同时，也可以重命名导出变量的名称：
import { name as myName } from './module';
console.log(myName); // 输出 'John'总结
模块化是现代前端开发中非常重要的概念。TypeScript 提供了一个强大的模块系统，可以让我们轻松地组织和管理代码。本文介绍了 ES6 模块语法以及如何在 TypeScript 中使用模块。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652b8d907d4982a6ebd6115d