1. 首页
  2. 文章列表
  3. 通过引用TypeScript定义来提高你的Javascript开发能力

其实事情是这样的,小编这几天闲来没事做,老早之前就听说TypeScript是一种更容易地编写javascript的一种超集语言(注意是“超集”而非“超级”),并且完美支持最新的EcmaScript2016标准和能够运行在任何的主流IDE工具上,于是乎我也花了几个小时的时间来学习TypeScript,通过学习发现,其实还真乃神器也,做前端的人都知道javascript是种弱类型的语言,虽然js很简单,但调试起来也是比较麻烦的,开发的时候也没有像后端语言那样完美的语法提示和代码自动完成,这确实很头痛,然而有的人说写js文件的时候在头部添加这样的东西就能让IDE智能感知了:

///<reference path="/Scripts/jquery-3.1.1.js"/>

但我也试过了,然并卵,依然在写代码的时候函数一样的被当作了属性来进行提示,虽然是要比以前要智能一点了,但作为后端语言为母语又转前端大牛的我(呵呵~),这怎么能满足我对代码智能感知的体验呢!:

懒得勤快的博客_全栈开发者_互联网分享精神

我们知道IDE对后端语言的智能感知能完美支持的原因在于后端语言是强类型的,编辑器通过强大的反射系统将我们正在操作的对象即时的反射来得到我们需要的字段属性和方法,而js是弱类型的,你让它怎么去反射,对象即方法,方法即对象,编辑器他拿到的成员他也不知道这到底是方法还是属性啊,而需要我们人为地自己去判断是方法还是属性;所以我也一直在苦思这件事情,咋个才能让IDE完美地支持对js的智能感知呢?

比如像这样的,看图标一目了然谁是属性谁是方法了,那该多好啊:

懒得勤快的博客_全栈开发者_互联网分享精神

直到这两天学习TypeScript的时候发现了,用TypeScript来写js代码确实是极致体验啊,但这里不是教大家TypeScript了哈,有兴趣的童鞋可以去微软官方的Channel9进行学习,好了,回归正题;

在我学习TypeScript的过程中发现,其实TypeScript的智能感知原理在于TypeScript它的编译器依赖了一系列的xxx.d.ts这样的文件,于是乎我就想,既然TypeScript作为javascript的超集,那这么一系列的d.ts文件是否也能对javascript起作用呢?!通过实践告诉我是可以的。

好了,接下来将进入重头戏,我将以两款IDE作为抛砖引玉,告诉大家如何让你的IDE支持对js的智能感知:

宇宙级的开发工具VisualStudio
轻量级的前端开发神器VisualStudioCode

VisualStudio实现对Javascript的智能感知

对于VisualStudio来说就相当简单了,因为它太智能了,只需要一步就能搞定:

首先,新建好你的web项目,然后打开nuget程序包管理器,搜索你要实现智能感知的js库,如jquery的则搜索“jquery.TypeScript”,然后找到对应的nuget包,安装到项目中即可,

懒得勤快的博客_全栈开发者_互联网分享精神

然后你就会发现项目的Scripts目录下多了一个叫typings的文件夹,展开你就发现原来就是几个d.ts文件,现在你再写js代码的时候,你就会发现,这才是完美的智能感知嘛。(原来这么简单,以前怎么也想不到呢)

VisualStudio Code实现对Javascript的智能感知

VisualStudio Code就相比要麻烦点了,可能有些前端大牛知道VisualStudio Code是用node开发出来的,所以现在,node环境你是跑不掉了,当你把基本的开发环境都做好了以后,接下来需要全局安装一个node包,至于npm服务器连不上的小伙伴们,就用淘宝的那个npm镜像吧,这里不解释了。

首先全局安装typings包:

npm install -g typings

然后使用git工具将这个项目克隆到本地:

https://github.com/DefinitelyTyped/DefinitelyTyped

其实这里面就是大量的d.ts文件,接近3000个文件夹了,应该是所有基于TypeScript开发的js组件的定义文件吧,然后用VS Code打开你的web项目,在DefinitelyTyped文件夹中将你需要的那个js组件的文件夹找到,如angular,然后复制到你的项目里,在你的js文件头部引用定义(因为VS Code没有VS那样智能,所以还得手动引用一下):

/// <reference path="./typings/angular/index.d.ts" />

接下来,好宝,奇迹发生了:

懒得勤快的博客_全栈开发者_互联网分享精神


这样写代码才叫爽嘛,Enjoy IT!

既然TypeScript能够跑在任何的主流IDE上,那其他的IDE我就不一一试了,这里就做个抛砖引玉,大家自己慢慢折腾吧。

下载为Word文档

版权声明:

本文仅用于学习、研究和交流目的,欢迎非商业性质转载。本文链接:http://masuit.com/29

l  博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。

l  文章内容部分来源于互联网,不代表本人的任何立场;涉及到的软件来源于互联网,仅供个人下载使用,版权归该软件开发者所有,请勿用于商业用途,下载后请于24小时内删除,请支持正版!因下载本站资源造成的损失,全部责任由使用者本人承担!如果你是原作者,认为本文内容对您的权益有所侵犯,请联系博主进行投诉,待博主进行严格地审查和背景调查后,情况属实的将在三天内将本文删除或修正。

l  博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。

l  博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的纯镀 24k 文章,请原谅博主成为一个无耻的文档搬运工!

l  博主只是一名普通的互联网从业者,不懂修电脑,不会卖电脑,不会帮你盗号,不会破解开机密码,找不回你丢失的手机等,如有这样的想法请绕道!

相关推荐:

又一前端神级类库——lodash.js工具库 大前端的未来可能代替ajax的东西——Fetch API初体验
ECMAScript 2017(ES8)新特性尝鲜 web前端知识体系大全
自从用了linqjs,再也不用担心操作json集合啦 web前端杂谈:传统的 Ajax 已死,Fetch得永生!
angular表格神器ng-table的服务端分页的解决方案 解决代码着色组件SyntaxHighlighter长代码不换行以及行号显示错位的问题

评论区:

    还没有评论哦,赶紧来写评论吧

    分享按钮