【TypeScript】在实战中的一些总结
在实战中对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.js
→index.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可能是完全不同,切记,切记。
- 原文作者:Garfield
- 原文链接:http://www.randyfield.cn/post/2022-05-30-typescript-import-declaration-file/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。