本篇文章将介绍TypeScript关于描述文件中的全局类型定义相关知识。文章将以JQuery为例展开介绍。
引出问题
直接在ts文件中使用JQuery语法会提示以下错误：
这是因为JQuery.js 中没有提供JQuery类型相关注解，所以不能在ts文件中正确的被识别，这时候就需要用到类型注解文件，用于打通ts和js之间的鸿沟，帮助ts去理解JQuery相关语法。
定义全局变量
jquery.d.ts
// 定义接收参数为函数，返回值为void的全局变量
declare var $: (param: () => void) => void;
这时候在ts文件中就可以正确识别 $ 代表的类型了。
demo.ts
$(function () {
alert(123)
})
定义全局函数
第一种方式
jquery.d.ts
// 定义全局函数: 函数名是 $, 参数类型为函数，返回值为void
declare function $(param: () => void): void;
这时候就可以在ts文件中识别定义的全局函数了。
demo.ts
$(function () {
alert(123)
})
第二种方式
jquery.d.ts
//定义全局函数: 函数名是 $, 参数类型为string，内部包含一个名称为 html,接收 string 参数，返回值为对象的函数
declare function $(param: string): {
html: (html: string) => {}
}
这时候就可以在ts文件中识别定义的全局函数了。
第三种方式
是在第二种方式基础之上的变体写法，利于代码可读。
jquery.d.ts
// 定义全局函数
interface JqueryInstance {
html: (html: string) => {};
}
declare function $(selector: string): JqueryInstance
这时候就可以在ts文件中识别定义的全局函数了。
demo.ts
$(function () {
$('body').html('<div>123</div>')
})
第四种方式
是在第三种方式基础之上的变体写法，利于代码管理，其中用到了设计模式中的封装思想。
jquery.d.ts
// 定义全局函数
interface JqueryInstance {
html: (html: string) => JqueryInstance;
}
// 使用 interface 的语法，实现函数重载
interface JQuery {
(readyFunc: () => void): void
(selector: string): JqueryInstance
}
declare var $:JQuery
这时候就可以在ts文件中识别定义的全局函数了。
demo.ts
$(function () {
$('body').html('<div>123</div>')
})
定义命名空间
jquery.d.ts
// 如何对对象进行类型定义，以及对类进行类型定义，以及命名空间的嵌套
declare namespace $ {
namespace fn {
class init {}
}
}
这时候就可以在ts中使用定义的命名空间了。
demo.ts
$(function () {
new $.fn.init()
})
总结
类型定义文件的作用：
帮助ts去理解引入的js库里面的内容，因为js库里面没有ts类型的概念，所以在ts中引入js库的时候，不能理解’$'代表什么，所以需要定义类型注解，帮助ts去理解。
全局函数重载：可以使用函数名相同，但是参数类型和返回值类型不同的函数。