如何使用代码注释:关于JavaScript与TypeScript

简介: TSDoc是一种标准化TypeScript代码文档注释的规范,使不同工具能无干扰地提取内容。它包括多种标记,如@alpha、@beta等发布阶段标记;@decorator、@deprecated等功能标记;@defaultValue、@eventProperty等描述标记;@example、@experimental等示例与实验性标记;@inheritDoc、@internal等引用与内部标记;@label、@link等链接标记;@override、@sealed等修饰符标记;以及@packageDocumentation、@param、
  1. TSDoc:注释规范
    TSDoc 是一个标准化 TypeScript 代码中使用的文档注释的建议,以便不同的工具可以提取内容而不会被彼此的标记混淆。
    1.1 注释标记简表
    注释
    描述
    @alpha
    指定 API 项的发布阶段为“alpha”。它旨在用于 第三方开发者最终,但尚未发布。该工具可能会从 公开发布。
    @beta
    指定 API 项的发布阶段为“测试版”。它已通过实验性发布给第三方开发人员 为了收集反馈。
    @decorator
    ECMAScript 装饰器有时是一个重要的部分 的 API 协定。但是,今天TypeScript编译器不代表.d.ts输出文件中的装饰器 由 API 使用者使用。该标记提供了一种解决方法,允许将装饰器表达式括起来 在文档评论中。
    @deprecated
    此块标记表示不再支持 API 项,并且可能会在将来的版本中删除。 标记后跟一个描述推荐替代方案的句子。它递归应用 容器的成员。例如,如果一个类被弃用,那么它的所有成员也是如此。
    @defaultValue
    如果未显式分配值,则此块标记用于记录字段或属性的默认值。此标记只能与属于 TypeScript class 或 interface 成员的字段或属性一起使用。
    @eventProperty
    当应用于类或接口属性时,这表示该属性 返回事件处理程序可以附加到的事件对象。事件处理 API 是实现定义的,但通常属性返回类型是一个类 与成员如 addHandler() 和 removeHandler()。文档工具可以 在“Events”标题下显示此类属性,而不是通常的“Properties”标题。
    @example
    指示应作为示例演示如何使用 API 的文档部分。 它可能包括代码示例。
    @experimental
    与 @beta 相同的语义,但由不支持@alpha发布阶段的工具使用。
    @inheritDoc
    此内联标记用于通过从另一个 API 项复制 API 项的文档来自动生成该文档 接口项。内联标记参数包含对其他项的引用,该项可能是不相关的类, 甚至是从单独的 NPM 包导入。
    @internal
    指定不计划由第三方开发人员使用 API 项。该工具可能会修剪 公开发布的声明。在某些实现中,可能允许某些指定的包 使用内部 API 项,例如,因为包是同一产品的组件。
    @label
    内联 {@label} 标记用于标记声明,以便可以使用 TSDoc 声明引用表示法。
    @link
    {@link} 内联标记用于创建指向文档系统中其他页面或通用internet URLs的超链接。特别是,它支持引用API项的表达式。
    @override
    这个修饰符的语义类似于C#或Java中的override关键字。对于成员函数或属性,显式指示此定义重写(即重新定义)从基类继承的定义。基类定义通常会被标记为虚拟的。
    @packageDocumentation
    用于表示描述整个NPM包的文档注释(相对于属于该包的单个API项)。@packageDocumentation 注释位于 .d.ts 文件中,该文件充当包的入口点,它应该是在该文件中遇到的第一个/** 注释。包含 @packageDocumentation标签的注释不应该用于描述单个API项。
    @param
    用于记录函数参数。@param 标记后面是参数名,后面是连字符,再后面是描述。
    @privateRemarks
    启动不面向公众的其他文档内容的一部分。 工具必须从 API 参考网站(生成的
    .d.ts 文件)中省略整个部分, 以及包含内容的任何其他输出。
    @public
    指定 API 项的发布阶段为 “public”。已经正式发布给第三方开发者, 并且其签名保证稳定(例如,遵循语义版本控制规则)。
    @readonly
    此修饰符标记指示API项应该被记录为只读的,即使TypeScript类型系统可能另有指示。例如,假设一个类属性有一个setter函数,它总是抛出一个异常,说明该属性不能赋值;在这种情况下,可以添加 @readonly 修饰符,以便该属性在文档中显示为只读。
    @remarks
    API项目的主要文件被分成一个简短的“总结”部分,随后是一个更详细的“备注”部分。在文档网站上,索引页(例如显示类的成员)将只显示简短的摘要,而详细页(例如描述单个成员)将显示摘要,后跟备注。@remarks 块标记结束摘要部分,并开始文档注释的备注部分。
    @returns
    用于记录函数的返回值。
    @sealed
    这个修饰符的语义类似于C#或Java中的 sealed 关键字。对于类,指示子类不能从类继承。对于成员函数或属性,表示子类不能覆盖(即重定义)成员。
    @see
    用于生成对可能与 当前项目。
    @throws
    用于记录可能由函数或属性引发的异常类型。
    @typeParam
    用于记录通用参数。@typeParam 标记后面是参数名、连字符和说明。TSDoc解析器识别这种语法,并将它提取到DocParamBlock节点中。
    @virtual
    这个修饰符的语义类似于C#或Java中的 virtual 关键字。对于成员函数或属性,显式指示子类可以重写(即重定义)成员。
    1.2 标记用法详解
    本节整理和翻译自 TSDoc 规范官网
    1.2.1 @alpha
    指定 API 项的发布阶段为“alpha”。它旨在用于 第三方开发者最终,但尚未发布。该工具可能会从 公开发布。
    例如:
    /**
    • Represents a book in the catalog.
    • @public
      /
      export class Book {
      /*
    • The title of the book.
    • @alpha
      /
      public get title(): string;
      /*
    • The author of the book.
      /
      public get author(): string;
      };
      在这个例子中,Book.author从包含它的类继承了它的@public名称,而Book.title被标记为“alpha”。
      1.2.2 @beta
      指定 API 项的发布阶段为“测试版”。它已通过实验性发布给第三方开发人员 为了收集反馈。
      例如:
      /*
    • Represents a book in the catalog.
    • @public
      /
      export class Book {
      /*
    • The title of the book.
    • @beta
      /
      public get title(): string;
      /*
    • The author of the book.
      /
      public get author(): string;
      };
      在这个例子中,Book.author从包含它的类继承了它的@public名称,而Book.title被标记为“beta”。
      1.2.3 @decorator
      ECMAScript装饰器 有时是API契约的重要组成部分。然而,今天TypeScript编译器并不表示API消费者使用的. d.ts输出文件中的装饰器。@decorator标签提供了一种变通方法,允许在doc注释中引用decorator表达式。
      例如:
      class Book {
      /*
    • The title of the book.
    • @decorator @jsonSerialized
    • @decorator @jsonFormat(JsonFormats.Url)
      /
      @jsonSerialized
      @jsonFormat(JsonFormats.Url)
      public website: string;
      }
      1.2.4 @deprecated
      此块标记表示不再支持 API 项,并且可能会在将来的版本中删除。 标记后跟一个描述推荐替代方案的句子。它递归应用 容器的成员。例如,如果一个类被弃用,那么它的所有成员也是如此。
      例如:
      /*
    • The base class for controls that can be rendered.
      *
    • @deprecated Use the new {@link Control} base class instead.
      /
      export class VisualControl {
      . . .
      }
      1.2.5 @defaultValue
      如果未显式分配值,则此块标记用于记录字段或属性的默认值。此标记只能与属于 TypeScript class 或 interface 成员的字段或属性一起使用。
      例如:
      enum WarningStyle {
      DialogBox,
      StatusMessage,
      LogOnly
      }
      interface IWarningOptions {
      /*
    • Determines how the warning will be displayed.
      *
    • @remarks
    • See {@link WarningStyle| the WarningStyle enum} for more details.
      *
    • @defaultValue WarningStyle.DialogBox
      /
      warningStyle: WarningStyle;
      /*
    • Whether the warning can interrupt a user's current activity.
    • @defaultValue
    • The default is true unless
    • WarningStyle.StatusMessage was requested.
      /
      cancellable?: boolean;
      /*
    • The warning message
      /
      message: string;
      }
      1.2.6 @eventProperty
      当应用于类或接口属性时,这表示该属性 返回事件处理程序可以附加到的事件对象。事件处理 API 是实现定义的,但通常属性返回类型是一个类 与成员如 addHandler() 和 removeHandler()。文档工具可以 在“Events”标题下显示此类属性,而不是通常的“Properties”标题。
      例如:
      class MyClass {
      /*
      • This event is fired whenever the application navigates to a new page.
      • @eventProperty
        /
        public readonly navigatedEvent: FrameworkEvent;
        }
        1.2.7 @example
        指示应作为示例演示如何使用 API 的文档部分。 它可能包括代码示例。
        例如:
        /*
    • Adds two numbers together.
    • @example
    • Here's a simple example:
    • ```
    • // Prints "2":
    • console.log(add(1,1));
    • ```
    • @example
    • Here's an example with negative numbers:
    • ```
    • // Prints "0":
    • console.log(add(1,-1));
    • ```
      /
      export function add(x: number, y: number): number {
      }
      例如:
      /*
    • Parses a JSON file.
      *
    • @param path - Full path to the file.
    • @returns An object containing the JSON data.
      *
    • @example Parsing a basic JSON file
      *
    • Contents of file.json

    • ```json
    • {
    • "exampleItem": "text"
    • }
    • ```
      *
    • Usage

    • ```ts
    • const result = parseFile("file.json");
    • ```
      *
    • Result

    • ```ts
    • {
    • exampleItem: 'text',
    • }
    • ```
      /
      1.2.8 @experimental
      例如:
      /*
    • Represents a book in the catalog.
    • @public
      /
      export class Book {
      /*
    • The title of the book.
    • @experimental
      /
      public get title(): string;
      /*
    • The author of the book.
      /
      public get author(): string;
      };
      在这个例子中,Book.author从包含它的类继承了它的@public名称,而Book.title被标记为“experimental”。
      1.2.9 @inheritDoc
      这个内联标签用于通过从另一个API项复制来自动生成一个API项的文档。inline tag参数包含对另一个项目的引用,它可能是一个不相关的类,甚至是从一个单独的NPM包导入的。
      注意:声明引用的符号尚未最终确定。
      什么被复制
      @inheritDoc 标记不会复制整个注释体。仅复制以下组件:
      • 摘要部分
      • @remarks块
      • @params块
      • @typeParam块
      • @returns块
      其他标签(如 @defaultValue 或 @example )不会被复制,需要显式包含在 @inheritDoc 标签之后。当指定了@inheritDoc标记时,不能在注释中指定summary部分和 @remarks 部分。
      例如:
      import { Serializer } from 'example-library';
      /*
    • An interface describing a widget.
    • @public
      /
      export interface IWidget {
      /*
    • Draws the widget on the display surface.
    • @param x - the X position of the widget
    • @param y - the Y position of the widget
      /
      public draw(x: number, y: number): void;
      }
      /** @public
      /
      export class Button implements IWidget {
      / {@inheritDoc IWidget.draw} */
      public draw(x: number, y: number): void {
      . . .
      }
      /
    • {@inheritDoc example-library#Serializer.writeFile}
    • @deprecated Use {@link example-library#Serializer.writeFile} instead.
      /
      public save(): void {
      . . .
      }
      }
      1.2.10 @internal
      指定不计划由第三方开发人员使用 API 项。该工具可能会修剪 公开发布的声明。在某些实现中,可能允许某些指定的包 使用内部 API 项,例如,因为包是同一产品的组件。
      例如:
      /*
    • Represents a book in the catalog.
    • @public
      /
      export class Book {
      /*
    • The title of the book.
    • @internal
      /
      public get _title(): string;
      /*
    • The author of the book.
      /
      public get author(): string;
      };
      1.2.11 @label
      内联 {@label} 标记用于标记声明,以便可以使用 TSDoc 声明引用表示法。
      {@label}符号尚未最终确定。
      例如:
      export interface Interface {
      /*
    • Shortest name: {@link InterfaceL1.(:STRING_INDEXER)}
    • Full name: {@link (InterfaceL1:interface).(:STRING_INDEXER)}
      *
    • {@label STRING_INDEXER}
      */

/**

  • Shortest name: {@link InterfaceL1.(:NUMBER_INDEXER)}
  • Full name: {@link (InterfaceL1:interface).(:NUMBER_INDEXER)}
    *
  • {@label NUMBER_INDEXER}
    */

/**

  • Shortest name: {@link InterfaceL1.(:FUNCTOR)}
  • Full name: {@link (InterfaceL1:interface).(:FUNCTOR)}
    *
  • {@label FUNCTOR}
    /
    (source: string, subString: string): boolean;
    /*
  • Shortest name: {@link InterfaceL1.(:CONSTRUCTOR)}
  • Full name: {@link (InterfaceL1:interface).(:CONSTRUCTOR)}
    *
  • {@label CONSTRUCTOR}
    /
    new (hour: number, minute: number);
    }
    1.2.12 @link
    {@link} 内联标记用于创建指向文档系统中其他页面或通用internet URLs的超链接。特别是,它支持引用API项的表达式。
    声明引用的符号尚未最终确定。
    例如:
    /*
    • Let's learn about the {@link} tag.
      *
    • @remarks
      *
    • Links can point to a URL: {@link https://github.com/microsoft/tsdoc}
      *
    • Links can point to an API item: {@link Button}
      *
    • You can optionally include custom link text: {@link Button | the Button class}
      *
    • Suppose the Button class is part of an external package. In that case, we
    • can include the package name when referring to it:
      *
    • {@link my-control-library#Button | the Button class}
      *
    • The package name can include an NPM scope and import path:
      *
    • {@link @microsoft/my-control-library/lib/Button#Button | the Button class}
      *
    • The TSDoc standard calls this notation a "declaration reference". The notation supports
    • references to many different kinds of TypeScript declarations. This notation was originally
    • designed for use in {@link} and {@inheritDoc} tags, but you can also use it in your
    • own custom tags.
      *
    • For example, the Button can be part of a TypeScript namespace:
      *
    • {@link my-control-library#controls.Button | the Button class}
      *
    • We can refer to a member of the class:
      *
    • {@link controls.Button.render | the render() method}
      *
    • If a static and instance member have the same name, we can use a selector to distinguish them:
      *
    • {@link controls.Button.(render:instance) | the render() method}
      *
    • {@link controls.Button.(render:static) | the render() static member}
      *
    • This is also how we refer to the class's constructor:
      *
    • {@link controls.(Button:constructor) | the class constructor}
      *
    • Sometimes a name has special characters that are not a legal TypeScript identifier:
      *
    • {@link restProtocol.IServerResponse."first-name" | the first name property}
      *
    • Here is a fairly elaborate example where the function name is an ECMAScript 6 symbol,
    • and it's an overloaded function that uses a label selector (defined using the {@label}
    • TSDoc tag):
      *
    • {@link my-control-library#Button.([UISymbols.toNumberPrimitive]:OVERLOAD_1)
    • | the toNumberPrimitive() static member}
      *
    • See the TSDoc spec for more details about the "declaration reference" notation.
      /
      1.2.13 @override
      这个修饰符的语义类似于C#或Java中的override关键字。对于成员函数或属性,显式指示此定义重写(即重新定义)从基类继承的定义。基类定义通常会被标记为虚拟的。
      文档工具可以强制一致地应用@virtual、@override和/或@sealed修饰符,但是这不是TSDoc标准所要求的。
      例如:
      class Base {
      /** @virtual
      /
      public render(): void {
      }
      / @sealed */
      public initialize(): void {
      }
      }
      class Child extends Base {
      /
      @override /
      public render(): void;
      }
      1.2.14 @packageDocumentation
      用于表示描述整个NPM包的文档注释(相对于属于该包的单个API项)。@packageDocumentation 注释位于
      .d.ts文件中,该文件充当包的入口点,它应该是在该文件中遇到的第一个 / 注释。包含 @packageDocumentation 标签的注释不应该用于描述单个API项。
      例如:
      // Copyright (c) Example Company. All rights reserved. Licensed under the MIT license.
      /
    • A library for building widgets.
      *
    • @remarks
    • The widget-lib defines the {@link IWidget} interface and {@link Widget} class,
    • which are used to build widgets.
      *
    • @packageDocumentation
      /
      /*
    • Interface implemented by all widgets.
    • @public
      /
      export interface IWidget {
      /*
  • Draws the widget on the screen.
    /
    render(): void;
    }
    1.2.15 @param
    用于记录函数参数。@param 标记后面是参数名,后面是连字符,再后面是描述。
    例如:
    /*
    • Returns the average of two numbers.
      *
    • @remarks
    • This method is part of the {@link core-library#Statistics | Statistics subsystem}.
      *
    • @param x - The first input number
    • @param y - The second input number
    • @returns The arithmetic mean of x and y
      *
    • @beta
      /
      function getAverage(x: number, y: number): number {
      return (x + y) / 2.0;
      }
      1.2.16 @privateRemarks
      启动不面向公众的其他文档内容的一部分。 工具必须从 API 参考网站(生成的
      .d.ts 文件)中省略整个部分, 以及包含内容的任何其他输出。
      例如:
      /**
    • The summary section should be brief. On a documentation web site,
    • it will be shown on a page that lists summaries for many different
    • API items. On a detail page for a single item, the summary will be
    • shown followed by the remarks section (if any).
      *
    • @remarks
      *
    • The main documentation for an API item is separated into a brief
    • "summary" section optionally followed by an @remarks block containing
    • additional details.
      *
    • @privateRemarks
      *
    • The @privateRemarks tag starts a block of additional commentary that is not meant
    • for an external audience. A documentation tool must omit this content from an
    • API reference web site. It should also be omitted when generating a normalized
    • .d.ts file. /
      1.2.17 @public
      指定 API 项的发布阶段为“public”。已经正式发布给第三方开发者, 并且其签名保证稳定(例如,遵循语义版本控制规则)。
      例如:
      /**
    • Represents a book in the catalog.
    • @public
      /
      export class Book {
      /*
  • The title of the book.
  • @internal
    /
    public get _title(): string;
    /*
  • The author of the book.
    /
    public get author(): string;
    };
    1.2.18 @readonly
    此修饰符标记指示 API 项应记录为只读,即使 TypeScript 类型系统可能另有指示。例如,假设一个类属性有一个 setter 函数,该函数始终 引发异常,说明无法分配属性;在这种情况下,@readonly 修饰符 可以添加,以便属性在文档中显示为只读。
    例如:
    export class Book {
    /*
  • Technically property has a setter, but for documentation purposes it should
  • be presented as readonly.
  • @readonly
    /
    public get title(): string {
    return this._title;
    }
    public set title(value: string) {
    throw new Error('This property is read-only!');
    }
    }
    1.2.19 @remarks
    API项目的主要文件被分成一个简短的“总结”部分,随后是一个更详细的“备注”部分。在文档网站上,索引页(例如显示类的成员)将只显示简短的摘要,而详细页(例如描述单个成员)将显示摘要,后跟备注。@remarks 块标记结束摘要部分,并开始文档注释的备注部分。
    例如:
    //代码效果参考:https://www.xx-ph.com/sitemap/post.html
    /*
    • The summary section should be brief. On a documentation web site,
    • it will be shown on a page that lists summaries for many different
    • API items. On a detail page for a single item, the summary will be
    • shown followed by the remarks section (if any).
      *
    • @remarks
      *
    • The main documentation for an API item is separated into a brief
    • "summary" section optionally followed by an @remarks block containing
    • additional details.
      *
    • @privateRemarks
      *
    • The @privateRemarks tag starts a block of additional commentary that is not meant
    • for an external audience. A documentation tool must omit this content from an
    • API reference web site. It should also be omitted when generating a normalized
    • .d.ts file. /
相关文章
|
4天前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript(JS)和HTML代码的分离虽非绝对必要,但通常被推荐
|
7天前
|
移动开发 JavaScript 安全
总有一款适合您分享78个JS相册代码
本文分享了78款JS相册代码,包括3D相册旋转木马、图片悬浮效果、倾斜图片幻灯片切换等特效,适用于各种图片展示场景。无论您需要哪种样式,都能在这里找到满意的解决方案。快来挑选吧!参考链接:[点击这里](https://www.vipwb.com/sitemap.xml)。
22 4
|
8天前
|
JavaScript
分享一款520表白节JS代码
今天给大家分享一款JS表白源码 js会随 随机颜色心形跟随鼠标互动520表白节女神表白利器! 修改的话就搜索:LOVEh 就能找到这个英文了。
6 0
分享一款520表白节JS代码
|
13天前
|
Web App开发 JavaScript 前端开发
JavaScript基础知识-使用Firefox进行代码的调试(Debug)
关于如何使用Firefox浏览器进行JavaScript代码调试的基础知识介绍。
29 0
|
16天前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
40 0
|
16天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
35 0
|
17天前
|
JavaScript 开发者 UED
Vue.js 错误处理与调试:跟上技术潮流,摆脱开发困扰,成为代码大神不是梦!
【8月更文挑战第30天】在 Vue.js 开发中,错误处理与调试至关重要。本文将对比 Vue 的全局错误捕获机制 `Vue.config.errorHandler` 和组件内 `watch` 监听数据变化的方式,并介绍 Vue 开发者工具、控制台打印 (`console.log`) 以及代码断点 (`debugger`) 等调试方法。此外,还将探讨如何通过自定义错误页面提升用户体验。通过这些技巧的对比,帮助开发者灵活选择适合的策略,确保应用稳定性和开发效率。
37 0
|
17天前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
36 0
|
Web App开发 JavaScript 前端开发
《编写可维护的JavaScript》——2.3 使用注释
另一个适合添加注释的好时机是当代码看上去有错误时。在团队开发中,总是会有一些好心的开发者在编辑代码时发现他人的代码错误,就立即将它修复。有时这段代码并不是错误的源头,所以“修复”这个错误往往会制造其他错误,因此本次修改应当是可追踪的。
1235 0