本文将以编写全局用户缓存信息为例，在编写过程中逐一介绍如何使用TypeScript编写基础的intellisense提示，废话不多说，马上开始！
0.准备工作
首先，新建一个usercache.js文件和一个usercache.d.ts文件，前者为编写用户缓存js代码的地方，后者为编写用户缓存的intellisense代码提示的地方。
这两个文件可以是任意的名称，两个文件的名称也可以不一样，但强烈建议你使用相同的名称。
然后再准备一个test.js文件，在这里我们编写测试代码，来测试代码提示效果
在usercache.js中添加usercache.d.ts引用，如上图所示，添加这一句代码即可完成引用。
敲代码时，path中的内容你可以先不输入，先键入path=""，然后在引号中输入任意字符，此时VS会弹出自动完成，把当前目录下的文件都列出来，你只需点击选择即可
好了，就这样，准备工作完成了，下面将正式开始介绍如何编写intellisense提示
1.定义全局变量
为了演示，在把用户缓存信息封装成类之前，我们先从简单开始，先把信息项全都独立写成全局变量（定义到window对象上）
在usercache.js中，我们先编写三个全局变量：用户名、是否为管理员、VIP等级
在usercache.d.ts中，我们为三个全局变量添加代码提示，如上图所示，这样就完成了基本的全局变量代码提示
现在我们去test.js中测试一下代码提示，如上图所示，可以看到，在键入几个首字母时，代码提示即正常出现
请注意：尽管在usercache.js中，我们为三个变量添加了注释，但这些注释并没有被识别为代码提示。VS的intellisense引擎只会将/** */中的文本识别为代码提示，在本例中，真正的代码提示是写在usercache.d.ts中的。
实际上，如果不需要什么特别的处理，/** */中的文本其实是可以直接写到usercache.js里的，不过这样写以后将无法享受更高级的语法，所以不是特别推荐
2.定义函数
下面为大家演示如何定义函数，我们仍然从定义全局函数开始
在usercache.js中，我们添加两个全局函数IsVip和SetUserCache。
IsVip用于判断当前用户是不是VIP，VipLevel大于0的都是VIP
SetUserCache用于更新用户缓存信息
然后在usercache.d.ts中，我们为这两个函数添加代码提示，如上图所示
IsVip函数由于没有参数，所以可以直接用一行注释来定义代码提示
SetUserCache函数具有3个参数，定义代码提示的写法会复杂一点，需要在注释中对每个参数进行定义
写在冒号后面的为函数的返回类型，SetUserCache没有返回，所以使用"void"
注意：
在编写SetUserCache代码时，先不要写/** */的提示内容，先写declare function这一行，把declare写完后，再去前面键入/**，当你敲完第二个星号时，VS将为你自动生成一串函数代码提示模版，是不是很方便^_^
同理，在编写TypeScript文件的任意内容时，建议大家养成习惯：先写变量、函数等内容本身，然后再对内容添加注释/** */
下面我们去test.js进行测试
在键入几个首字母后，函数的代码提示正常出现，完成！
好了，这里演示了基本的函数定义方式，有关函数定义其实还有一些进阶的写法，我们这里先暂时放一放，我会在后面的例子中提到
3.定义类
终于来到定义类的环节了！
在前面的例子中，我演示了如何定义全局变量和全局函数，目的是为了让大家熟悉下TypeScript的变量定义和函数定义，而在实际应用中，大家应该要更多地用面向对象的编程方式，把功能封装成类才是一个良好的编程方式。像前面例子中那样，直接将一个个变量全都定义到window对象上，是一个很不优雅的做法，当定义的多了会严重污染window对象。
所以在本节中为大家介绍的类定义方法，希望大家好好学习，并且在实际开发中多多运用
下面，我们先将usercache.js中的内容全都封装到UserCache类中
如果你还不了解js中如何封装类，可以去看看我的另一篇文章 https://www.cnblogs.com/wjbin/p/15223171.html
然后我们在usercache.d.ts中重新编写代码提示
如上图所示，编写declare class即可在TypeScript中定义类
好了，类编写和类代码提示均已完成，我们去test.js进行测试
新建一个对象usercache，然后一点，代码提示都出来啦！
可以看到，TypeScript中类的声明还是比较简单的，类的成员变量和成员函数都可以直接扔里面，不需要什么修饰符
下面我们来为UserCache类添加构造函数传参处理
在usercache.js中添加构造函数传参处理
在usercache.d.ts中添加构造函数声明，如上图所示，添加的constructor声明即为构造函数声明
在test.js中测试，可以看到，在新建对象的时候，构造函数出现了参数提示
ok，至此，你已经学会了基本的类定义写法，应该还是比较简单的吧^_^
接下来我们来看看类的实例化，
在下面的例子中，我们将定义一个全局变量UC，这个全局变量是UserCache类的实例，用于存储当前已登录的用户信息
我们先在usercache.js中编写代码，新建对象UC
然后在usercache.d.s中，我们定义UC的全局变量声明，把冒号后面的数据类型直接写上"UserCache"即可
这样就完成了实例定义，下面我们去test.js进行测试
可以看到，UC和UC一点，都正确出现了代码提示！完美！
4.定义接口
很多时候，我们会遇到需要传输并处理一些简单对象数据的情况。
比如，你想要写一个函数GetWindowSize，这个函数能够获取并返回浏览器窗口的尺寸，尺寸信息包括宽度和高度，示例代码如下
此时，我们就可以在TypeScript中定义一个Size接口，来为这个尺寸信息定义代码提示
在usercache.d.ts中，我们添加下面的代码：
可以看到，我们先定义了一个interface，它具有width和height两个成员变量，然后我们把函数的返回类型直接写成了Size
下面我们去test.js进行测试
我们将函数返回的尺寸对象复制给了size，然后使用size一点，可以看到，代码提示出现了height和width！
本例子为大家演示了如何使用interface来为一些简单对象定义代码提示。
事实上，在定义数据传递时，interface和class是可以混用的，两者都支持在内部定义各种类型的成员变量，也支持定义成员函数，甚至都支持继承（下一篇文章会介绍）
它们唯一的区别是：class可以定义构造函数，并且在js中可以出现新建对象提示，而interface不能，interface只能用于数据传递
5.各种基础数据类型
在上面的代码中，为大家展示了TypeScript中最常见的一些数据类型定义
更复杂的数据定义将在下一篇文章中继续为大家介绍
结语
学习至此，相信大家都已经掌握了"在VS2017中使用TypeScript为js代码添加intellisense代码提示"的一些基础操作，已经达到了入门级别
在实际项目中，合理地运用这些操作，已经能够满足大家绝大部分的代码提示需求了
在下一篇文章中，我将继续为大家带来TypeScript中的各种进阶操作，让你的js代码出现更高级的代码提示！
浙公网安备 33010602011771号