文档章节

typings实现自定义JS语法提示

nandy007
 nandy007
发布于 2017/04/13 19:47
字数 660
阅读 265
收藏 0

在vscode中可以通过typings自定义JS语法提示。

自定义模块提示

自己编写的JS模块可以通过手动编写d.ts文件来实现提示。

d.ts文件必须放置于typings目录下:

d.ts文件的语法定义基本跟typescript的接口定义类似。只需要把被暴露提示的类/对象/变量等使用declare关键进行声明即可。

声明变量示例

interface JQLiteStatic {
	ajax(settings: any): void;
}

declare var JQLite: JQLiteStatic;

使用declare var可以声明一个变量提示。

当我们在vscode中键入字母“J”就会有提示:

当我们键入JQLite.后面会提示ajax方法:

 

声明模块示例

interface JQLiteStatic {
	ajax(settings: any): void;
}

var JQLite: JQLiteStatic;

declare module 'JQLite' {
	export = JQLite;
}

同样的还是JQLite,这次我们希望在require模块后调用,可以通过上面的写法。

使用declare module可以声明一个模块提示。

这时候我们在js文件中编写如下代码就会有提示:

继续使用$也可以提示:

 

这里我们可以看到JQLiteStatic是一个interface,我们仅定义它具有一个函数ajax可被调用。

有时候我们希望这个interface是一个函数,比如可以通过JQLite(selector)来调用,可以通过如下方式编写JQLiteStatic:

interface JQLiteStatic {
	(selector: string, context?: any): IJQLite;

	ajax(settings: any): void;
}

这时候通过JQLite(selector)调用得到的变量类型就是IJQLite,只需要在d.ts文件中再写一个interface即可,请看文末最后的完整示例。

声明类示例

declare class mytest {

	public selector: string;

	public todo():void;
}

通过declare class可以声明一个类提示。

这时候我们编写如下代码可以获得提示:

继续对test进行提示:

JQLite完整示例

interface IJQLite {

	// 基础功能

	child(selectot?: string): IJQLite;
	parent(selectot?: string): IJQLite;
	attr(attrName: string, attrValue?: any): IJQLite;
	css(styleName: string, styleValue?: any): IJQLite;
	css(styleKV: Object): IJQLite;
	addClass(classStr: string): IJQLite;
	removeClass(classStr: string): IJQLite;

	//扩展 MVVM

	render(data: Object): any;
}

interface JQLiteStatic {
	(selector: string, context?: any): IJQLite;

	ajax(settings: any): void;
}


declare module 'JQLite' {
	export = JQLite;
}

//declare var JQLite: JQLiteStatic;
var JQLite: JQLiteStatic;

 

 

Nodejs模块提示

 

 

如果是对nodejs模块进行代码提示,安装typings即可:

第一步

全局安装typings

npm install -g typings

第二步

在项目跟目录添加一个jsconfig.json文件,内容如下:

 

{
   "compilerOptions": {

   },
   "exclude": [
   ]
}
typings install dt~moduleName --save

 

第三步

在项目根目录中执行:

typings install dt~moduleName --save

其中moduleName为要提示的nodejs模块的名称。
比如:安装glob模块定义的命令

typings install dt~glob --save


这时候会在当前目录下生成一个typings目录,这个目录下存放定义d.ts文件,如下图所示:

© 著作权归作者所有

nandy007

nandy007

粉丝 32
博文 11
码字总数 22474
作品 5
南京
产品经理
私信 提问
加载中

评论(3)

知秋T一叶
知秋T一叶

引用来自“nandy007”的评论

引用来自“OSC_UtTjaK”的评论

��大佬知不知道vscode里面怎么提示其他js文件里面的方法或变量啊,搞半天都不行,但css可以提示其他文件的
文中提到的一二三步是提示typings管理器里已经存在的js模块的提示
你用到哪个模块可以先在里面看下有没有,有安装就可以
如果没有就暂时只能自己写的d.ts文件,就像文中的JQLite完整示例所示

不错,很详细,回头试试(๑>؂<๑)
nandy007
nandy007

引用来自“OSC_UtTjaK”的评论

��大佬知不知道vscode里面怎么提示其他js文件里面的方法或变量啊,搞半天都不行,但css可以提示其他文件的
文中提到的一二三步是提示typings管理器里已经存在的js模块的提示
你用到哪个模块可以先在里面看下有没有,有安装就可以
如果没有就暂时只能自己写的d.ts文件,就像文中的JQLite完整示例所示
知秋T一叶
知秋T一叶
��大佬知不知道vscode里面怎么提示其他js文件里面的方法或变量啊,搞半天都不行,但css可以提示其他文件的
webstorm + vscode支持微信小程序语法及代码智能提示教程

做了半年的微信小程序,由于感觉微信开发者工具非常不好用,所以贴出在下使用webstorm和vscode开发的教程给大家参考一下。 注意:代码只能提示只有js文件 工具:电脑一台、webstorm、vscode ...

枝枝_
2017/12/13
0
0
TypeScript系列 - 什么是TypeScript

看了很多关于TypeScript的文章,总体说来没有很好的,一个系统的学习TypeScript的资源。 接下来,我将给大家带来TypeScript的系列,让你和我一样,一步一步的学习TypeScript,并且学以致用。...

Hongten
2018/08/02
0
0
RxDB 7.4.4 发布,JavaScript 客户端数据库

RxDB 7.4.4 已发布,这是一个 JavaScript 客户端数据库,主要用于浏览器、NodeJS、Electron、Cordova、React-Native 以及其他任何 JavaScript 运行环境。 更新内容: Bug 修复:当没有指定排...

王练
2018/04/24
656
0
微信小程序 TypeScript 尝试

自从去年开始在项目里写了一段时间 Javascript 后,感觉没有类型检查的语言还是不太适合我,所以一直想尝试下 TypeScript,然而由于项目庞大,人员协作问题,一时半会没办法切成 TypeScript...

Nemocdz
02/07
0
0
15 个微型的 JavaScript 框架

问一个 Web 开发者最喜欢的 JS 库是什么,多数回答都是 jQuery,不管他所作的网站是大是小。开发者倾向使用 jQuery 的原因是它可以降低代码的复杂度、而且 jQuery 经过良好的测试,大量的用户...

红薯
2012/02/11
7.7K
11

没有更多内容

加载失败,请刷新页面

加载更多

AOP的学习(1)

AOP 理解AOP编程思想(面向方法、面向切面) spring AOP的概念 方面 -- 功能 目标 -- 原有方法 通知 -- 对原有方法增强的方法 连接点 -- 可以用来连接通知的地方(方法) 切入点 -- 将用来插入...

太猪-YJ
37分钟前
2
0
一张图看懂亮度、明度、光度、光亮度、明亮度

亮度、明度、光亮度,Luminance和Brightness、lightness其实都是一个意思,只是起名字太难了。 提出一个颜色模型后,由于明度的取值与别人的不同,为了表示区别所以就另想一个词而已。 因此在...

linsk1998
昨天
5
0
Python应用:python链表示例

前言 python链表应用源码示例,需要用到python os模块方法、函数和类的应用。 首先,先简单的来了解下什么是链表?链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是...

python小白1
昨天
3
0
Source Insight加载源码

Source Insight是一个图形化的源代码查看工具(当然也可以作为编译工具)。如果一个项目的源代码较多,此工具可以很方便地查找到源代码自建的依赖关系。 1.创建工程 下图为Snort源代码的文件...

天王盖地虎626
昨天
3
0
nginx-rtmp-module的缺陷分析(二)

nginx-rtmp-module使用指令push和pull来relay媒体流数据,以便分布式部署服务。 当nginx-rtmp-module作为边缘服务器(一般不会向边缘服务器推流)时,使用pull从源服务器获取媒体流数据,俗称...

YoungSagit
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部