TypeScript学习笔记(12)-模块

使用模块组织代码

模块是什么？

• 模块是一种对代码进行组织和分类的方法。

模块优点

• 当代码位于模块内时，它将从全局范围拉取到模块范围中。 这可帮助你避免全局命名空间中组件之间的命名冲突。

从 ES6 起，模块一直是 JavaScript 的一项功能，因此 TypeScript 也支持模块。 在 ES6 之前，早期版本的 TypeScript 将模块称为“外部模块”。

可通过添加 export 关键字导出任何声明（如变量、函数、类、类型别名或接口），也可使用 import 关键字导入声明。

包含顶级 import 或 export 语句的任何文件都视为模块。

1. export 语句可显式使一个模块中的组件可用于其他模块。

2. import 语句则使你能够使用另一个模块中的组件。

导出模块组件

新建module1.ts文件

//模块

export?function?hello(name:?string)?{
????console.log("Hello,?"?+?name?+?"!");
}

新建module2.ts文件

export?function?hello(name:?string)?{
????console.log("Hello?word,?"?+?name?+?"!");
}

function?getLength(message:?string):?number?{
????return?message.length;
}

导入模块组件

1. 若要从某个模块中导入单个导出：

import?{?<component?name>?}?from?'<module?name>'

1. 若要重命名导入，请使用 as 关键字：

import?{?<component?name>?as?<new?name>?}?from?'<module?name>'

1. 若将整个模块导入单个变量，并使用它访问模块导出：

import?*?as?<variable?name>?from?'<module?name>'

示例代码：

//从模块中导入单个函数
import?{?hello?}?from?"./module1";

//从模块导入所有函数
import?*?as?allFun?from?'./module2';??

//从module1模块中导入hello函数单module2已有hello函数则重命名
import?{?hello?as??hello2?}?from?"./module2";

编译模块

• 模块使用模块加载程序导入另一个模块。

• 在运行时，模块加载程序会在执行模块之前查找并执行模块的所有依赖项。

1. 编译方式

• 方式一 命令行方式

tsc?--module?commonjs?module1.ts

• 方式二 tsconfig.json 文件中指定 --module目标

1. 编译器遵循 import 语句来编译所有相关文件。 请注意，在编译 module1.ts 后，每个模块都将成为单独的 .js文件。

2. 键入 node main 来测试文件

访问第三方库

「导入库」

1. 在 JavaScript 中，可使用 requires 语句在代码中使用外部库。

2. 在 TypeScript 中，可使用 import 语句获取这些库的访问权限。

导入库及其类型定义后，可在代码中使用它，并获得 Intellisense 和类型检查的优势。

「类型库」

1. 静态类型化是使用 TypeScript 的主要原因。

2. 如果尝试使用没有类型定义的库，TypeScript 编译器可能会引发错误消息。 你还会注意到，缺少这些定义时，Intellisense 将不可用。

• 虽然有些 JavaScript 库具有类型定义，但你会发现许多库都没有类型定义。 开源项目 DefinitelyTyped 是 TypeScript 类型定义的存储库，适用于许多热门 JavaScript 库。 使用 @types 前缀安装类型定义。

• 由于类型定义仅在设计时由 TypeScript 使用，因此它们无需包含在已发布的项目中。 因此，可将它们作为 devDependencies 安装。

npm?install?--save-dev?@types/<library-name>

dotenv 练习

使用dotenv库将 .env 文件中的环境变量加载到 process.env 中，使你能够将配置详细信息与代码分开存储并能够访问它们。

1. 打开一个新目录 创建main.ts 执行 tsc --init 生成一个默认配置的 tsconfig.json 文件

2. 安装 dotenv类型库

npm?install?dotenv

1. dotenv 类型定义还要求安装 node 类型定义。 node 提供对 process.env 的访问权限，因此你可通过代码进行访问。

npm?install?--save-dev?@types/node?@types/dotenv

1. 在项目的根目录中创建一个名为 .env 的新文件。 此文件将包含项目的环境特定的变量。

2. 在 .env 中，以 NAME=VALUE 的形式在新行上添加变量。 在本示例中，请定义三个变量：

DB_HOST=localhost
WEB_HOST=staging.adventure-works.com

1. 导入dotenv类型库

import?dotenv?from?'dotenv';

1. 向变量赋予 dotenv.config()。 config 读取 .env 文件、分析内容，并将该文件分配给 process.env，然后返回一个具有 parsed 键的对象（其中包含已加载的内容）；如果失败，则返回一个 error 键。

const?result?=?dotenv.config();

1. TypeScript 现在可为 config 对象提供 Intellisense 和类型检查。 如果键入 result.，则会看到 result 具有两个属性：error 和 parsed。 添加错误检查语句以验证 config 操作是否按预期方式工作。

if?(result.error)?{
????throw?result.error;
}

1. 将 parsed 属性的内容返回到控制台。

console.log(result.parsed);??//?Returns?{?DB_HOST:?'localhost',?WEB_HOST:?'staging.adventure-works.com'?}

1. 访问 process.env 中每个键包含的值，并将值返回到控制台。

console.log(process.env.DB_HOST);
console.log(process.env.WEB_HOST);

知识检查

• 以下哪一项在使用命名空间时是可行的，但在使用模块时是不可行的？

1. 使用 export 关键字指定组件在命名空间范围外可用(命名空间和模块都使用 export 关键字指定组件在命名空间或模块范围外可用。)

2. 将多个 TypeScript 文件编译成单个 JavaScript 文件(--outFile 编译器选项将多个命名空间文件合并为单个 JavaScript 文件。)

3. 声明依赖项。(命名空间不能声明其依赖项。)

答案是第二个。