TS从入门到放弃【二十三】：为第三方库写声明

我们来尝试为 indexof 这个库写声明

1、安装依赖

首先，先安装 indexof 依赖

npm i -D indexof

2、查看源代码

下面的 indexof 的源代码：

var indexOf = [].indexOf;

module.exports = function(arr, obj){
  if (indexOf) return arr.indexOf(obj);
  for (var i = 0; i < arr.length; ++i) {
    if (arr[i] === obj) return i;
  }
  return -1;
};

可以看出 indexof 这个库还是比较简单的：

• 拿出数组的的 indexof 方法
• 模块中导出了一个方法
• 传入两个参数
  • 参数1是一个数组
  • 参数2是一个值
• 函数内部：
  • 先判断数组中有没有 indexOf 方法
  • 如果有的话，直接使用原生的 indexOf，返回值在数组中的位置
  • 如果没有的话，就进行遍历，查出 obj 在数组中的位置

3、使用

我们在项目中直接使用 indexOf 这个库来看一下：

import indexOf = require("indexof");
console.log(indexOf([1, 2, 3], 2));

通过上图可以看到，我们引入的 indexOf 是没有任何类型判断的。

即使我们什么参数都不传，编译器也不会给我们提示错误

import indexOf = require("indexof");
console.log(indexOf());

但实际上它有两个参数，这两个参数都是必传的。

4、配置

修改 tsconfig.json 配置

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/@types", "./typings/*"]
    },
  }
}

在设置 paths 的同时必须要设置 baseUrl

• paths
  • *：匹配所有的模块
  • 值为找声明文件映射的路径：先从 node_modules/@types 中找；如果没有找到，再去 ./typings/*（根目录的 typing 文件夹） 中找

5、编写声明文件

创建 indexof/index.d.ts 文件

现在我们再来看一下刚刚的测试代码，会发现它已经报错了

此时说明已经找到了 index.d.ts 文件了，只不过文件中我们还什么都没写，所以会出现这个错误。

现在，我们来为他写一下声明文件。

// indexof/index.d.ts
declare function indexof(array: any[], value: any): number {}
export = indexof

此时回到测试代码，可以看到另外一个地方报错了

这就达到我们想要的类型提示的效果了