Different ways to write a comment in Typescript| Angular Component Comment example

Different ways to write a comment in Typescript| Angular Component Comment example

Typescripts comments: Learn Inline single, multiline, and documentation comments

Typescripts comments

Comments are code statements that are ignored by Typescript during the compilation process. Every programming language provides comments to describe the line of code or functions.

Typescript is a superset of javascript, so it supports the same syntax as javascript provides.

Comments allow developers to easily modify the code, make it reusable, and assist other developers in better understanding the code.

It provides extra notes for each piece of code as below

  • Author
  • Date created and modified
  • Version
  • Description of method/class/ and any code that needs to give more information.
  • Documentation Meta tags

During the typescript compilation process, Comments are copied to javascript without any modifications.

In typescript, There are three types of comments

  1. Single(Inline) Line Comment
  2. Multi-Line Comment
  3. Documentation Comment

Single and Multi-Line comments use the same syntax similar to Javascript.

Single line Comment in Typescript

It is used to give a short description of the line of code. You can include a comment in a separate line or inline.

Single Line Comments always starts with // symbol.

Syntax:

// Line one

Following is an example of Single Line Comment.

// MyClass implementation
class MyClass {
    msg: string;
    constructor(message: string) { // Constructor
        this.msg = message;
    }

Multi-Line comments in Typescript

Multi-line means more than one line of comments is included.

This can be denoted by using /* */.

Here is a Syntax

/*
 * Line One
 * Line two
 * Line Three
 */

Here is a Multi-Line Comment example

/*
 * Class Declaraiton for Emp class
 */
class Emp {
  name: string;
  /*
   * Constructor for Emp class
   */
  constructor(name: string) {
    this.name = name;
  }
}

Documentation Comments in Typescript

Documentation comments are used when you want to generate documentation for your code using Document Generator API libraries such as JSDoc, ESDoc and TypeDoc.

These comments are similar to Multi-Line Comments and the Only difference is extra asterisk symbol which contains meta tags as well as HTML tags. Syntax

/**
 * Documentation comments
 */

Here is an example for the JSDOc Comments Example for the Documentation generator.

This contains text as well as tags prefixed with @ symbol. these tags have special meanings to them.

/**
 * This is a hello world function.
 * @author Kiran Babu
 * @version 1.0.0
 * @param {string} value - A string param
 * @return {string} Return a string
 * @example
 * welcome('Welcome')
 */
function welcome(msg): string {
  return msg;
}

It supports in typescript comments links using@see a tag to generate an anchor to point to another class or method symbol

/**
 * This is a hello world function.
 * @see {@link newclass.method}
 */
/**
 * This is a hello world function.
 * @author Kiran Babu
 * @version 1.0.0
 * @param {string} value - A string param
 * @return {string} Return a string
 * @see  {@link employee.getMessage}
 */
function welcome(msg): string {
  return msg;
}

and getMessage is declared in another as follows

/**
 * This is a hello world function.
 * @author Kiran Babu
 * @version 1.0.0
 * @return {string} Return a string
 **/
export class Employee{
  function getMessage(){
  }
}

How to write a comment in Angular?

Angular uses typescript as a programming language. All type of comments works in Angular 10/11/12 versions.
Comments can be added in Angular components either in Typescript code or HTML template

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
/*
 * Application Component
 */
export class AppComponent {
  count: number = 0;
  // Event Method for incrementing counter value by one
  clickEvent() {
    this.count++;
  }
}

Angular Template Comments

The angular component has a template attribute that accepts HTML strings. The above three comment types will not work. These are HTML tags, so HTML comments work.
Syntax:

<!-- Html Comments -->

Here is an example Angular template HTML comments example

@Component({ selector: 'my-app', template: `
<div>
  <!-- Display msg in Header one -->
  <h1>{{msg}}</h1>
  <!-- Display name in Header two -->
  <h2>{{name}}</h2>
</div>
` ` })

Conclusion

In Conclusion, We learned to write comments in Angular and typescript. You can write single, multiline, and documentation comments in Typescript. Includes declare comments in Angular typescript and template HTML components.