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