使用模块组织代码
模块是什么?
-
模块是一种对代码进行组织和分类的方法。
模块优点
-
当代码位于模块内时,它将从全局范围拉取到模块范围中。 这可帮助你避免全局命名空间中组件之间的命名冲突。
从 ES6 起,模块一直是 JavaScript 的一项功能,因此 TypeScript 也支持模块。 在 ES6 之前,早期版本的 TypeScript 将模块称为“外部模块”。
可通过添加 export 关键字导出任何声明(如变量、函数、类、类型别名或接口),也可使用 import 关键字导入声明。
包含顶级 import 或 export 语句的任何文件都视为模块。
-
export 语句可显式使一个模块中的组件可用于其他模块。 -
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;
}
导入模块组件
-
若要从某个模块中导入单个导出:
import { <component name> } from '<module name>'
-
若要重命名导入,请使用 as 关键字:
import { <component name> as <new name> } from '<module name>'
-
若将整个模块导入单个变量,并使用它访问模块导出:
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";
编译模块
-
模块使用模块加载程序导入另一个模块。 -
在运行时,模块加载程序会在执行模块之前查找并执行模块的所有依赖项。
-
编译方式
-
方式一 命令行方式
tsc --module commonjs module1.ts
-
方式二 tsconfig.json 文件中指定 –module目标
-
编译器遵循 import 语句来编译所有相关文件。 请注意,在编译 module1.ts 后,每个模块都将成为单独的 .js文件。 -
键入 node main 来测试文件
访问第三方库
「导入库」
-
在 JavaScript 中,可使用 requires 语句在代码中使用外部库。 -
在 TypeScript 中,可使用 import 语句获取这些库的访问权限。
导入库及其类型定义后,可在代码中使用它,并获得 Intellisense 和类型检查的优势。
「类型库」
-
静态类型化是使用 TypeScript 的主要原因。 -
如果尝试使用没有类型定义的库,TypeScript 编译器可能会引发错误消息。 你还会注意到,缺少这些定义时,Intellisense 将不可用。
-
虽然有些 JavaScript 库具有类型定义,但你会发现许多库都没有类型定义。 开源项目 DefinitelyTyped 是 TypeScript 类型定义的存储库,适用于许多热门 JavaScript 库。 使用 @types 前缀安装类型定义。 -
由于类型定义仅在设计时由 TypeScript 使用,因此它们无需包含在已发布的项目中。 因此,可将它们作为 devDependencies 安装。
npm install --save-dev @types/<library-name>
dotenv 练习
使用dotenv库将 .env 文件中的环境变量加载到 process.env 中,使你能够将配置详细信息与代码分开存储并能够访问它们。
-
打开一个新目录 创建main.ts 执行 tsc --init
生成一个默认配置的 tsconfig.json 文件 -
安装 dotenv类型库
npm install dotenv
-
dotenv 类型定义还要求安装 node 类型定义。 node 提供对 process.env 的访问权限,因此你可通过代码进行访问。
npm install --save-dev @types/node @types/dotenv
-
在项目的根目录中创建一个名为 .env 的新文件。 此文件将包含项目的环境特定的变量。 -
在 .env 中,以 NAME=VALUE 的形式在新行上添加变量。 在本示例中,请定义三个变量:
DB_HOST=localhost
WEB_HOST=staging.adventure-works.com
-
导入dotenv类型库
import dotenv from 'dotenv';
-
向变量赋予 dotenv.config()。 config 读取 .env 文件、分析内容,并将该文件分配给 process.env,然后返回一个具有 parsed 键的对象(其中包含已加载的内容);如果失败,则返回一个 error 键。
const result = dotenv.config();
-
TypeScript 现在可为 config 对象提供 Intellisense 和类型检查。 如果键入 result.,则会看到 result 具有两个属性:error 和 parsed。 添加错误检查语句以验证 config 操作是否按预期方式工作。
if (result.error) {
throw result.error;
}
-
将 parsed 属性的内容返回到控制台。
console.log(result.parsed); // Returns { DB_HOST: 'localhost', WEB_HOST: 'staging.adventure-works.com' }
-
访问 process.env 中每个键包含的值,并将值返回到控制台。
console.log(process.env.DB_HOST);
console.log(process.env.WEB_HOST);
知识检查
-
以下哪一项在使用命名空间时是可行的,但在使用模块时是不可行的?
-
使用 export 关键字指定组件在命名空间范围外可用(命名空间和模块都使用 export 关键字指定组件在命名空间或模块范围外可用。) -
将多个 TypeScript 文件编译成单个 JavaScript 文件(–outFile 编译器选项将多个命名空间文件合并为单个 JavaScript 文件。) -
声明依赖项。(命名空间不能声明其依赖项。)
答案是第二个。
原文始发于微信公众号(王大可996):TypeScript学习笔记(12)-模块
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/205203.html