现在TS项目很多,如果你开发的npm包不支持类型声明文件,对使用ts的开发者不太友好,开发者无法获得ts类型提示。如何在自己的 npm 包中自带 .d.ts
文件,以确保使用者不需要额外配置 tsconfig.json
就能获得类型提示,以下是完整操作步骤记录:
1. 编写 TypeScript 代码
首先,用 TypeScript 编写你的 npm 包。假设你的包名为 my-ts-test
,项目结构如下:
my-ts-test/
├── src/
│ ├── index.ts
│ └── utils.ts
├── package.json
├── tsconfig.json
2. 配置 tsconfig.json
在项目根目录下创建或编辑 tsconfig.json
文件,确保它配置正确,能够生成 .d.ts
文件:
{"compilerOptions": {"target": "ES6","module": "commonjs","declaration": true,"outDir": "./dist","strict": true},"include": ["src"]
}
关键配置项说明:
-
declaration
:true
,生成.d.ts
文件。 -
outDir
:"./dist"
,编译输出目录。
3. 构建项目
使用 TypeScript 编译器进行构建,生成 .js
和 .d.ts
文件:
tsc
构建后,项目结构如下:
my-ts-test/
├── dist/
│ ├── index.js
│ ├── index.d.ts
│ ├── utils.js
│ └── utils.d.ts
├── src/
│ ├── index.ts
│ └── utils.ts
├── package.json
├── tsconfig.json
4. 配置 package.json
在 package.json
文件中,指定 main
和 types
字段:
{"name": "my-library","version": "1.0.0","main": "dist/index.js","types": "dist/index.d.ts","scripts": {"build": "tsc"},"devDependencies": {"typescript": "^4.0.0"}
}
-
main
: 指定主入口文件。 -
types
: 指定类型声明文件的入口。
5. 发布包
在发布包之前,确保 dist
目录包含在发布包中,可以在 package.json
中配置 files
字段:
{"files": ["dist"]
}
发布包:
npm publish
6. 使用者角度体验
当使用者安装并使用你的包时,他们不需要任何额外的配置,就能自动获得类型提示。例如:
npm install my-ts-test
在 TypeScript 项目中:
import { someFunction } from 'my-ts-test';someFunction();
因为在 package.json
中指定了 types
字段,TypeScript 编译器会自动找到并加载 dist/index.d.ts
文件,从而提供类型提示和类型检查功能。
通过以上步骤,可以在 npm 包在使用时能够自动提供类型提示,而不需要使用者进行额外的 tsconfig.json
配置。