How to use JS libraries in the TypeScript

manual

1. First To clear what type library, different libraries have different ways

2. Look for the declaration file

JS libraries are generally three categories: global library, module library, UMD library. For example, jQuery is a UMD library, either by reference to the play mode, you can also modular reference.

Declaration file

When we want to use a library, you need to declare ts files, external exposure API, sometimes manifest file in the source code, most of the additional installed separately. Such as jQuery require additional installation package type declaration.

Fortunately, most of the libraries, TS communities have declared file. Name @ types / library name, you need to go to this site search about http://microsoft.github.io/TypeSearch/

If not, a need to write their own, and this is a good opportunity for the community contribution. http://definitelytyped.org/guides/contributing.html Here are some ways to write the declaration file. When writing ts declaration file, you can temporarily can not write less than the API.

Here I will demonstrate how to use three libraries in ts file. First, prepare three js file, respectively, represents the global library, module library, UMD library.

// 全局类库  global-lib.js
function globalLib(options) {
   console.log(options);
}
globalLib.version = "1.0.0";
globalLib.doSomething = function () {
   console.log('globalLib do something');
};

// 模块类库  module-lib.js
const version = "1.0.0";
function doSomething() {
   console.log('moduleLib do something');
}
function moduleLib(options) {
   console.log(options);
}
moduleLib.version = version;
moduleLib.doSomething = doSomething;
module.exports = moduleLib;

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

Global library

1. Introducing the library in the HTML file <script> tag
2. The written statement js library files in the same folder under the same name, suffix .d.ts
3. At this point you can use in the global API ts file

If at this time the compiler is not an error, and the browser error not defined, may be introduced in html path is a relative path, an absolute path can be changed (to the project directory as the root directory).

Declaration file global-lib.d.ts

declare function globalLib(options: globalLib.Options): void;
declare namespace globalLib{
   const version: string;
   function doSomething(): void;
   interface Options {
      [key: string]: any,
   }
}

Using this library ts file:

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

Module library

1. The declaration file in the same directory
2. The introduction of ts

Declaration file 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; // 这样写兼容性更好

ts used in libraries

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

UMD library

UMD library used in two ways:

• The introduction of a global library of way
• Module library introduced manner

Which, when introduced into the way of using the global library, compiler, and are not recommended to do so, you need to open allUmdGlobalAccess configuration items in tsconfig.json can eliminate prompts.

Declaration file umd-lib.d.ts

umdLib namespace {DECLARE 
   const Version: String; 
   function doSomething (): void; 
} 
Export AS // namespace umdLib umd library specially prepared statements, indispensable 
export = umdLib

ts used UMD library (no longer demonstrate the global use)

import umdLib from './Libs/umd-lib'
umdLib.doSomething();
console.log(umdLib.version);

Example: In use jQuery ts (without the introduction of a global presentation mode)

Install jquery its declaration file

npm install -D jquery @types/jquery

use:

import $ from 'jquery';
$(".app").css("color","red");

Add plug-ins for the library

Is the library to add custom methods

Which agreed to add plug-in module UMD libraries and library method.

// add custom libraries for the global method 
DECLARE Global { 
   namespace {globalLib 
      function myFunction (): void 
   } 
} 
globalLib.myFunction = () => {the console.log ( "Global widget")}; 

// is a module library add custom methods 
dECLARE Module1 "./Libs/module-lib.js" { 
   Export function myFunction (): void; 
} // declaration of the class library module-lib myFunction method 
moduleLib.myFunction = () => {console.log ( "Module1 widget")}; // define custom methods 

// add custom methods UMD library 
DECLARE Module1 "./Libs/umd-lib.js" { 
   Export function myFunction (): void; 
} // is umd -lib library declaration myFunction method 
umdLib.myFunction = () => {console.log ( "umd widget")}; // define custom methods 

globalLib.myFunction (); 
moduleLib.myFunction ();
umdLib.myFunction();

For example, add custom methods as libraries moment (jQuery not need to use the official API provided)

npm install -D moment @types/moment

import m from 'moment';
declare module 'moment'{
   export function myFunction(): void;
}
m.myFunction = () => {console.log("moment插件")};

m.myFunction();