TypeScript 模块

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

TypeScript 模块简介

自 ES6 以来，JavaScript 开始支持模块 作为语言的原生部分。TypeScript 与 JavaScript 共享相同的模块概念。

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

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

与 ES6 一样，包含顶层导入或导出的 TypeScript 文件被视为模块。

创建新模块

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

export interface Validator {
    isValid(s: string): boolean
}Code language: TypeScript (typescript)

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

换句话说，如果您不使用 export 关键字，Validator 接口将是 Validator.ts 模块中的私有接口，因此其他模块无法使用它。

导出语句

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

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

export { Validator };Code language: TypeScript (typescript)

TypeScript 还允许您为模块使用者重命名声明，例如

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

export { Validator as StringValidator };Code language: TypeScript (typescript)

在这个例子中，其他模块将 Validator 接口用作 StringValidator 接口。

导入新模块

要使用模块，您使用 import 语句。以下代码创建了一个名为 EmailValidator.ts 的新模块，它使用了 Validator.ts 模块

import { Validator } from './Validator';

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

export { EmailValidator };Code language: TypeScript (typescript)

导入模块时，您可以像这样重命名它

import { Validator as StringValidator } from './Validator';Code language: TypeScript (typescript)

在 EmailValidator 模块内部，您使用 Validator 接口作为 StringValidator 接口，而不是使用 Validator 接口。

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 };Code language: TypeScript (typescript)

以下代码演示了如何在 App.ts 文件中使用 EmailValidator 模块

import { EmailValidator } from './EmailValidator';

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

console.log(result);Code language: TypeScript (typescript)

输出

trueCode language: TypeScript (typescript)

导入类型

以下代码在 Types.ts 模块中声明了一个名为 alphanumeric 的类型

export type alphanumeric = string | number;Code language: TypeScript (typescript)

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

import type {alphanumeric} from './Types';Code language: TypeScript (typescript)

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

import {alphanumeric} from './Types';Code language: TypeScript (typescript)

从模块中导入所有内容

要从模块中导入所有内容，您可以使用以下语法

import * from 'module_name';Code language: TypeScript (typescript)

重新导出

以下代码创建了一个名为 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 };Code language: TypeScript (typescript)

您可以通过使用以下语法组合所有导出来将 EmailValidator 和 ZipCodeValidator 模块包装在新的模块中

export * from 'module_name';Code language: TypeScript (typescript)

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

export * from "./EmailValidator";
export * from "./ZipCodeValidator";Code language: TypeScript (typescript)

默认导出

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);
    }
}Code language: TypeScript (typescript)

要导入默认导出，请使用不同的 import 语法，如下所示

import default_export from 'module_name';Code language: TypeScript (typescript)

以下代码演示了如何在 App.ts 文件中使用 ZipCodeValidator 的默认导出

import ZipCodeValidator from './ZipCodeValidator';

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

console.log(result);Code language: TypeScript (typescript)

输出

trueCode language: TypeScript (typescript)

总结

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