Different ways to write a comment in Typescript| Angular Component Comment example
- Admin
- Sep 20, 2023
- Typescript
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
- Single(Inline) Line Comment
- Multi-Line Comment
- 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;
}
Typescript comment link example
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.