TypeScript模块代码的类型描述文件

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

安装 jquery

cnpm install jquery --save

不以 cdn 的方式引入，而是以模块化的方式引入 jquery

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./page.ts"></script>
  
</body>
</html>

page.ts

import $ from 'jquery';

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

jquery.d.ts

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

  export = $;
}