Linting TypeScript

Suggested Videos
Part 11 - Angular cli generate module | Text | Slides
Part 12 - Angular cli generate directives, pipes and routing guards | Text | Slides
Part 13 - Angular cli generate class, interface and enum | Text | Slides

In this video we will discuss Linting TypeScript Code

Angular has a linting tool that checks our TypeScript code for programmatic and stylistic errors as well as non-adherence to coding standards and conventions. tslint.json is the configuration file for linting. This file contains all the default rules for linting our code.


For the purpose of this demo I have created a brand new Angular project using the following command.
ng new AngularProject

Use the following command to lint the code
ng lint


Since we have just generated a new angular project and all the code in the project is auto-generated, we do not have any linting errors and we get the message - All files pass linting.

We also see the following warning
Warning: The 'no-use-before-declare' rule requires type checking

Basically this warning is saying, if 'no-use-before-declare' rule is enabled we need to use --type-check option with the ng lint command
ng lint --type-check

'no-use-before-declare' rule is enabled out of the box and it disallows usage of variables before their declaration. To understand what this means, place the following sayHello() function in AppComponent class in app.component.ts file.

sayHello() {

  var message = 'Hello';

  message = message + ' Pragim';

  console.log(message);

}

At this point, execute ng lint command again with --type-check option. 

ERROR: C:/AngularProject/src/app/app.component.ts[12, 17]: variable 'message' used before declaration
ERROR: C:/AngularProject/src/app/app.component.ts[13, 5]: Forbidden 'var' keyword, use 'let' or 'const' instead

Lint errors found in the listed files.

Out of the box, "no-var-keyword" rule is also enabled by default. Turn this rule off by setting it's value to false in tslint.json
"no-var-keyword": true

Run ng lint command again with --type-check option

Notice, now we only get 1 linting error
variable 'message' used before declaration

Now modify the code in sayHello() function as shown below.

sayHello() {

  var message = 'Hello';

  message = message + ' Pragim';

  console.log(message);

}

Run ng lint command again with --type-check option. Notice now we do not get any linting errors.

Variables declared with let keyword are not accessible before they are declared. So this rule 'no-use-before-declare' can be safely disabled, if you have 'no-var-keyword' rule enabled. 

When 'no-use-before-declare' rule is disabled and when we run ng lint command without --type-check option, we will no longer get the below warning 
The 'no-use-before-declare' rule requires type checking