TypeScript 模块的导入和导出

TypeScript 是一种强类型的 JavaScript 超集，它提供了更好的类型检查和语法提示。在前端开发中，模块化是一种很常见的编程方式。在 TypeScript 中，模块化通过导入和导出来实现。本文将详细介绍 TypeScript 模块的导入和导出，包括语法、用法和示例代码。

导出

在 TypeScript 中，我们可以使用 export 关键字将一个变量、函数或类导出。导出的变量、函数或类可以在其他文件中被导入和使用。

导出变量

export const name: string = 'Tom';

上面的代码中，我们使用 export 关键字将一个字符串类型的变量 name 导出。在其他文件中，我们可以通过以下方式导入和使用它：

import { name } from './module';
console.log(name); // 输出 'Tom'

导出函数

export function add(a: number, b: number): number {
  return a + b;
}

上面的代码中，我们使用 export 关键字将一个函数 add 导出。在其他文件中，我们可以通过以下方式导入和使用它：

import { add } from './module';
console.log(add(1, 2)); // 输出 3

导出类

export class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

上面的代码中，我们使用 export 关键字将一个类 Person 导出。在其他文件中，我们可以通过以下方式导入和使用它：

import { Person } from './module';
const person = new Person('Tom');
person.sayHello(); // 输出 'Hello, Tom!'

导出默认值

除了上面介绍的导出方式，我们还可以使用 export default 关键字将一个默认值导出。一个模块只能有一个默认导出。

const name: string = 'Tom';
export default name;

上面的代码中，我们使用 export default 关键字将一个字符串类型的变量 name 导出为默认值。在其他文件中，我们可以通过以下方式导入和使用它：

import name from './module';
console.log(name); // 输出 'Tom'

导入

在 TypeScript 中，我们可以使用 import 关键字导入其他模块中导出的变量、函数或类。

导入变量

import { name } from './module';
console.log(name); // 输出 'Tom'

上面的代码中，我们使用 import 关键字导入一个字符串类型的变量 name。在本地作用域中，我们可以直接访问它的值。

导入函数

import { add } from './module';
console.log(add(1, 2)); // 输出 3

上面的代码中，我们使用 import 关键字导入一个函数 add。在本地作用域中，我们可以直接调用这个函数。

导入类

import { Person } from './module';
const person = new Person('Tom');
person.sayHello(); // 输出 'Hello, Tom!'

上面的代码中，我们使用 import 关键字导入一个类 Person。在本地作用域中，我们可以使用 new 关键字创建这个类的实例，并调用它的方法。

导入默认值

除了上面介绍的导入方式，我们还可以使用 import default 关键字导入一个默认值。

import name from './module';
console.log(name); // 输出 'Tom'

上面的代码中，我们使用 import default 关键字导入一个字符串类型的变量 name。在本地作用域中，我们可以直接访问它的值。

总结

本文详细介绍了 TypeScript 模块的导入和导出，包括语法、用法和示例代码。通过学习本文，你可以更好地理解 TypeScript 中的模块化编程，提高代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658f684aeb4cecbf2d508182