typescript引入js类库

• 安装类库
  • npm i jquery
• 在src下新建 lib 文件夹
• 新建 index.ts 文件
• 安装类型声明包
  • npm i @type/jquery -D

// src/lib/index.ts
import $ from 'jquery'
$('.app').css('color', 'red')

• 可以在http://microsoft.guthub.io/TypeSearch中查询是否有对应的声明文件
  • 如果没有需要自己写

三种类库的编写方法

全局库

• 新建文件 src/lib/global-lib.js

  // src/lib/global-lib.js
  function globalLib(options) {
      console.log(options);
  }
  
  globalLib.version = '1.0.0';
  
  globalLib.doSomething = function () {
      console.log('globalLib.doSomething')
  }
  

• 在 index.html 中引入

  • <script src="src/lib/global-lib.js"></script>

• 在同目录下编写 global-lib.d.ts 声明文件

  // src/lib/global-lib.d.ts
  //declare 可以为外部变量提供类型声明
  declare function globalLib(options: globalLib.Options): void;
  
  declare namespace globalLib {
      const veersion: string;
      function doSomething(): void;
      interface Options {
          [key: string]: any
      }
  }
  

• 在 src/lib/index.ts 中追加

  globalLib({ x: 1 })
  globalLib.doSomething()
  

模块库

• 新建文件 src/lib/module-lib.js

  // src/lib/module-lib.js
  const version = '1.0.0';
  function doSomething() {
      console.log('moduleLib do somrthing');
  }
  
  function moduleLib(options) {
      console.log(options)
  }
  
  moduleLib.version = version;
  moduleLib.doSomething = doSomething;
  
  module.exports = moduleLib;
  

• 在同目录下编写 module-lib.d.ts 声明文件

  // src/lib/module-lib.d.ts
  declare function moduleLib(options: Options): void;
  
  interface Options {
      [key: string]: any
  }
  
  declare namespace moduleLib {
      const version: string
      function doSomething(): void
  }
  
  export = moduleLib
  

• 在 src/lib/index.ts 中追加

  import moduleLib from './module-lib'
  moduleLib.doSomething()
  

umd库

• 新建文件 src/lib/umd-lib.js

  // src/lib/umd-lib.js
  (function (root, factory) {
      if (typeof define === "function" && define.amd) {
          define(factory);
      } else if (typeof module === "object" && module.exports) {
          mmodule.exports = factory();
      } else {
          root.umdLib = factory();
      }
  }(this, function () {
      return {
          version: '1.0.0',
          doSomething() {
              console.log('umdLib do something');
          }
      }
  }));
  

• 在同目录下编写 umd-lib.d.ts 声明文件

  declare namespace umdLib {
      const version: string
      function doSomething(): void
  }
  export as namespace umdLib
  
  export = umdLib
  

• 在 src/lib/index.ts 中追加

  import umdLib from './umd-lib'
  umdLib.doSomething()
  

• umd库可以通过全局的方式引用，同global-lib

  • 在 index.html 中引入
    • <script src="src/lib/umd-lib.js"></script>

      // src/lib/index.ts
      // import umdLib from './umd-lib'
      umdLib.doSomething()
      

    • 报错：umdLib”指 UMD 全局，但当前文件是模块。请考虑改为添加导入。
    • 修改配置 tsconfig.js
      • “allowUmdGlobalAccess”: true

插件

给类库添加自定义方法

• 安装类库npm i moment

模块插件

• 在 src/lib/index.ts 中追加

  import m from 'moment'
  declare module 'moment' {
      export function myFunction(): void
  }
  m.myFunction = () => { }
  

全局插件

• 在 src/lib/index.ts 中追加

  declare global {
      namespace globalLib {
          function doAnything(): void
      }
  }
  globalLib.doAnything = () => { }