前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【TypeScript】在实战中的一些总结

【TypeScript】在实战中的一些总结

作者头像
DDGarfield
发布2022-06-23 19:53:03
1.3K0
发布2022-06-23 19:53:03
举报
文章被收录于专栏:加菲的博客加菲的博客

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可能是完全不同,切记,切记。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2022-05-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 加菲的博客 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.node的npm包
  • 2.typescript
  • 3.ts声明文件
  • 4.ts引入js模块
  • 5.编译d.ts
  • *6.编译的错
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档