讲师中心 微信公众号
AI工具推荐 视频效率加速

JS注解怎么标注继承关系_ JS类继承关系的注解书写与使用

浅芳姑娘_9064

浅芳姑娘_9064

发布时间:2025-11-16 21:21:26

|

329人浏览过

|

来源于php中文网

原创

使用 @extends 标注类继承关系,如 @extends {Animal},可提升JavaScript代码的可读性和IDE支持,结合 @class 和 @abstract 能更清晰表达类结构,尤其在启用 // @ts-check 时增强类型检查。

js注解怎么标注继承关系_ js类继承关系的注解书写与使用

在JavaScript中,虽然没有像Java那样的正式注解(Annotation)语法,但在使用JSDoc这样的文档工具时,可以通过特定的标签来标注类之间的继承关系,帮助开发者理解代码结构、提升IDE智能提示的准确性。特别是在使用ES6+的class语法时,正确书写JSDoc注解对维护大型项目非常有帮助。

使用 @extends 或 @extends 标注继承关系

在JSDoc中,标注一个类继承自另一个类,应使用 @extends(或等价的 @augments)标签。

语法格式如下:

/** * @extends {父类名称} */

示例:

/** * 动物基类 */ class Animal { constructor(name) { this.name = name; }

speak() {
console.log(${this.name} 发出声音。);
}
}

/**

  • 狗类,继承自动物
  • @extends {Animal}
    */
    class Dog extends Animal {
    constructor(name, breed) {
    super(name);
    this.breed = breed;
    }

bark() {
console.log(${this.name} 汪汪叫!);
}
}

通过 @extends {Animal},IDE(如VS Code、WebStorm)就能识别 Dog 类拥有 Animal 的所有方法和属性,并提供自动补全和类型检查支持。

结合 @class 和 @abstract 使用更清晰

为了增强文档可读性,可以配合其他JSDoc标签:

Alibabacloud Sdk Client Initialization For Java
Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载
  • @class:显式声明这是一个类。
  • @abstract:表示该类是抽象类,不应被直接实例化。

示例:

/** * 抽象形状类 * @class * @abstract */ class Shape { getArea() { throw new Error('子类必须实现 getArea 方法'); } }

/**

  • 矩形类
  • @extends {Shape}
  • @class
    */
    class Rectangle extends Shape {
    constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
    }

getArea() {
return this.width * this.height;
}
}

在 TypeScript 中的差异

如果你使用的是TypeScript,则不需要依赖JSDoc来表达继承关系,因为继承在类型系统中是显式的。但若你在纯JS文件中使用TypeScript的类型检查(如通过 // @ts-check),正确的JSDoc注解就尤为重要。

例如,在启用 // @ts-check 的JS文件中:

// @ts-check

/* @extends {Animal} / class Cat extends Animal { constructor(name) { super(name); }

// IDE会提示 speak() 已从 Animal 继承 meow() { this.speak(); // 正确调用父类方法 } }

此时,TypeScript会基于JSDoc进行类型推断,确保调用合法。

常见注意事项

  • 大括号不能省略@extends Animal 写法不规范,应写作 @extends {Animal},否则可能无法被解析。
  • 确保父类已定义或导入:如果父类在另一个模块中,建议使用 import() 语法说明类型来源,如 @extends {import('./Animal').Animal}
  • IDE支持程度不同:VS Code对JSDoc支持良好,但某些旧编辑器可能忽略这些注解。

基本上就这些。正确使用 @extends 注解,能显著提升JavaScript项目的可维护性和开发体验,尤其是在没有强类型语言环境的情况下。

热门AI工具

更多
讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

232

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

460

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

311

2026.03.13

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

226

2026.06.03

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

458

2026.06.16

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

265

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

386

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

335

2025.12.24

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

0

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JavaScript OOP调试技巧视频教程
JavaScript OOP调试技巧视频教程

共5课时 | 1.1万人学习

WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn