Typescript - Beginner guide to Comments with examples | Angular Comments

Comments Basics

Typescript Comment Types

Comments are a piece of statements in a code that will be ignored during  Typescript compilation process. As every programming language provides comments. Typescript is a superset of javascript so it supports the same syntax as javascript provides. These are useful for code reusable and helps other developers to understand the code better.
It provides extra notes for each piece of code  as like below

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

During typescript transpiling to javas, Comments are copied to javascript without any modifications.


In typescript, THere are three comment types

  1. Single Line Comment
  2. Multi-Line Comment
  3. Documentation Comment

Single line Comment

It is used to give the short description about the line of code. You can include a comment in a separate line or inline.Single Line Comments always starts with // symbol.


// Line one  

Following is an example for Single Line Comment

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

Multi-Line comments 


Multi-line means more than one line of comments is included. This can be denoted by using /* */.


* Line One  
* Line two  
* Line Three  

Here is a Multi-Line Comment example

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

Documentation Comments 

These comments are used when you want to generate documentation for your code using Document Generator API libraries like 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 JSDOc Comments Example for Documentation generator. This contains text as well as tags prefixed with @ symbol. these tags have special meaning to it.

 * 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 }  

Angular Comment Example

 Angular uses typescript as a programming language. All the above three comments will work on Angular 4/5/6 versions.

import { Component } from '@angular/core';  
  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() {  

Angular Template Comments

The angular component has a template attribute which accepts HTML string. The above three comments types will not work. These are HTML tags, so HTML comments works.

<!-- Html Comments -->  

 Here is an example Angular template HTML comments example

  selector: 'my-app',  
  template: `<div>  
  <!-- Dispay msg in Header one -->  
 <!-- Dispay name in Header two -->  

Similar Posts