Monday, September 3, 2018

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.

Types

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.

Syntax 

// 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 /* */.

Syntax

/*
* 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';

@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 which accepts HTML string. The above three comments types will not work. These are HTML tags, so HTML comments works.
Syntax
<!-- Html Comments -->
 Here is an example Angular template HTML comments example
@Component({
  selector: 'my-app',
  template: `<div>
  <!-- Dispay msg in Header one -->
    <h1>{{msg}}</h1>
 <!-- Dispay name in Header two -->
    <h2>{{name}}</h2>
    </div>`
  `
})

Related article


EmoticonEmoticon