typescript中import模块的寻址方式与ES6不同之处

2,935 阅读3分钟

这篇文章主要总结一下typescript的import寻址特点,虽然我们对ES6的这个语法已经很熟悉了,但是我发现它们还是有很多区别的。

import同级目录的文件

我们写一个toTsc.ts文件:

然后在toTsc.ts同级目录下写一个Cell.d.ts文件,内容如下:

其实这个例子是官方文档中的例子,我第一眼看到这个例子其实觉得有点奇怪,这样的Cell.d.ts文件也能当做一个模块被import引入吗?完全颠覆了我之前的经验!那我们运行一下!

运行结果

报错了,但是我们看一下报错的提示,让我们把module改成amd或者system,那么改一下试试!

运行成功!虽然ok,但是我们一般不会这么写,Cell可以当做全局声明文件,就不用import了!

import引入普通npm包

我们发一个npm包其实就是想让其他人也能使用,但是如果你的包全是js,那么别人在使用ts时是无法引入的,此时你暴露的js接口都需要加一下ts的类型声明才可以使用!

如下,这种情况就是在输出js文件的同时也带上了ts的类型声明文件:

以前我们写几个js文件就能发一个包,现在如果想能在ts中也能引入,那么就需要再写一份对应的ts声明文件。

之前我们定义包的入口文件可以在package.json中用main字段定义,现在定义ts的入口文件需要用types定义(typings也可以)。

寻址顺序:

  • 寻找package.json中types中对应的入口文件
  • 寻找根目录下index.d.ts文件
  • 寻找package.json文件中main对应的js入口文件的同目录同名的.d.ts文件

import引入@type包

ts的声明文件也可以从js源码中独立出来,发一个单独的@type域的npm包,如下:

在你使用import时,也能找的到!目前很多流行的库都把类型声明放在这个私有域下!

注意:它的引入顺序在普通npm包之后,即在node_module下直接找不到,才去@type目录下寻找!

自定义存放ts包的位置

如果我们正在开发一个ts的声明文件,并且把它保存在node_modules下,这种方式是很容易造成文件丢失的,我就吃过类似的亏,另外也有可能我们写的声明文件就不想发包!这时我们可以自定义存放包的路径:

可以在tsconfig.json文件中加一个paths字段,然后定义存放包的路径,import模块时会优先寻找这个目录下的包!(比上述两种情况更优先)!

总结

这篇文章主要是总结了在ts中用import引入模块时的选址方式!后面我会继续总结一些ts和ES6不同的点!

喜欢我的文章就关注我吧,有问题可以发表评论,我们一起学习,共同成长!(如果你看到这里就关注一下吧,你的关注是我最大的动力!)