typescript学习系列7：描述文件中的全局类型这是我参与 8 月更文挑战的第 6 天，活动详情查看： 8月更文挑战

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

继续系列6中的代码，继续操作

1.描述文件中的全局类型：

将index.html中引·jquery.js文件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>描述文件中的全局类型</title>
</head>
<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <script src="./page.ts"></script>
</body>
</html>

引入了jquery.js文件，那么我想要在page.ts文件中去写jquery代码：

//page.ts
$(function(){
  alert(1234);
})

执行npm run start在谷歌浏览器中打开index.html页面会发现代码执行alert(1234);
但是page.ts编辑器vscode中的$符号飘红
- 因为现在在ts文件中使用jquery，但是现在的jquery是通过js的形式引入，jquery.js中是没有中各种各种的类型定义或者类型注解的
  - 这个时候需要安装 npm install @types/juqery
  - 或者自己写一个类型注解文件,用来打通js和ts之间的鸿沟

2.类型注解文件：

src目录下新建jquery.d.ts文件，这个文件说白了就是帮助page.ts对jquery做一些理解，类似于中外友人交流的翻译官的一个作用吧

1.全局变量 declare var:

//jquert.d.ts
declare var $ :(param:()=>void)=>void;

2.全局函数 declare function:

declare function $(param: () => void):void

3.函数重载：

修改page.ts代码如下：

如上图所示，飘红了😤，因为这种jquery的这种使用方式并没有被我们在jquery.d.ts中进行说明，看下面处理:

//jquery.d.ts

//之前声明了$的使用方式
declare function $(param: () => void):void

//又新添加的$的使用方式
declare function $(param:string):{
  html:(html:string)=>{};
}

声明了一个$
接收一个string类型参数，返回一个对象
对象里面有个html方法,接收一个string类型参数
像这样同一个$函数名，声明了多个使用方式，这样叫做函数的重载。
再回到page.ts代码中，发现$("body").html("<div>奇迹的另一个名字叫做努力~！</div>")这部分代码不飘红了。

代码优化:

//jquery.d.ts
interface instanceOfJquery{
  html:(html:string) => instanceOfJquery;
}
//定义全局函数
declare function $(param:string):instanceOfJquery;

使用interface接口的形式实现函数重载:

//jquery.d.ts

interface instanceOfJquery{
  html:(html:string)=>instanceOfJquery;
}

interface Jq{
  (param:()=>void):void;
  (param:string):instanceOfJquery
}

declare var $:Jq

对对象、类以及命名空间嵌套进行类型定义:

继续修改page.ts文件为:

//page.ts
$(function(){
  $("body").html("<div>奇迹的另一个名字叫做努力~！</div>");
  new $.Func.init();
})

那么new $.Func.init();该如何处理呢?

//jquery.d.ts
declare namespace ${
  namespace fn{
    class init{}
  }
}

3.模块代码的类型描述文件:

上面讲述了关于全局变量啊，全局函数的一些声明描述，那么如果是模块呢？该如何声明呢？

npm install jquery --save安装jquery
删除index.html总对于jquery的引入
page.ts文件中通过import $ from "jquery";
jquery.d.ts文件的处理: