编写类型定义文件

在引入一些第三方库的时候需要引入其类型定义文件@types/xxx,但是在一些第三方库是没有类型定义文件的。

我们以jquery为例子,类型定义文件为xx.d.ts

描述文件中的全局类型

// 定义全局变量
// declare var $: (param: () => void) => void;

// 定义全局函数
interface JqueryInstance {
  html: (html: string) => {};
}


//函数重载
declare function $(readyFunc: () => void): void;
declare function $(selector: string): JqueryInstance;

使用接口语法描述全局类型

// 定义全局函数
interface JqueryInstance {
  html: (html: string) => {};
}

//使用interface的语法，实现函数重载
interface JQuery {
  (readyFunc: () => void): void;
  (selector: string): JqueryInstance;
}


declare var $:JQuery;

模块代码的类型描述文件

// Es6 模块化
declare module 'jquery' {
  interface JqueryInstance {
    html: (html: string) => JqueryInstance;
  }
  // 混合类型
  function $(readyFunc: () => void): void;
  function $(selector: string): JqueryInstance;
  namespace $ {
    namespace fn {
      class init {}
    }
  }
  export = $;
}

import $ from 'jquery';

$(function() {
  $('body').html('<div>123</div>');
  new $.fn.init();
});

此时引入jq就不会报错了