在实战中对typescript的声明文件,引入与编译的总结

1.node的npm包

node编程中最重要的思想之一就是模块。当然这也是其他编程语言的思想。

ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块。

但因为一些历史原因,虽然Node.js已经实现了99%的ES6新特性,采用的却是CommonJS规范,使用require引入模块,使用module.exports导出接口。所以,我们不能在vue.config.js中使用import导入模块

想要使用import,必须引入babel转义支持,通过babel进行编译,使其变成node的模块化代码。这个请自行查阅方法,本人并不想去试验,因为此方法不一定能完全解决问题。

2.typescript

作为ES6的超集,Vue3.0已经完全支持ts,另外的两大框架 react angular可以说早就支持ts了。至此,前端框架三巨头全部对ts进行了友好支持。【One by one系列】一步步学习TypeScript

3.ts声明文件

以前称为类型定义文件,.d.ts。在使用 TypeScript 开发的项目中,常常需要引入公共模块,或者第三方库。如果这些公共模块或第三方库是用 JS 写的,那么 TS 就无法检测到类型信息,在编译阶段会报错。

能不能将这些公共模块或第三方库的代码用 TS 重写呢?答案是不行,因为重写之后,使用这些库的 JS 项目就不兼容了,这些项目不能执行 TS 代码。

**有没有一种方式,既可以让这些类库支持 TS ,又能兼容 JS 项目呢?**有的,就是使用 TS 声明文件。

4.ts引入js模块

当 TS 项目中引入了js模块,TS 默认会去同级目录下找同名的声明文件(eg:index.jsindex.d.ts),找不到就要报错,也就意味着我们可能ts无法使用

5.编译d.ts

如上所述,d.ts是为了抹平ts与js之间的差距,让ts能够引入js包,但是,如果我们用ts编写的代码,试图打包成npm包,提供给 ts或者js使用,该怎么办?只需要编译即可

在tsc命令后跟上-d参数即可在编译成js文件时,顺带输出d.ts文件。这样一个包既可以提供给js使用者,也可以提供给ts使用者。我们一般也会在一些npm包的新版本中看到.js d.ts

当然,博主依然有一个疑问:是否可以只提供ts,并不考虑js开发者,即只上传纯ts源代码的npm包?

*6.编译的错

TypeScript 错误 “Module ‘…’ has no default export

这是因为引入的模块没有声明任何default导出对象。所以在import的时候,需要使用大括号,在里面指定导入的对象。或者全量导入import * as xxx from 'moudelpath',前者为默认导入,后者为命名导入,作为开发者,请一定要去看清楚源代码的声明,否则就会疑惑自己模仿一些es包的导入方式,好像ts也没报错,但是一编译就会报错,可能你以为不是你以为的,请夯实基础,正确理解ts的一些机制。特别是有一些用于d.ts文件的包,他的es引入方式和ts可能是完全不同,切记,切记。