关于 index.ts 在大型 Angular 项目中的应用

简介: 关于 index.ts 在大型 Angular 项目中的应用

对于 Angular来说,模块(module)是一个容器/包(container/package),用来存放各种组件、引用其他模块、提供依赖注入等。


index.ts (Barrel file)是一种将多个模块的导出汇总到单个方便模块的方法。index.ts 本身是一个模块文件,它重新导出其他模块的选定导出。


一个例子如下:


index.ts 是一种将多个模块的导出汇总到单个方便模块的方法,它本身是一个模块文件,重新导出其他模块的选定导出。

假设 library 实现者定义了如下的 class:

如果没有 barrel file,消费者需要书写三次 import 语句:

使用 barrel file 之后,重新从 demo 文件夹下导出工具库的实现:

这样消费者只需要用一行语句,直接导入 index.ts 即可:

import { Foo, Bar, Baz } from '../demo'; // demo/index.ts is implied

这里甚至不需要写成 ../demo/index.ts.


*.d.ts 文件用于提供JavaScript编写的模块的typescript类型信息,例如 underscore / lodash / aws-sdk等工具库。这将允许开发人员在 TypeScript 项目中使用 javascript模块,而不需要将它们转换为ts,而不会在代码上得到任何类型错误。


例子如下:

iimport 是开发人员放在 @NgModule 装饰器 imports 属性中的东西。它使Angular模块能够使用在另一个Angular模块中定义的功能。它允许Angular模块向应用程序中的其他模块公开它的一些组件/指令/管道。

例子如下:

按照惯例,barrel file 被命名为 index,因为大多数模块加载器在解析绝对路径时都会默认查找该文件,这将允许我们从路径中省略文件名,而只指向一个文件夹,这算是一个命名规范。


当我们需要在应用工程里导入自己实现的 library 时,由于文件夹的层次结构过深,很容易出现下列这种多重的相对路径的情况,导致可读性很差。

在 TypeScript 2.0 里,我们有了所谓的 baseUrl 的编译器设置,只需要在 tsconfig.json 里做出如下配置:

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

之后,我们使用 import 语句,就可以从 baseUrl 指定的 path 开始导入了:

import { foo } from 'app/bar'

相关文章
|
1月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
12 0
|
3月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
32 2
|
1月前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
15 1
|
11天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript在Angular开发中的应用
【4月更文挑战第30天】本文探讨了TypeScript在Angular开发中的应用。Angular与TypeScript的结合利用了静态类型检查和ECMAScript特性,简化了大型Web应用的开发。文章涵盖组件、数据绑定、依赖注入、服务、守卫和路由以及模块化等方面,展示了如何在Angular中有效使用TypeScript。此外,还提到了TypeScript的高级应用,如泛型、高级类型和装饰器。掌握这些知识将有助于提升Angular应用的可维护性和可扩展性。
|
18天前
|
C++
【angular】启动项目和路由配置
【angular】启动项目和路由配置
21 1
|
1月前
设置Open in Terminal快捷键Alt+Shift+Z,方便angular项目的各种命令输入(多任务状态下)
设置Open in Terminal快捷键Alt+Shift+Z,方便angular项目的各种命令输入(多任务状态下)
|
1月前
|
JavaScript 前端开发 开发工具
Angular 项目中一个 index.d.ts 文件的具体例子介绍
Angular 项目中一个 index.d.ts 文件的具体例子介绍
16 0
|
1月前
|
JavaScript 前端开发 开发者
Angular 项目里 tsconfig.schematics.json 文件的作用
Angular 项目里 tsconfig.schematics.json 文件的作用
9 0
|
2月前
|
开发框架 前端开发 安全
Angular:构建现代Web应用的终极选择
Angular:构建现代Web应用的终极选择
27 0
|
3月前
|
Go
Mac安装Angular并部署运行应用
Mac安装Angular并部署运行应用

热门文章

最新文章