如何使JS类关联TS类定义，消除隐式any类型警告？

问题描述 #

我之前用JSDoc为JavaScript代码编写文档，现在正转换为d.ts文件以从包中导出类型，希望尽可能遵循DRY原则。

现有TypeScript声明文件（CallHistory.d.ts）：

declare class CallHistory {
    constructor(globalConfig: FetchMockConfig, router: Router);
    ...
}
export default CallHistory

对应的JavaScript实现代码：

/**
 * @import CallHistory from '../types/CallHistory';
 */

class CallHistory {
    constructor(globalConfig, router) {
        /** @type {CallLog[]} */
        this.callLogs = [];
        this.config = globalConfig;
        this.router = router;
    }
}

目前我收到globalConfig和router“隐式具有'any'类型”的警告。我尝试添加/** @type {CallHistory} */、/** @class {CallHistory} */等多种JSDoc标签，试图复用CallHistory.d.ts中的类型定义，但均无效。请问如何让类型检查器识别到我的JavaScript类是该TypeScript类的实现？

解决方案 #

方法1：通过@implements结合类型提取复用定义 #

使用@implements标签关联d.ts中的类，同时用TypeScript工具类型从构造函数中提取参数类型，避免重复定义：

/**
 * @import { CallHistory } from '../types/CallHistory';
 * @implements { CallHistory }
 */
class CallHistory {
    /**
     * @param {Parameters<ConstructorType<typeof CallHistory>>[0]} globalConfig
     * @param {Parameters<ConstructorType<typeof CallHistory>>[1]} router
     */
    constructor(globalConfig, router) {
        /** @type {CallLog[]} */
        this.callLogs = [];
        this.config = globalConfig;
        this.router = router;
    }
}

方法2：直接导入参数类型标注 #

如果d.ts文件中已经导出了FetchMockConfig和Router类型，也可以直接导入这些类型给构造函数参数标注，写法更直观：

/**
 * @import { FetchMockConfig, Router } from '../types/CallHistory';
 */
class CallHistory {
    /**
     * @param {FetchMockConfig} globalConfig
     * @param {Router} router
     */
    constructor(globalConfig, router) {
        /** @type {CallLog[]} */
        this.callLogs = [];
        this.config = globalConfig;
        this.router = router;
    }
}

关键注意事项 #

• 确保tsconfig.json中启用了allowJs和checkJs选项，这样TypeScript才会对JavaScript文件进行类型检查
• @implements标签用于明确告知TypeScript当前JS类实现了指定的TS类类型
• 使用Parameters<ConstructorType<typeof X>>可以从类X的构造函数中自动提取参数类型，完美符合DRY原则，避免重复编写类型定义

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