如何开发编译后具备类型支持的TypeScript可共享HTTP客户端包

我明白你想要开发一个基于Axios的TypeScript HTTP客户端模块，编译成JavaScript后，在其他TypeScript项目里使用时还能自动获取完整的类型提示。下面我会结合你给出的代码示例，一步步帮你实现这个需求：

1. 项目结构初始化 #

先搭建清晰的项目结构，方便后续维护和编译：

your-http-module/
├── src/
│   ├── interfaces/
│   │   └── index.ts   # 定义HttpStatic接口
│   └── http.ts        # HTTP客户端核心实现
├── package.json
└── tsconfig.json

2. 完善接口与核心代码 #

先补全src/interfaces/index.ts里的HttpStatic接口，明确客户端需要暴露的方法：

// src/interfaces/index.ts
import { AxiosRequestConfig, AxiosPromise } from 'axios';

export interface HttpStatic {
  get<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>;
  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>;
  // 可根据业务需求添加put、delete等更多方法
}

接着完善src/http.ts的实现（补全你未写完的构造函数逻辑）：

// src/http.ts
import Axios, { AxiosInstance, AxiosPromise, AxiosRequestConfig } from 'axios';
import { HttpStatic } from './interfaces';

export default class Http implements HttpStatic {
  private headers: object;
  private _client: AxiosInstance;

  constructor(options?: AxiosRequestConfig) {
    // 合并默认配置与传入配置
    const defaultConfig: AxiosRequestConfig = {
      headers: {
        'Content-Type': 'application/json',
        ...options?.headers
      },
      ...options
    };
    
    this._client = Axios.create(defaultConfig);
    this.headers = defaultConfig.headers || {};

    // 可选：添加请求/响应拦截器（比如统一处理token、错误）
    this._client.interceptors.request.use(
      (config) => config,
      (error) => Promise.reject(error)
    );

    this._client.interceptors.response.use(
      (response) => response,
      (error) => Promise.reject(error)
    );
  }

  // 实现get方法，支持泛型类型推导
  get<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T> {
    return this._client.get<T>(url, config);
  }

  // 实现post方法，支持泛型类型推导
  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T> {
    return this._client.post<T>(url, data, config);
  }
}

3. 配置TypeScript编译选项 #

在tsconfig.json中关键要开启类型声明生成，确保编译后输出.d.ts类型文件：

{
  "compilerOptions": {
    "target": "ES6",                          // 目标JavaScript版本
    "module": "CommonJS",                     // 适配Node.js和浏览器的模块系统
    "declaration": true,                      // 生成类型声明文件（核心配置）
    "outDir": "./dist",                       // 编译产物输出目录
    "strict": true,                           // 开启严格类型检查
    "esModuleInterop": true,                  // 兼容CommonJS与ES模块
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],                    // 编译src下所有文件
  "exclude": ["node_modules", "dist"]         // 排除无需编译的目录
}

4. 配置package.json关键字段 #

确保其他项目能正确识别你的模块入口和类型文件：

{
  "name": "your-http-client",    // 你的模块名称（需唯一）
  "version": "1.0.0",
  "main": "./dist/http.js",      // 编译后的JavaScript入口
  "types": "./dist/http.d.ts",   // 类型声明文件入口（核心配置）
  "files": [                     // 指定发布时需要包含的文件
    "dist/**/*"
  ],
  "scripts": {
    "build": "tsc",              // 编译命令
    "prepublishOnly": "npm run build"  // 发布前自动执行编译
  },
  "dependencies": {
    "axios": "^1.6.0"            // 依赖Axios
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "@types/node": "^20.0.0"     // 可选：Node环境类型支持
  }
}

5. 编译与本地测试 #

运行npm run build，会在dist目录生成编译后的.js和.d.ts文件。

你可以在本地测试效果：

• 在另一个TypeScript项目中，通过npm link /path/to/your-http-module链接你的模块
• 导入使用时，就能获得完整的类型提示：

  import Http from 'your-http-client';
  
  const http = new Http({ baseURL: 'https://api.example.com' });
  
  // 这里会自动提示get方法的参数、返回值类型
  http.get<{ id: number; name: string }>('/users/1').then(response => {
    console.log(response.data.id); // 类型推导为number
  });
  

6. 发布到npm（可选） #

如果要公开或内部共享这个模块，登录npm账号后运行npm publish即可。其他项目通过npm install your-http-client安装后，会自动识别类型定义。

核心注意点 #

• declaration: true是生成类型文件的关键，必须开启
• package.json中的types字段必须准确指向生成的.d.ts文件
• Axios的类型会自动被TypeScript识别，无需额外处理

内容的提问来源于stack exchange，提问作者Kousha