通过引用TypeScript定义来提高你的Javascript开发能力.docxVIP

通过引用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轻量级的前端开发神器VisualStudioCodeVisualStudio实现对Javascript的智能感知对于VisualStudio来说就相当简单了，因为它太智能了，只需要一步就能搞定：首先，新建好你的web项目，然后打开nuget程序包管理器，搜索你要实现智能感知的js库，如jquery的则搜索“jquery.TypeScript”，然后找到对应的nuget包，安装到项目中即可，然后你就会发现项目的Scripts目录下多了一个叫typings的文件夹，展开你就发现原来就是几个d.ts文件，现在你再写js代码的时候，你就会发现，这才是完美的智能感知嘛。(原来这么简单，以前怎么也想不到呢)VisualStudioCode实现对Javascript的智能感知VisualStudioCode就相比要麻烦点了，可能有些前端大牛知道VisualStudioCode是用node开发出来的，所以现在，node环境你是跑不掉了，当你把基本的开发环境都做好了以后，接下来需要全局安装一个node包，至于npm服务器连不上的小伙伴们，就用淘宝的那个npm镜像吧，这里不解释了。首先全局安装typings包：npm install -g typings然后使用git工具将这个项目克隆到本地：/DefinitelyTyped/DefinitelyTyped其实这里面就是大量的d.ts文件，接近3000个文件夹了，应该是所有基于TypeScript开发的js组件的定义文件吧，然后用VSCode打开你的web项目，在DefinitelyTyped文件夹中将你需要的那个js组件的文件夹找到，如angular，然后复制到你的项目里，在你的js文件头部引用定义(因为VSCode没有VS那样智能，所以还得手动引用一下)：/// reference path=./typings/angular/index.d.ts /接下来，好宝，奇迹发生了：这样写代码才叫爽嘛，EnjoyIT！既然TypeScript能够跑在任何的主流IDE上，那其他的IDE我就不一一试了，这里就做个抛砖引玉，大家自己慢慢折腾吧。