Typescript tsconfig.json compiler options removeComments(Examples)

This tutorial explains about typescript compiler removeComments options Configurations. You can also check how to generate tsconfig.json file and typescript tsconfig.json.

During the typescript Transpile process, Comments are copied to javascript without any modifications. This tutorials explains whether to include comments or not in Javascript during compilation.

#What are Typescript removeComments Options required?

In Typescript, compilerOptions removeComments is used whether to include the comments in javascript code or not during the Typescript to Javascript transpile process.

When removeComments is set to true, comments are not generated in javascript code.

Example tsconfig.json in typescript projects.

{
  "compilerOptions": {
    "removeComments": true
  }
}

#tsconfig removeComments option example

Let’s write a typescript code with comments,The following code contains comments for

• Simple class with inline and multi-line comments.
• Easy hello world string code.

// Hello World example
console.log("hello world");

/* Employee class contains
 * Name
 * Salary
 * fields
 **/
class Employee {
  name?: string; // string or undefined
  salary?: number; // number or undefined
  // constructor
  constructor(name: string, salary: number) {
    this.name = name;
    this.salary = salary;
  }
}

When the typescript transpiler to javascript with removeComments:false options , default comments are added to generate Javascript code in dist/ folder.

Now, Let’s change compilerOptions removeComments to true as given below

tsconfig.json Set typescript compiler options removeComments: true

{
  "compilerOptions": {
    "removeComments": true
  }
}

Generated Javascript code as given below

The comments were removed from the generated javascript class.

console.log("hello world");
class Employee {
  name;
  salary;
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }
}

#Why Typescript introduced removeComments options?

These options help the developer to configure if developers wants generated comments in javascript or not. There are several pros and cons.

• Minification code: Javascript code size is reduced and minified, which helps code load faster in browsers, Time to load the scripts is improved in web applications in the production system.

• Configuration Preferences: Developers have a preference to ship javascript with comments or not. During Development, Compare typescript and javascript code to debug an issue. when code is pushed to production, comments are not required Can be disabled to generate concise js code, So it provides flexibility in choosing to disable or enable code comments.

• Helful for tools development: You can choose to include comments for tools developed for the developer, whereas the application developer can choose to skip the comment generation process.

• Performances and reability: It improves Less code in size and compact in Production, not good for debugging and readability

#Conclusion

use compiler options in tsconfig.json,

• If you want to write comments to Javascript, use removeComments: true
• use removeComments:falseto strip comments in a generated output javascript file

Please be aware that, Removing comments in Generated javascript code reduces code size, However, It is less readable for debugging the code for developers.

Developers have control to generate comments in Production and test environments.

You can use the same setting in Angular and React using typescript projects.