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 的声明文件”
的报错折磨啦。
最近才开始测验输出内容,如有问题欢迎批评指正,谢谢!!!