Typescript 声明文件 与 declare

475 阅读1分钟

什么是声明文件?

当我们使用typescript进行开发时经常会引入第三方的js库,默认情况下ts是不认识我们引入的这些JS库的。所以在使用这些js库的时候, 我们就要通过声明文件告诉ts它是什么, 怎么用,同时能获得对应的代码补全、接⼝提⽰等功能。声明文件一般是以xxx.d.ts命名。

常见类库声明文件编写方式

1. 全局类库

//global-lib.js
function globalLib(options) {
    console.log(options);
}

globalLib.version = "1.0"

globalLib.doSomething = function() {
    console.log("let`t do something!!!");
}

//global-lib.d.js
declare function globalLib(options: globalLib.Options):void;

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

2. 模块类库

  //module-lib.js
function moduleLib(options) {
    console.log(options);
}

moduleLib.version = "1.0"

moduleLib.doSomething = function() {
    console.log("let`t do something!");
}

export default moduleLib
//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

3.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()
    }
})(window, function(){
    return {
        version: '1.0',
        doSomething(){
            console.log('umdLib do something');
        }
    }
})
//umd-lib.d.ts
declare namespace umdLib{
    const version:string
    function doSomething():void
}
//umd类库必须加这行
export as namespace umdLib

export = umdLib

decalre关键字

decalre关键字除了用于声明文件中,也可以使用它对类库添加一些自定义的方法或属性

模块类库

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

全局类库

  declare global {
      export namespace globalLib{
           export  function myFunction():void;
      }
  }
  
  globalLib.myFunction = () => {}

第三方js库的声明文件查询网站 www.typescriptlang.org/dt/search?s…