TypeScript 中的 export 和 import

在 TypeScript 中，我们可以使用 export 和 import 关键字来实现模块化开发。这样可以让我们的代码更加清晰、易于维护和重用。

export

在 TypeScript 中，我们可以使用 export 关键字来导出一个变量、函数或类。例如：

// javascriptcn.com 代码示例
export const PI = 3.14;

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

export class Person {
  constructor(public name: string) {}
}

上面的代码中，我们分别导出了一个常量 PI，一个函数 add 和一个类 Person。

我们还可以使用 export default 来导出一个默认的变量、函数或类。例如：

// javascriptcn.com 代码示例
export default function sayHello(name: string) {
  console.log(`Hello, ${name}!`);
}

export default class Person {
  constructor(public name: string) {}
}

export default "Hello, world!";

上面的代码中，我们分别导出了一个默认的函数 sayHello，一个默认的类 Person 和一个默认的字符串 "Hello, world!"。

import

在 TypeScript 中，我们可以使用 import 关键字来导入一个变量、函数或类。例如：

import { PI, add, Person } from "./math";

console.log(PI); // 输出 3.14
console.log(add(1, 2)); // 输出 3

const person = new Person("Tom");
console.log(person.name); // 输出 Tom

上面的代码中，我们从 ./math 模块中分别导入了 PI、add 和 Person。

如果我们想导入默认的变量、函数或类，可以使用 import default。例如：

// javascriptcn.com 代码示例
import sayHello from "./hello";

sayHello("Tom"); // 输出 Hello, Tom!

import Person from "./person";

const person = new Person("Tom");
console.log(person.name); // 输出 Tom

import message from "./message";

console.log(message); // 输出 Hello, world!

上面的代码中，我们分别从 ./hello、./person 和 ./message 模块中导入了默认的函数、类和字符串。

模块化开发的好处

使用模块化开发可以让我们的代码更加清晰、易于维护和重用。当我们的代码量越来越大时，模块化开发可以帮助我们更好地组织代码，减少代码的耦合度，方便代码的复用和维护。

总结

在 TypeScript 中，我们可以使用 export 和 import 关键字来实现模块化开发。使用模块化开发可以让我们的代码更加清晰、易于维护和重用。在实际开发中，我们应该尽可能地使用模块化开发，以提高代码的可读性和可维护性。

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