在 TypeScript 中导入 JavaScript 包，解决声明文件报错问题

前言

在TypeScript项目中引入 纯 JavaScript 的包时,可能会报这样的错

Could not find a declaration file for module 'js-export-excel'. 'D:/project/kczn-h5-back/node_modules/js-export-excel/lib/index.js' implicitly has an 'any' type. Try npm i --save-dev @types/js-export-excel if it exists or add a new declaration (.d.ts) file containing declare module 'js-export-excel';

了解问题

最近在写管理后台项目时, 在 导出 功能上用了 js-export-excel 库实现导出,但在项目打包过程中,被告知 没有提供TypeScript的类型声明

因为当 import 一个没有类型声明的第三方库时,TypeScript不知道import的东西是什么类型,会偷偷将第三方库指定为 any 类型,也就是 隐式 any(implicit any),但正常的前端项目都会禁止 impliclt any的出现。 而这就是报错的原因

解决方案一 : 命令安装官方的类型声明

正如报错信息中所提示的一样,进行相应的 npm i --save-dev @types/库名, 但通常只有相对大型的库才具备类型声明, 比如lodash这样的库,就可以直接用命令解决

解决方案二 : 声明类型文件

因为不是每个库都具备官方的类型声明,所以在使用相应命令也可能并不能解决问题,所以更多的还是需要我们自己去进行处理

正如报错题信息中的一句话 add a new declaration (.d.ts) file containing declare module 'js-export-excel';,

只需要在 TypeScript 的 d.ts 文件中编写一个空的 declare module, 就能吧环境包当做 any 类型引入,同时也不会出发 implicit any 报错,而这一系列的操作, 被文档叫做 Shorthand ambient modules [快速引入环境包]

在项目的根目录中,创建一个名为 type 的文件夹,并创建 js-modules.d.ts 的文件

写入以下代码,这里用 js-export-excel 这个库举例

// js-module.d.ts

// 如果 js-export-excel 模块导出了一个函数，可以这样声明

declare module 'js-export-excel'

并在tsconfig.json中的include中,加上 "./types/*.d.ts" , 以识别到对应的文件