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

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

import同级目录的文件

我们写一个toTsc.ts文件：

toTsc.ts文件内容

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

Cell.d.ts文件内容

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

运行结果

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

amd运行结果

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

import引入普通npm包

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

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

普通的npm包

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

package.json文件

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

寻址顺序：

1）寻找package.json中types中对应的入口文件；

2）寻找根目录下index.d.ts文件；

3）寻找package.json文件中main对应的js入口文件的同目录同名的.d.ts文件。

import引入@type包

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

@type包

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

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

自定义存放ts包的位置

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

编译配置

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

总结

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

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