为js库编写ts申明文件 - 曦宇巴巴Blog

写在前面

打开 github，可以看到越来越多的 js 的大型应用型项目已经投入到了 ts 的怀抱，不过也可以看到的是作为功能性使用的很多知名的被大量使用的 js 类库其实仍然是在采用 js 来编写，那我们的 ts 项目在采用这些 js 库的时候就会涉及到我们今天的主题-ts 申明文件

为 js 库编写申明文件的作用及意义

我想，在使用 ts 时所获得的最大益处就是它的类型检查帮助我们在项目开发时就规避掉了绝大部分类型 bug，那如果使用它却不能使用它的类型检查，那么使用 typescript 可以说也是毫无意义可言了。所以这里我们在引用非 ts 版本的第三方库【且该库的作者或者社区未提供.d.ts 申明文件的前提下】，如果有这个精力和人力，从为了更加快速良好的使用它们的角度来说，为它们编写一份申明文件是有一件非常有必要的事情，而这份申明文件也将为我们正确使用该库提供最强有力的保障。

模块申明文件编写示例

示例模块代码

// exampleModule.js（umd格式的exampleModule模块）

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['b'], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory(require('b'));
  } else {
    root.exampleModule = factory(root.b);
  }
})(typeof self !== 'undefined' ? self : this, function(b) {
  return {
    name: 'exampleModule',
    msg: 'hello everyone, this is exampleModule',
    methods: {
      hey: function() {
        console.log(this.msg);
      }
    }
  };
});

示例申明文件代码

// exampleModule.d.ts（exampleModule模块的ts申明文件）

// 申明exampleModule模块
export default exampleModule
export as namespace exampleModule;

declare namespace exampleModule{
    const name: string;
    const msg: string;

    namespace methods: {
        function hey(): string;
    }
}

写在后面

以上只是一个申明文件的简单示例和作用介绍，如果对申明文件的编写方式有疑问或者想了解更多的 ts 申明文件相关知识，请查看相关链接。