学习自己写TS中的描述文件

在ts中直接使用jQuery，是会报错的，一般情况是直接安装一个已写好的jQuery.d.ts文件

不过这次是自己学习写一下jQuery.d.ts文件。

$(function(){ alert(1111) })      // $ 会报错
$(function(){ $("body").html("<div>123</div>") })     //内部 $ 也会报错

定义全局变量$

.d.ts文件中定义$：

1. 定义一个全局变量$
2. $类型是函数，返回是空
3. $函数接收一个参数readFunc，返回空
4. readFunc类型函数，返回是空

declare var $: (readFunc: () => void) => void;

定义全局函数$

.d.ts文件中定义$：

1. 定义一个全局函数$
2. $函数接收一个参数readFunc，返回空
3. readFunc类型是函数，返回是空

declare function $(readFunc: () => void): void;

先在$只可以接收函数作为参数，但现在$需要接收一个选择器作为参数，怎么弄呢？

利用函数重载声明$

.d.ts文件中定义$：

1. 利用函数重载再次声明一个全局函数$
2. $函数接收一个参数selector，返回一个对象，对象中要包含html的方法
3. selector类型是string；html类型是函数
4. html函数接收一个html参数，返回空
5. 参数html类型是string

declare function $(
  selector: string
): {
  html: (html: string) => void;
};

用interface优化代码

html函数应该返回的是自身，这样在后面使用链式调用

interface jQueryInstance {
  html: (html: string) => jQueryInstance;
}
declare function $(selector: string): jQueryInstance;

用interface重构代码

.d.ts文件中定义$：

1. 用interface声明一个接口jQuery
2. 用接口的语法实现两个函数的重载，意思是接口jQuery拥有两种方法的实现方式
3. 定义一个全局变量$，
4. 它的类型是jQuery

interface jQuery {
  (readFunc: () => void): void;
  (selector: string): jQueryInstance;
}

declare var $: jQuery;

对对象进行类型定义

上面实现了$的函数调用，那如何实现对象调用呢？

$(function(){ 
  $("body").html("<div>123</div>")
  new $.fn.init()         // fn 会报错
})

$.fn.init()是一个对象形式的调用，需要使用命名空间。

.d.ts文件中定义$：

1. 定义命名空间$
2. $是一个对象，有一个fn的对象
3. fn类型是命名空间，有一个init方法
4. init是一个构造方法

declare namespace $ {
  namespace fn {
    class init {}
  }
}

Tip：当既要$是函数，又要$是对象时，用namespace；如果只是函数调用可以用interface。

模块化的描述文件

用import导入jQuery时，提示在module下找不到jQuery。

在.d.ts文件中定义module

1. 定义模块jquery
2. 将之前定义的全局变量都放在module中
3. 放在module中的声明不需要使用用declare
4. 导出变量$，供外部使用

declare module "jquery" {
  interface jQueryInstance {
    html: (html: string) => jQueryInstance;
  }
  namespace $ {
    namespace fn {
      class init {}
      function init(): void;
    }
  }
  function $(readFunc: () => void): void;
  function $(selector: string): { html: (html: string) => jQueryInstance };

  export = $
}

另外可添加微信ttxbg180218交流