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

Posted wzndkj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TypeScript 模块代码的类型描述文件相关的知识，希望对你有一定的参考价值。

安装 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 = $;
}

 

以上是关于TypeScript 模块代码的类型描述文件的主要内容，如果未能解决你的问题，请参考以下文章

如何手动补充陈年老库（或纯 JS 代码）的 TypeScript 类型？

TypeScript 阻止文件成为模块？

React，Typescript - 找不到模块...或其相应的类型声明

最新的 preact 和 typescript 模块传递了错误的类型

如何在 TypeScript 定义文件中使用外部模块的类型？

用于无类型 npm 模块的 TypeScript 自定义声明文件