TypeScript项目扩展带@types的JS类后导出丢失父类类型的解决方法

核心原因 #

TypeScript生成声明文件（.d.ts）时，默认不会将依赖包的类型完全嵌入到你的包声明中，而是通过引用关联。如果包的声明生成和发布配置不当，其他项目就无法解析到父类的类型信息。

具体解决步骤 #

1. 配置tsconfig.json关键选项 #

确保compilerOptions包含以下配置，保证类型声明文件正确生成：

{
  "compilerOptions": {
    "declaration": true, // 必须开启，生成类型声明文件
    "declarationDir": "./dist/types", // 可选，指定声明文件输出目录
    "types": ["JSPackage"], // 显式引入依赖包的类型（对应@types/JSPackage）
    "skipLibCheck": false // 确保TypeScript检查依赖库的类型合法性
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

2. 完善package.json配置 #

在你的包配置文件中，指定类型入口并明确依赖：

{
  "name": "your-package-name",
  "main": "./dist/index.js",
  "types": "./dist/types/index.d.ts", // 指向生成的主声明文件
  "dependencies": {
    "JSPackage": "^x.x.x" // 确保依赖的JS包被正确声明
  },
  "devDependencies": {
    "@types/JSPackage": "^x.x.x" // 保留类型包作为开发依赖
  }
}

3. 确保源码中类型引用完整 #

如果生成的声明文件未自动关联父类类型，可以在源码中显式导入父类类型，辅助TypeScript生成正确的声明：

import { SomeClass as JSClass } from "JSPackage";
import type { SomeClass as JSClassType } from "JSPackage"; // 显式导入类型，辅助声明生成

class SomeClass extends JSClass {
  constructor() { super(); }
  aNewFunction(str: string): void { /* ... */ }
  override anOldFunction(int: number): void { /* ... */ }
}

export default SomeClass;

4. 验证构建结果 #

运行tsc重新构建后，检查dist/types下的.d.ts文件，应包含对父类的引用，示例如下：

import { SomeClass as JSClass } from "JSPackage";
declare class SomeClass extends JSClass {
    constructor();
    aNewFunction(str: string): void;
    anOldFunction(int: number): void;
}
export default SomeClass;

其他项目安装你的包后，只要安装了JSPackage及其对应@types包，就能正确解析父类的所有字段。

内容的提问来源于stack exchange，提问作者David F. B.