如何在JavaScript中使用JSDoc为abstract class的static getter标注类型

我之前也遇到过一模一样的需求——给抽象基类的静态getter做精准的JSDoc类型标注，既要约束子类必须实现这些成员，又要让依赖它们的方法能正确推断类型。先看看你的代码框架，其实只要微调一下JSDoc的写法就能达到理想效果，我给你整理了完整的实现思路和示例：

首先是你的基类代码，我补充完整并做了细节优化：

class BaseClass {
    /**
     * @abstract
     * @returns {string}
     */
    static get prefix() { throw new Error('必须重写prefix静态getter'); }

    /**
     * @abstract
     * @returns {string}
     */
    static get suffix() { throw new Error('必须重写suffix静态getter'); }

    /**
     * @template {typeof BaseClass} T
     * @this T
     * @returns {`${T['prefix']}_${T['suffix']}`}
     */
    static get fullName() {
        return `${this.prefix}_${this.suffix}`;
    }
}

关键标注解析： #

• 抽象静态getter的约束：用@abstract明确标记这是子类必须实现的成员，配合@returns指定返回类型，再加上运行时的错误抛出，既能给开发者明确的文档提示，又能在子类忘记实现时立刻报错。
• 模板与this绑定：@template {typeof BaseClass} T限定了模板参数T是BaseClass的构造函数类型，确保只有继承自BaseClass的子类能匹配；@this T则告诉类型解析器，这个静态方法的this指向的是子类的构造函数，而非基类本身。
• 模板字符串类型返回值：${T['prefix']}_${T['suffix']}利用JSDoc支持的模板字符串类型，把子类的prefix和suffix静态属性类型直接拼接，实现了精确的返回值类型推断。

子类实现示例： #

class UserClass extends BaseClass {
    /** @returns {string} */
    static get prefix() { return 'USER'; }

    /** @returns {string} */
    static get suffix() { return 'DATA'; }
}

// 此时UserClass.fullName会被精准推断为"USER_DATA"类型
console.log(UserClass.fullName); // 输出 "USER_DATA"

小提醒： #

要确保你的编辑器（比如VS Code）开启了JavaScript的类型检查功能，这样才能实时看到这些JSDoc标注带来的类型提示。如果是纯JS项目，只要在jsconfig.json里配置"checkJs": true就能启用。

内容来源于stack exchange