1:  console.log(`

   2:  --- 1 --- enum definition

   3:  `)

   4:  enum Color { red, blue };

   5:   

   6:  console.log(`

   7:  --- 2 --- TS types: literal, enum, js bigint, arrow function type, tuple, reference to function, online function reference definition, readonly, three more types see later

   8:  `)

   9:  //An object in JavaScript is a key/value map, type is describe it

  10:  type T = {

  11:      sarr: string[],

  12:      lit: 'a' | 'b',          // literal type

  13:      c: Color,                // enum type

  14:      num: bigint,             // js bigint

  15:      opt?: Date,              // Ts Date is not the same as JS date, question mark is optional property

  16:      arr: (x: Date) => Date,  // arrow function type

  17:      tupl: [number, string],  // tuple, Tuple Types, A tuple type is another sort of Array type that knows exactly how many elements it contains, and exactly which types it contains at specific positions.

  18:      ref: Function,           // reference to function

  19:      f(z: number[]): void,    // ref to function

  20:      readonly body: string,   // readonly type, it won’t change any behavior at runtime

  21:      // tree more type - anonomus signature, callable, newable mention below

  22:  }

  23:   

  24:  console.log(`

  25:  --- 3 --- implements types: private props, constructor

  26:  `)

  27:   

  28:  class A implements T {

  29:      #private: Function;

  30:      constructor(x: Function) { this.#private = x };

  31:      opt?: Date;

  32:      static opt?: Date;

  33:      sarr: string[] = ['1'];

  34:      lit: 'a' | 'b' = "b";

  35:      c!: Color;

  36:      num!: bigint;

  37:      tupl!: [number, string];

  38:      ref!: Function;

  39:      f(z: number[]): void {

  40:          A.opt = new Date(z[0], z[1], z[2])

  41:      };

  42:      body!: '';

  43:      arr!: (x: Date) => Date;

  44:  }

  45:   

  46:  console.log(`

  47:  --- 4 --- create class instance, use TS BigInt, set reference to function

  48:  `)

  49:   

  50:  const B = new A(() => 1)

  51:   

  52:  B.f = (_el: any): number => { return 1 } //_mean variable not need

  53:  B.c = Color.blue

  54:  B.tupl = [1, 'w']

  55:  B.num = BigInt(true)

  56:   

  57:  console.log(`

  58:  --- 5 --- two way object dumping (JSON.stringify + Object.Keys) and replacer function to serialise bigint

  59:  `)

  60:   

  61:  console.log(JSON.stringify(B, (_: any, v: any) => typeof v === 'bigint' ? v.toString() : v))

  62:   

  63:  console.log(`

  64:  --- 6 --- keyof T as type for computed property type definition, Object.keys().ForEach(()=>{})

  65:  `)

  66:   

  67:  Object.keys(B).forEach((v, i) => console.log(i, v, B[v as keyof T]))

  68:   

  69:  console.log(`

  70:  --- 7 --- hack using KeyOf with Index Signatures with type Any

  71:  `)

  72:   

  73:  type hack = { [key: string]: any; } & T

  74:  const H: hack = B

  75:  Object.keys(H).forEach((v, i) => console.log(i, v, H[v]))

  76:   

  77:  console.log(`

  78:  --- 8 --- using Map and String,Join to colect all object keys

  79:  `)

  80:   

  81:  let values = Object.keys(H).map((v, i) => H[v])

  82:  console.log(values.join(";"))

  83:   

  84:  console.log(`

  85:  --- 9 --- Object.values() is part of ES2017

  86:  `)

  87:   

  88:  Object.values(H).forEach((v, i) => console.log(i, Object.keys(H)[i], v))

  89:   

  90:  console.log(`

  91:  --- 10 --- assembly array of object properties with Map abd using TypeOf and KeyOf, Type Capturing when object type is unknown

  92:  `)

  93:   

  94:  type T1 = typeof B;

  95:  const PropArr1: Array<Object> = Object.keys(B).map((v, i) => {

  96:      return { key: v, value: B[v as keyof T1] }

  97:  });

  98:   

  99:  PropArr1.forEach((x, i) => console.log(i, x))

 100:   

 101:  console.log(`

 102:  --- 11 --- indexed property, this type accept any string as key and any number as value

 103:  `)

 104:   

 105:  type T2 = {

 106:      [key: string]: number

 107:  }

 108:  const Obj: T2 = { 'a': 1, 'b': 2 }

 109:  console.log(Obj)

 110:   

 111:  console.log(`

 112:  --- 12 --- define type with anonymous function signature, at common type is the same as interface

 113:  `)

 114:   

 115:  type Func1 = {

 116:      (x: string, y: string): boolean;

 117:  }

 118:   

 119:  interface Func2 {

 120:      (a: number, b: number): bigint;

 121:  }

 122:   

 123:  let search: Func1;

 124:  let mult: Func2;

 125:   

 126:  search = function (src, sub) {

 127:      let result = src.search(sub);

 128:      return result > -1;

 129:  };

 130:   

 131:  mult = (one, two) => BigInt(one * two)

 132:   

 133:  console.log(search('abc', 'a'), mult(20, 30))

 134:   

 135:  console.log(`

 136:  --- 13 --- combine two two types with &, Error object, BigInt literals are not available when targeting lower than ES2020

 137:  `)

 138:   

 139:  //combine two interface

 140:  type Func3 = { m: Error } & T

 141:  let f3: Func3 = {

 142:      m: new Error,

 143:      sarr: ['1'],

 144:      lit: "b",

 145:      c: Color.blue,

 146:      num: 1n,             //BigInt literals are not available when targeting lower than ES2020

 147:      tupl: [5, 's'],

 148:      ref: Function,

 149:      f(z: number[]): void {

 150:          A.opt = new Date(z[0], z[1], z[2])

 151:      },

 152:      body: '',

 153:      arr: (x: Date) => new Date(x)

 154:  }

 155:  console.log(f3)

 156:   

 157:  console.log(`

 158:  --- 14 --- callable type mean inteface of arrow function, overloading interface, declare mean external declaration

 159:  `)

 160:   

 161:  // callable type + overloading interface + external declaration

 162:  type callableType = {

 163:      (foo: string, bar?: number, ...others: boolean[]): number;

 164:      (foo: number, bar?: number, ...others: boolean[]): number; //Overloaded interface

 165:  }

 166:   

 167:  const foo1 = (x: string) => 1

 168:  const foo2 = (x: number) => 2

 169:  const bar1 = foo1('');            //bar is inferred as a string

 170:  const bar2 = foo2(1);             //bar is inferred as a number

 171:   

 172:  console.log(bar1, bar2)

 173:   

 174:  console.log(`

 175:  --- 15 --- newable type mean inteface require new instance

 176:  `)

 177:   

 178:  // newable type - require new

 179:  type newableType = {

 180:      new(foo: string, bar?: number, ...others: boolean[]): number;

 181:  }

 182:  declare const fo: newableType; //declare mean that variable exists already, and therefore can be referenced by external code

 183:   

 184:  const bar3 = new Function("")

 185:  console.log(bar3)

 186:   

 187:   

 188:  console.log(`

 189:  --- 16 --- If you want to enforce only certain newables, you can specify the constructor's return type

 190:  `)

 191:   

 192:  interface Newable {

 193:      errorConstructor: new (...args: any) => Error; // <- put here whatever Base Class you want

 194:  }

 195:   

 196:  class NotError { }

 197:  class MyError extends Error { }

 198:  /*

 199:  const errorCreator1: Newable = {

 200:      errorConstructor: NotError, // Type 'typeof NotError' is missing the following properties from type 'typeof AnyError': captureStackTrace, stackTraceLimitts

 201:  };

 202:  */

 203:  const errorCreator2: Newable = {

 204:      errorConstructor: MyError, // OK

 205:  };

 206:   

 207:  console.log(errorCreator2)

 208:   

 209:  console.log(`

 210:  --- 17 --- with infer keyword the compiler ensures that you have declared all type variables explicitly https://stackoverflow.com/questions/60067100/why-is-the-infer-keyword-needed-in-typescript

 211:  `)

 212:   

 213:  type MyT<T> = T extends infer R ? R : never;

 214:  type Tx = MyT<{ b: string }> // T1 is { b: string; }

 215:   

 216:  //infer R shadows type references of an equally-named type declaration R:

 217:   

 218:  type R = { a: number }

 219:  type MyType4<T> = T extends infer R ? R : never;

 220:  type T4 = MyType4<{ b: string }> // { b: string; }

 221:   

 222:   

 223:  console.log(`

 224:  --- 18 --- You can't define a static property on an interface in TypeScript. Because Date is an interface in TypeScript, you can't extend it with a class using the extends keyword, but can provide a MinValue property on the prototype. Static properties are usually placed on the (global) constructor for the object, whereas the "interface" keyword applies to instances of the object.

 225:  `)

 226:   

 227:  class RichDate {

 228:      public static MinValue = new Date();

 229:  }

 230:  interface Date {

 231:      MinValue: Date;

 232:  }

 233:   

 234:  Date.prototype.MinValue = new Date(0);

 235:   

 236:  var x = new Date();

 237:  console.log(x.MinValue);

 238:   

 239:  console.log(`

 240:  --- 19 --- Type Inference, When a type inference is made from several expressions, the types of those expressions are used to calculate a “best common type”

 241:  `)

 242:   

 243:  let var3 = [0, 1, null];

 244:  type T3 = typeof var3

 245:   

 246:  console.log(`

 247:  --- 20 --- Type Aliases. Type Aliases can be used for primitives like string or more complex types such as objects and arrays:

 248:  `)

 249:  type CarYear = number

 250:  type CarType = string

 251:  type CarModel = string

 252:  type Car = {

 253:      year: CarYear,

 254:      type: CarType,

 255:      model: CarModel

 256:  }

 257:  const carYear: CarYear = 2001

 258:  const carType: CarType = "Toyota"

 259:  const carModel: CarModel = "Corolla"

 260:  const car: Car = {

 261:      year: carYear,

 262:      type: carType,

 263:      model: carModel

 264:  };

 265:   

 266:  console.log(`

 267:  --- 21 --- Interfaces are similar to type aliases, except they only apply to object types. Interfaces can extend each other's definition.

 268:  `)

 269:   

 270:  interface Rectangle {

 271:      height: number,

 272:      width: number

 273:  }

 274:   

 275:  const rectangle: Rectangle = {

 276:      height: 20,

 277:      width: 10

 278:  };

 279:   

 280:  console.log(`

 281:  --- 22 --- TypeScript has special types that may not refer to any specific type of data. any/unknown/never/undefined & null https://www.w3schools.com/typescript/typescript_special_types.php

 282:  `)

 283:   

 284:  // 1. any

 285:   

 286:  let v: any = true;

 287:  v = "string";

 288:  Math.round(v);

 289:   

 290:  // 2. unknown is a similar, but safer alternative to any

 291:   

 292:  let w: unknown = 1;

 293:  w = "string"; // no error

 294:  w = {

 295:      runANonExistentMethod: () => {

 296:          console.log("I think therefore I am");

 297:      }

 298:  } as { runANonExistentMethod: () => void }

 299:  // How can we avoid the error for the code commented out below when we don't know the type?

 300:  // w.runANonExistentMethod(); // Error: Object is of type 'unknown'.

 301:  if (typeof w === 'object' && w !== null) {

 302:      (w as { runANonExistentMethod: Function }).runANonExistentMethod();

 303:  }

 304:  // Although we have to cast multiple times we can do a check in the if to secure our type and have a safer casting 

 305:   

 306:  // 3. never effectively throws an error whenever it is defined.

 307:  let uu: never

 308:   

 309:  // 4. undefined and null are types that refer to the JavaScript primitives undefined and null respectively

 310:   

 311:  let u1: undefined = undefined;

 312:  let u2: null = null;

 313:   

 314:  console.log(`

 315:  --- 23 --- async function Promise

 316:  `)

 317:   

 318:  let gt = async function getFavoriteNumber(): Promise<number> {

 319:      return 26;

 320:  }

 321:   

 322:  let tt = typeof gt

 323:   

 324:  console.log(`

 325:  --- 24 --- type assetions 

 326:  `)

 327:   

 328:  const myCanvas1 = document.getElementById("main_canvas") as HTMLCanvasElement;

 329:  const myCanvas2 = <HTMLCanvasElement>document.getElementById("main_canvas");

 330:   

 331:  console.log(`

 332:  --- 25 --- Literal Types, In addition to the general types string and number, we can refer to specific strings and numbers in type positions.

 333:  `)

 334:   

 335:  function compare(a: string, b: string): -1 | 0 | 1 {

 336:      return a === b ? 0 : a > b ? 1 : -1;

 337:  }