TypeScript 模块

摘要：在本教程中，你将了解 TypeScript 模块以及如何使用它们来构建代码。

TypeScript 模块简介

自 ES6 以来，JavaScript 开始支持模块作为该语言的内置功能。 TypeScript 与 JavaScript 具有相同的模块概念。

TypeScript 模块可以包含声明和代码。模块在其自己的作用域内执行，而不是在全局作用域内执行。这意味着当你在模块中声明变量、函数、类、接口等时，它们在模块外部不可见，除非你使用 export 语句显式导出它们。

另一方面，如果你想从模块访问变量、函数、类等，则需要使用 import 语句导入它们。

与 ES6 一样，当 TypeScript 文件含有 import 或者 export 时，它被视为模块。

创建一个新模块

以下创建一个名为 Validator.ts 的新模块并声明一个名为 Validator 的接口：

export interface Validator {
    isValid(s: string): boolean
}

在这个模块中，我们将 export 关键字放在 interface 关键字之前，以将其暴露给其他模块。

换句话说，如果不使用 export 关键字，则 Validator 接口在 Validator.ts 模块中是私有的，因此不能被其他模块使用。

export 语句

从模块导出声明的另一种方法是使用 export 语句。例如：

interface Validator {
    isValid(s: string): boolean
}

export { Validator };

TypeScript 还允许你重命名模块使用者的声明，如下所示：

interface Validator {
    isValid(s: string): boolean
}

export { Validator as StringValidator };

在本例中，其他模块将把 Validator 接口作为 StringValidator 接口使用。

导入新模块

要使用模块，请使用 import 语句。以下创建一个使用 Validator.ts 模块的新模块 EmailValidator.ts：

import { Validator } from './Validator';

class EmailValidator implements Validator {
    isValid(s: string): boolean {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(s);
    }
}

export { EmailValidator };

当你导入一个模块时，你可以像这样重命名它：

import { Validator as StringValidator } from './Validator';

在 EmailValidator 模块内，可以使用 Validator 接口作为 StringValidator 接口：

import { Validator as StringValidator } from './Validator';

class EmailValidator implements StringValidator {
    isValid(s: string): boolean {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(s);
    }
}

export { EmailValidator };

下面展示了如何使用 App.ts 文件中的 EmailValidator 模块：

import { EmailValidator } from './EmailValidator';

let email = '[email protected]';
let validator = new EmailValidator();
let result = validator.isValid(email);

console.log(result);

输出：

true

导入类型

下面声明了一个在名为 Types.ts 模块中定义的类型：

export type alphanumeric = string | number;

要从 Types.ts 模块导入 alphanumeric 类型，可以使用 import type 语句：

import type {alphanumeric} from './Types';

请注意，TypeScript 从 3.8 版本开始支持 import type 语句。在 TypeScript 3.8 之前，你需要使用 import 语句：

import {alphanumeric} from './Types';

从模块导入所有内容

要从模块导入所有内容，请使用以下语法：

import * from 'module_name';

重新导出

以下创建一个名为 ZipCodeValidator.ts 的新模块，该模块使用了 Validator.ts 模块：

import { Validator } from './Validator';

class ZipCodeValidator implements Validator {
    isValid(s: string): boolean {
        const numberRegexp = /^[0-9]+$/;
        return s.length === 5 && numberRegexp.test(s);
    }
}

export { ZipCodeValidator };

你可以使用以下语法组合所有导出，将 EmailValidator 和 ZipCodeValidator 模块包装在新模块中：

export * from 'module_name';

以下示例展示了如何将 EmailValidator.ts 和 ZipCodeValidator.ts 模块包装在 FormValidator.ts 模块中：

export * from "./EmailValidator";
export * from "./ZipCodeValidator";

默认导出项

TypeScript 允许每个模块有一个默认导出项。要将导出标记为默认导出项，请使用 default 关键字。

下面显示了如何将 ZipCodeValidator 导出为默认导出项：

import { Validator } from './Validator';

export default class ZipCodeValidator implements Validator {
    isValid(s: string): boolean {
        const numberRegexp = /^[0-9]+$/;
        return s.length === 5 && numberRegexp.test(s);
    }
}

要导入一个默认导出项，你需要使用另一种导入语法，如下所示：

import default_export from 'module_name';

下面显示了如何在 App.ts 文件中使用 ZipCodeValidator 的默认导出项：

import ZipCodeValidator from './ZipCodeValidator';

let validator = new ZipCodeValidator();
let result = validator.isValid('95134');

console.log(result);

输出：

true

概括

TypeScript 与 ES6 模块共享相同的模块概念。模块可以包含声明和代码。
在模块中，变量、函数、类、接口等在它们自己的作用域中执行，而不是全局作用域。
使用 export 语句从模块导出变量、函数、类、接口、类型等。
使用 import 语句访问其他模块的导出项。

TypeScript 模块