tsd-提升IDE对JavaScript智能感知的能力

在编写前端JavaScript代码时,最痛苦的莫过于代码的智能感知(Intelli Sense)。

追其根源,是因为JavaScript是一门弱类型的动态语言。对于弱类型的动态语言来说,智能感知就是IDE工具的一个“软肋”。IntelliJ等IDE所用智能感知方式,是一种折中的方式:全文搜索,然后展示出已经使用过的对象成员。这种方式的缺点是,其智能感知的的能力并不精准,经常会显示出很多无关的代码提示。

在很多现代化开发方式中,IDE的强大支持和模块化组织这种“工程化”的思想是我们应对大规模开发的方式之一,这也已经被业界所认同。所以在最近两年,JavaScript的世界也提出了大规模开发的方案,其中有Google的Dart和微软的TypeScript。随着Angular2.0放弃了自家的Dart,而选择了TypeScript,也标志着TypeScript的逐渐成熟。TypeScript是微软总架构师Anders Hejlsberg设计的新语言,他是软件界的传奇人物,是Delphi和.NET的设计者。TypeScript是一种可以编译成传统JavaScript的语言,它并不是完全的创造了一门新语言,而TypeScript是JavaScript语言的超集,它最大的特点就是引入了类型系统。并在编译为JavaScript文件后,可以输出“.ts”的类型元数据信息,为我们IDE的智能感知和重构提供了重要的依据。

关于TypeScript的更多知识,在这里笔者就不在叙述过多。有兴趣的读者可以到http://www.typescriptlang.org/学习,本节要讲的,是它的另一个特性:它编译输出的元数据信息文件(*.d.ts),它可以在不需要修改原有JavaScript文件的情况下,而给JavaScript添加元数据类型信息,而这些类型信息则可以辅助IDE,给出有智能的提示信息,以及重构的依据。

在TypeScript的开源社区,已经为很多的第三方库实现了这类模板文件,我们可以很快的应用在我们的项目之中。当然这里所说的额第三方包含我们常用的:Angular、jQuery、underscore、lodash、jasmine等。

在官方同时也为我们提供了一个方便的工具叫TSD(全称为:TypeScript Definition manager for DefinitelyTyped),它是借鉴NPM包管理工具的思想,实现了一个类似的包管理工具,我们不需要任何的学习成本,只管像使用NPM一样使用它。

这里是TSD主页:http://definitelytyped.org/tsd/,你可以在这里深入了解它,或者是查询你所需要的模板库是否存在于TSD仓库。

TSD也是一个Nodejs的工具,所以我们安装它非常容易,只需要在命令行中输入(对于有些Linux用户需要sudo):

npm install tsd -g

安装我们需要的模板库,也很简单,如jQuery和Angular的安装:

tsd install jquery angular --save

这样TSD就会帮助我们下载jQuery和Angular的d.ts文件,并存放在当前目录的typings独立子目录下,并且它会将我们需要的依赖信息保存在一个叫tsd.json的文件,如NPM的package.json一样,方便于我们的版本管理,以及团队之间的共享。我们只需要共享这个tsd.json文件给其他同事,然后

tsd install

一切都可以满意就绪了。

tsd.json文件的格式如下:

同时候TSD工具还会为我们在typing目录下生产一个tsd.d.ts文件,它会为我们引入这些模板文件,使得IDE能够识别出这样模板文件:

/// <reference path="angularjs/angular.d.ts" />
/// <reference path="jquery/jquery.d.ts" />

下面是我们在Intellij中得到的智能感知图:

目前能够很好支持TypeScript这一特性的工具有:Intellij家族、微软自家的VS工具、Sublime。有了TSD这一工具,也许我们虽然还不能尝试TypeScript的特性,但我们仍然可以利用它来帮助我们的普通JavaScript开发。

时间: 2024-08-24 11:46:01

tsd-提升IDE对JavaScript智能感知的能力的相关文章

如何为javascript代码编写注释以支持智能感知

在使用Visual Studio做开发的时候,智能感知是非常方便的.从VS2008开始,提供了对javascript的智能感知支持.例如 上述代码中,我们先用document对象的getElementById的方式取得了文档中的一个Id为form1的元素,实际上就是默认的那个窗体元素.然后,我们将其赋给一个名为f的变量. 然后,我们在使用f 这个变量的时候,就能自动地列出该form元素所应该有的一些成员,例如action等等. 这些属于是默认的元素和方法的智能感知,假设我们自己有一些自定义js代

VS对JS的智能感知

参考 http://blog.csdn.net/lee576/article/details/2050991 对于在VS里面智能感知JS,需要对JS函数或者对象进行XML标记 如下,请自己体会 1 function (company) { 2 /// <summary> 3 /// 获取所有船舶 4 /// </summary> 5 /// <param name="company" type="String" optional=&qu

Visual studio 2017 中的Javascript智能提示

1.智能提示 对于JS文件中的API,你若需要让那个JS文件中的方法能够在你写的那个JS文件中能够智能显示的话,直接把它拉进你的JS文件中就好了. 举个例子:你想 在你正在写的a.js文件中引用b.js中的功能与函数.很简单,你只需要把b.js文件拉到你的a.js文件中就好了.这时在你的文件 顶端会显示这样一行内容:/// <reference path="../angular.js" />. 就是这样,智能显示的很全面,就像你自己写类文件一样,里面的注释什么的都全部显示出

[VS] - Visual Studio 智能感知无法启用 之解决

背景 VS 2017 智能感知无法使用,重置 "导入和导出设置..." 后仍无法使用. 解决 我在 VS 上安装了 Resharper 的,猜测可能跟其配置有关,重置 IntelliSense 为 Visual Studio 后,VS 智能感知正常启用.

SQL Server 智能感知IntelliSense 不起作用

不知道怎么回事,突然sql server 就不弹出智能提示了,尝试了以下方法 方法一 转自http://www.jb51.net/article/30822.htm  结果:木有解决 SQL Server 2008R2中增加了新的智能提示的功能简化了输入,非常方便.但突然有一天智能提示没有了,好郁闷! 折腾了半天终于将智能提示找回来了,下面是我解决本问题的思路: 1.查看工具选项中Enable Intellisense是否打开? 选择Tools-->Options打开选项页面,依次展开Text

免費 CSS &amp; Javascript 智能提示編輯器

免費 CSS & Javascript 智能提示編輯器 工具名稱:Free JavaScript Editor? 工具版本:4.2? 官方下載:http://www.yaldex.com/這一個工具真的很有趣,3.8版需要付費,但到了4.2版卻提供了永久的免費使用,這真是個好消息,因此各位可直接從官網下載4.2版的. Step1首頁,先來試試看css的部分,哈~看到了嗎?當打相關屬性的開頭名詞時,則會自動出現智能提示,成功! Step2接下來,換Javascript看看,哈~一樣的也會出現智能型

Visual studio智能感知挡住了当前代码输入行

AssistX->Listboxes->Enable Visual Assist completion, suggestion and member list in .. 如果勾选了该项就会引起智能感知挡住了当前代码输入行. (此种情况仅发生在AssistX集成于2005/2008,2010以后即使勾选该项也很正常.环境:win8.1 x64)

开启Xamarin.Forms的智能感知(代码提示功能)

在使用Xamarin.Forms经常要编写xaml文件,如果是手写的话是在太蛋疼了,其实是可以开启智能感知的 1.Xamarin Studio 更新到最新版本,具体什么版本开始的不知道了,5.7以上的肯定可以,使用新技术就别用那种几年前的版本了,要勤更新,Xamarin.Forms并不是一个成熟的技术. 2.Visual Stuio 还是上面那句话,XForms对VS的要求是vs2013 update4及以上,vs2013 community和vs2015均可 以上的几个版本对XForms的xa

Unity学习笔记草稿篇(一)为unity配置添加VS智能感知

1. 在解决方案根目录下添加文件DotNetConfig.xsd: 2. 编辑DotNetConfig.xsd文件,内容如下: <?xml version="1.0" encoding="utf-8"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:vs="http://schemas.microsoft.com/Visual-Studio-