Linting TypeScript

Text version of the video
http://csharp-video-tutorials.blogspo...

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
   / @aarvikitchen5572  

Slides
http://csharp-video-tutorials.blogspo...

Angular CLI Tutorial
   • What is Angular CLI  

Angular CLI Text articles & Slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

All Dot Net and SQL Server Tutorials in Arabic
   / kudvenkatarabic  

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 generataed 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() {
console.log(message);
var message = 'Hello';
message = message + ' Pragim';
}

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