TypeScript彻底解读(26课时)_15.模块和命名空间



新建文件夹ts-modules

并新建index.ts
在根index.ts内引入

新建a.ts文件

ts在1.5以前有两个概念一个是内部模块,一个是外部模块,由于在1.5以前es6的标准尚未提出
1,.5版本开始内部模块更名称作命名空间,外部模块改称为模块
ts的模块出了遵循es6的标准语法外,还有一些特定的语法node

export语句

不只能导出变量、函数、类,还能够导出ts中特有的类型别名和接口
2分46秒

再建立一个模块B

b.ts的定义


引入b模块同时导出,

能够只导出里面的name

还能够给导出的内容起别名
webpack

import语句

引入部份内容

还可使用* as 变量的形式。打印出来就是一个对象,里面就是咱们在b里面导出的全部字段

导入一样的也能够起别名

刚才咱们在a.ts内 导出了b里面的*

咱们在index.ts内引入a.ts看一下
把A这个对象输出出来


接口在输出的内容里是看不到的,咱们只能看到一些在js中能够用的东西,好比两个类

es6

export default

就是默认导出,新建c.ts

直接导出一个值

name就是默认导出的字符串
web

ts中新增的 

ts为了兼容es6和nodejs的写法
export 等于和import require

使用name =require

npm install moment:安装这个moment模块,这是一个处理时间很强大的库,安装完成后从新运行


第二种方式是引入了全部,包括默认导出

第三种写法:

以上就是模块正则表达式

命名空间

13分01


 npm

命名空间在1.5之间的版本叫作内部模块,在ts1.5版本以前es6版本尚未正式成为标准
1.5版本以后,使用命名空间代替内部模块,外部模块就改为了叫作模块
什么状况下使用命名空间,什么状况下使用模块呢
当咱们在程序内部,用于防止全局的污染的时候,想把先关的内容都放在一块儿的时候,咱们建议使用命名空间
当咱们封装了一个工具或者库要适用于模块系统中引入的时候呢就是和使用模块,模块也能起到防止全局污染的做用,多数状况适合用模块的json

命名空间的定义和使用

至关于定义了一个大的对象,里面能够定义变量,接口、类、方法等等,可是若是不是用export关键字,指定哪些内容个对外可见的话,外部是无法访问到的

把全部涉及到内容验证的都放在一块儿,使用namespce来定义命名空间,正则表达是验证是字母开头的



若是想要命名空间里面对外可使用的内容,须要使用export把它标记为对外可见的
定义常量isNumberReg用来验证是数字类型
定义完两个正则表达式,再定义一个函数checkLetter,接收一个字符串返回正则表达式对于字符串校验的结果

使用三斜线来标记要使用哪一个命名空间,表示要引入space.ts里面的命名空间

命名空间若是不是使用webpack等工具进行编译的话,直接在终端使用tsc编译,只要在外部使用这个命名的地方三个斜线引入
而后在path属性这里相对于当前文件的路径,编译的时候须要指定参数outFIle:用来指定输出的文件名
终端先停掉。在终端内执行tsc命令

src下就多了个index.js文件。由于咱们没有使用命名空间内的东西,因此输出的就是这一堆注释

先把编译后的src/index.js文件删掉。index.ts里面 接下来来使用命名空间的东西
使用验证方法,验证abc是否是一个字母,而后互再次执行tsc编译指令

这个地方报了一个错误,找不到这个Validation

这里地方的路径,应该写的是相对路径


少了个 结束标记的斜线。这里tslint推荐咱们使用模块来引入,

这里咱们先禁用掉,由于咱们要演示

再次编译,就不报错了 

编译后的index.js文件

把咱们定义的命名空间,转移成了一个space对象
使用export修饰的都是作为属性添加到了Validation这个对象上
命名空间能实现的东西,模块都能实现,通常咱们使用模块会比较多,命名空间毕竟是有点过期的概念函数

拆分为多个文件

space.ts修更名字为letter-validation.ts文件,专门用来验证字符串字母

复制一个文件出来叫作number-validation.ts

修改letter-validation.ts内把numberReg去掉了

在number里面把isLetterReg去掉

这样就是同名的命名空间,里面的内容是不同的,导出的东西也是不同的
让isLetterReg也对外可见

同时引入这两个一样命名空间的ts文件

终端tsc编译文件


在node环境下执行这个js


多个文件内的同名的命名空间,最终都会合成一个 ,因此是不会有冲突的工具

别名

可使用export关键字给经常使用的对象起个别名,这里的别名和前面讲的类型别名不是一回事
官方文档原始的例子

接下来使用import关键字给经常使用的模块起个别名,,使用别名为了简化深层次取里面内容的过程ui

模块解析

相对和非相对模块的导入 
分别表示根目录,当前目录,上一层目录

模块的解析策略
两种解析策略。
 
能够指定这两种形式

classic是es6的解析方式,也是ts的默认解析策略
node解析策略会查找package.json内的main配置节点

37分18秒大概到43分17秒之间 因为操做失误,ctrl+z回退的时候都回退没了。

能够指定一个路径列表:在构建时,编译器将这个路径列表中的路径内容到一个文件夹中
  
例如:编译器在构建的时候,会将这两个文件夹的文件复制到输出到同一个目录中,
因此能够在index.ts中使用相对路径来引入一些模块

例如ts-modules/index.ts在引入modules/a.js的时候可使用相对路径,由于在编译的时候已经输出到同一个目录下

noResolve;

例如在index.ts中引入了a.ts和b.ts 而后在使用tsc的时候,后面指定了noResolve,由于这里只指定了a.ts因此最终a.ts会打入到index.ts内。b.ts就会提示找不到。
通常咱们使用webpack这种编译工具,是用不到noResolve的  

相关文章
相关标签/搜索