Rollup + TypeScript 编译类型声明文件

hello 大家好，我是 SuperYing。本文将从工具库开发者角度讲述如何编译 TypeScript 类型声明文件。

大家在使用 TS 作为开发语言，引入 JS 库的时候，经常遇到这样的报错：无法找到模块“@superying/remote-ui”的声明文件...

这是由于引用的 JS 库没有对应的类型声明文件造成的，若 @types/ 没有维护响应的类型库，则需要自己手动在 .d.ts 中声明：

// 如 global.d.ts 
declare module '@superying/remote-ui'

以上是从引用者角度解决 JS 库模块声明问题，接下来将从工具库开发者角度讲述如果使用 rollup + TypeScript 编译类型声明文件，彻底告别手动声明的困扰。

1.使用 tsc 编译类型文件

TypeScript 配置提供了以下类型编译相关的配置项：

"compilerOptions": { 
    "declaration": true, /* 生成相关的 '.d.ts' 文件。 */ 
    "declarationDir": "./dist/types", /* '.d.ts' 文件输出目录 */ 
    "emitDeclarationOnly": true, /* 只生成声明文件，不生成 js 文件*/ 
    "rootDir": "./src", /* 指定输出文件目录（用于输出），用于控制输出目录结构 */ 
}

我将类型编译配置独立出来到 tsconfig.types.json 文件中，专门用来做类型声明编译用。（注：由于 rollup 通过 rollup-plugin-typescript2 插件识别 TypeScript 语法，默认配置文件 tsconfig.json 给此插件使用，且仅包括常用配置）。

执行以下命令即可生成类型声明文件：

tsc -b ./tsconfig.types.json

将上述命令添加到 npm script，就可以通过 npm run xxx 命令执行编译操作了。

2.如何让类型声明文件被引用

经过第一步，我们已经在指定位置生成的类型声明文件，但仅仅是生成了类型声明文件还不行，外部在引用该工具库的时候还是无法找到模块的声明文件。若要彻底解决这个问题，可以在 package.json 中配置 types 属性，将其指向生成的类型声明文件。下面是我的 package.json 的相关配置，包括 types 配置及编译类型声明文件的 npm script：

{ 
    "name": "@superying/remote-ui", 
    "version": "1.0.6", 
    "main": "./dist/index.js", 
    "module": "./dist/index.esm.js", 
    "types": "./dist/types/index.d.ts", // 指向 tsc 读取的类型声明文件 
    "umd": "./dist/index.umd.js", 
    "devDependencies": { /** 省略.... */ }, 
    "scripts": { 
        "clean:dist": "rimraf dist", 
        "build:types": "npm run clean:dist && tsc -b ./tsconfig.types.json", // 编译类型 
        "build": "npm run build:types && rollup -c", 
        "build:min": "npm run build:types && cross-env NODE_ENV=production rollup -c", 
        "test": "node test/test.js", 
        "pretest": "npm run build" }, 
    "files": [ "dist" ] 
}

好啦，通过以上两步便可让你发布的工具库彻底免受 “无法找到模块 xxx 的声明文件” 的报错折磨啦。

如有问题欢迎批评指正，谢谢！！！