TS类型声明文件（一）如何在ts npm包项目中生成 d.ts 文件

现在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 配置。