为三方JS库添加TypesScript类型定义

问题

项目使用qrcode在前端生成二维码图片。

qrcode是一个JavaScript库，我的前端项目使用了TypeScript，无法直接使用。

自己尝试为它编写TypeScript的类型定义，没有成功。

后面才发现有官方的TypeScript支持：@types/qrcode

引入@types/qrcode后，项目build失败。错误信息：

245:5 Type 'Timeout' is not assignable to type 'number'.

经过检查，发现是@types/qrcode引入了node依赖，node的setTimeout覆盖了DOM的setTimeout。

解决方案

通过在网上搜索，找到了解决方案。

此方案可以为任意三方JS库添加TypesScript类型定义。

1.创建文件夹

  创建src/types/qrcode文件夹

2.编写TypesScript声明文件

  直接将@types/qrcode的文件index.d.ts拷贝，删除不必要的内容。

3. 修改tsconfig.json文件

  3.1 在typeRoots属性添加自己的types文件夹。

"compilerOptions" : {
    ...
    "typeRoots": [
        "node_modules/@types",
        "src/types"
    ]
}

3.2 在paths属性添加三方库的别名

{
  "compilerOptions" : {
  ...
    "paths":{
      "qrcode": ["./src/types/qrcode"]
    }
  }
}

3.3 排除types文件夹，防止被编译

"exclude": [
    "node_modules",
    "src/types/**"
]