在学习wpsjs开发过程中,非常痛苦的是写js代码时没有智能提示,写惯了.NET静态语言后来写js代码,这个没有智能提示太难受了,特别是引用第三方工具类时。 偷懒的天性催逼着要努力去找解决方案,在js世界中,不可能有人长期能够被没有智能提示所虐,于是漫长地搜索寻求过程,终于有了出路。
默认VSCode只有javascript的核心语言智能提示
在VSCode里,对常见的关键字和可推断的对象确实是可以有智能提示,但一旦使用其他第三方库,这个智能提示就不管用了,而对于面向轮子来开发的应用层开发来说,就很痛苦。
之前不懂怎么弄时,就只能在运行时环境,浏览器的console里敲代码,敲完再复制回来VSCode里,现在想想也是很原始很笨的方法。
第三方js库在VSCode实现智能提示方法
一入前端深似海,前端除了内容庞大外,还有知识时效性特别短,看了一大轮,摸索好了,结果发现研究的工具已经过时不维护了。一开始摸索了好久typings,最后发现人家github已经停止更新,现在转到了npm@types这边。
现在安装这些类型提醒库,帮助VSCode可以智能提示,使用的方式也是npm来安装,直接在相应的库面前加上@types
整个原理估计是开发者另外开了一个专门用于定义js类型的库,然后我们上述的命令将这个库装到VSCode里。
同理,在wpsjs项目里,官方也为我们提示了一个类型库,用于作开发过程中的代码提示,在他们的demo上也带有了。
不要对这个wpsjs的类型库抱太高期望,它和wpsjs库不同步,有滞后,并且类型定义根本不对的,很多应该返回对象的,都变成一个方法返回。所以现阶段也只能按最上面的方式,在控制台里敲代码,然后复制粘贴了。
当我们用npm安装了对应的types库后,代码提示就出来了。
其他一些自带d.ts文件库的安装方式
除了上面的库和类型库定义分开的情况,需要安装相应的types库外,有一些库它是将d.ts文件放到自己的项目里的,这时只需要使用npm命令将其库下载下来即可。
对于我们面向浏览器端的js编写,最终是通过在script标签上引用js文件的,但开发过程中,貌似直接使用npm install命令将其整个库拉到本地来使用,可以更方便,并且也有了智能提示。具体的原理笔者也不太懂。
上图中,它自动帮我们加入了require的语句,然后智能提示就生效了。
一点小坑
在vscode上用终端上的npm安装了某些库,它的左侧文件夹结构不能马上显示出来,貌似也没找到刷新功能。
如下图中,用npm list命令,可以看到已经安装了types/echarts的库,但左侧显示不出来。这时只能关了VSCode再重新打开,让其加载一下。
同样地,有时莫名地之前可以智能提示,突然又不行了,重启VSCode大法,多数情况又好起来了。
额外补充:使用TypeScript智能提示写ECharts的Option
在js上有智能提示,但它的提示度也是有限的,上面所说的@types的方式安装d.ts文件,这个其实是用来给本意是给TypeScript作智能提示用的。
熟悉笔者的读者们都知道,笔者开发的EasyShu图表插件(将ECharts图表引用到了Excel环境中使用,在WPS上将会以ET催化剂的方式提供),在开发ECharts图表时,其实和javascript没太多关系,纯粹是配置ECharts的图表Option项。
现在ECharts已经全面用TypeScript改写完,会TypeScript的话,可以尽情地使用其类型库文档里的智能提示,其实也不用懂太多TypeScript,也可以借助VSCode轻松地将TypeScript的智能提示给用上。
在ECharts的@types类型库中,非常规范详尽地定义了自己的文档,唯一小遗憾是用英文的,可看到下图中好多已经定义好的属性,还有枚举值。
我们唯一需要的TypeScript知识点,只是定义变量时标明类型,做了这一步,就可以愉快地在Option的配置项里智能昧出各属性和枚举值了,同时还有详尽的注释。
以下是输入引号后,自动跳出了枚举值,非常爽。
结语
从传统的.NET的winform开发,甚至是VBA开发,走进javascript的世界,学习过程充满未知,秉着相信世界是美好的,充满着大量轮子和工具帮助我们更懒更轻松完成开发工作。花上了一些探索的时间,终于收成正果。
以上的这些知识,可能对一个前端开发来说,是多么地常识,但对于笔者一个跨界者来说,费尽了许多辛苦才获取而来。
也盼望wpsjs社区里,更多的人一起来分享,让知识门槛更低,让后来者可以更轻松地走过。互联网时代,分享越多,收获越多,终将会有回报的。