TypeScript学习笔记(12)-模块

发布时间:2024年01月07日

使用模块组织代码

模块是什么?

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

模块优点

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

从 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. 声明依赖项。(命名空间不能声明其依赖项。)

答案是第二个。

文章来源:https://blog.csdn.net/wdk996/article/details/135433838
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。