• The JavaScript Handbook (171 pages) fall 2018
• JavaScript from ES5 to ESNext (84 pages) early 2019
• The React Handbook (220 pages) early 2019
• The Node.js Handbook (189 pages) fall 2018
• The Express.js Handbook (61 pages) fall 2018
• The Vue.js Handbook (122 pages) summer 2018
• The CSS Handbook (173 pages) spring 2019
• The HTML Handbook (87 pages) summer 2019
• The Svelte Handbook (41 pages) fall 2019 

  defaultChecks() {
    const author = { firstName: "Vahid", lastName: "N" };
    console.log(author.lastname);
    author.lastName.trimStart();
    author.firstName.charCodeAt("1");
  }

  > npm install -g tslint typescript

{
    "compilerOptions": {
        "strictNullChecks": true
    }
}

  getSessionItem(key: string): any {
    const data = window.sessionStorage.getItem(key);
    return JSON.parse(data);
  }

[ts]
Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.
const data: string | null

  getSessionItem(key: string): any {
    const data = window.sessionStorage.getItem(key);
    if (data) {
      return JSON.parse(data);
    } else {
      return null;
    }
  }

  noImplicitReturns(a: number) {
    if (a > 10) {
      return a;
    }
    // No return in this branch
  }

{
    "compilerOptions": {
        "noImplicitReturns": true
    }
}

 [ts] Not all code paths return a value.

{
    "compilerOptions": {
        "allowUnreachableCode": false
    }
}

    allowUnreachableCode() {
      if (false) {
        console.log("Unreachable code");
      }
      const a = 1;
      if (a > 0) {
        return 10; // reachable code
      }
      return 0;
      console.log("Unreachable code");
    }

  unusedLocals() {
    const a = "foo"; // Error: 'a' is declared but its value is never read
    return "bar";
  }

  unusedParameters(n: number) {
    n = 0; // Never read
  }

{
    "compilerOptions": {
        "noUnusedLocals": true,
        "noUnusedParameters": true
    }
}

[ts] 'a' is declared but its value is never read.
[ts] 'n' is declared but its value is never read.

  excessPropertyForObjectLiterals() {
    let x: { foo: number };
    x = { foo: 1, baz: 2 };  // Error, excess property 'baz'
    let y: { foo: number, bar?: number };
    y = { foo: 1, baz: 2 };  // Error, excess property 'baz'
  }

{
    "compilerOptions": {
        "suppressExcessPropertyErrors": false
    }
}

[ts]
Type '{ foo: number; baz: number; }' is not assignable to type '{ foo: number; }'.
Object literal may only specify known properties, and 'baz' does not exist in type '{ foo: number; }'.
(property) baz: number

  fallthroughCasesInSwitchStatement(a: number) {
    switch (a) {
      case 0:
        break;

      case 1:
        a += 1;

      case 2:
        a += 2;
        break;
    }
  }

{
    "compilerOptions": {
        "noFallthroughCasesInSwitch": true
    }
}

  indexingObjectsLackingIndexSignatures() {
    const x = { a: 0 };
    x["a"] = 1; // ok
    x["b"] = 1; // Error, type '{ a: number; }' has no index signature.
  }

{
    "compilerOptions": {
        "suppressImplicitAnyIndexErrors": false
    }
}

[ts] Element implicitly has an 'any' type because type '{ a: number; }' has no index signature.

{
    "compilerOptions": {
        "noImplicitAny": true
    }
}

  noImplicitAny(args) { // Error: Parameter 'args' implicitly has an 'any' type.
    console.log(args);
  }

  noImplicitAnyArgs(args: string[]) { // ok with the type information
    console.log(args);
  }

bower install chosen

{
    "name": "asp-net-mvc5x-angular2x",
    "version": "1.0.0",
    "authors": [
        "DNT"
    ],
    "license": "MIT",
    "ignore": [
        "node_modules",
        "bower_components"
    ],
    "dependencies": {
        "chosen": "1.4.2"
    },
    "devDependencies": {
    }
}

<script src="~/node_modules/jquery/dist/jquery.min.js"></script>
<script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

<script src="~/bower_components/chosen/chosen.jquery.min.js"></script>
<link href="~/bower_components/chosen/chosen.min.css" rel="stylesheet" type="text/css" />

declare var jQuery: any;

constructor(private _el: ElementRef) {
}

import { Component, ElementRef, AfterViewInit } from "@angular/core";

declare var jQuery: any; // untyped

@Component({
    templateUrl: "app/using-jquery-addons/using-jquery-addons.component.html"
})
export class UsingJQueryAddonsComponent implements AfterViewInit {

    dropDownItems = ["First", "Second", "Third"];
    selectedValue = "Second";

    constructor(private _el: ElementRef) {
    }

    ngAfterViewInit() {
        jQuery(this._el.nativeElement)
            .find("select")
            .chosen()
            .on("change", (e, args) => {
                this.selectedValue = args.selected;
            });
    }
}

<select>
    <option *ngFor="let item of dropDownItems"
            [value]="item"
            [selected]="item == selectedValue">
        {{item}} option
    </option>
</select>

<h4> {{selectedValue}}</h4>

npm install -g typings
typings install jquery --save --ambient

 /// <reference path="../typings/browser/ambient/jquery/index.d.ts" />

// declare var jQuery: any; // untyped
declare var jQuery: JQueryStatic; // typed

interface JQuery {
   //...
   chosen(options?:any):JQuery;
}
declare module "jquery" {
   export = $;
}

ASP.NET Web API & Angular 10 Clean Architecture 

Angular vs Reactjs 2020 : A Comparative Guide