1:  console.log(`

   2:  --- 1 --- Creating Types from Types  https://www.typescriptlang.org/docs/handbook/2/types-from-types.html 

   3:  `)

   4:   

   5:  //Generics - Types which take parameters

   6:  //Keyof Type Operator - Using the keyof operator to create new types

   7:  //Typeof Type Operator - Using the typeof operator to create new types

   8:  //Indexed Access Types - Using Type['a'] syntax to access a subset of a type

   9:  //Conditional Types - Types which act like if statements in the type system

  10:  //Mapped Types - Creating types by mapping each property in an existing type

  11:  //Template Literal Types - Mapped types which change properties via template literal strings

  12:   

  13:  console.log(`

  14:  --- 1 --- note about Keyof

  15:  `)

  16:   

  17:  //https://www.typescriptlang.org/docs/handbook/2/keyof-types.html

  18:   

  19:  type Point = { x: number; y: number };

  20:  type P = keyof Point;

  21:  //The following type P is the same type as type P = "x" | "y"

  22:   

  23:  type Mapish = { [k: string]: boolean };

  24:  type M = keyof Mapish;

  25:  //M is string | number — this is because JavaScript object keys are always coerced to a string, so obj[0] is always the same as obj["0"]

  26:   

  27:  let k1: M = "1";

  28:  let k2: M = 1

  29:  console.log(k1, k2)

  30:   

  31:  console.log(`

  32:  --- 2 --- js typeOf

  33:  `)

  34:  //https://www.typescriptlang.org/docs/handbook/2/typeof-types.html

  35:   

  36:   

  37:  //JavaScript already has a typeof operator you can use in an expression context, TypeScript adds a typeof operator you can use in a type context 

  38:  let chars = "111"

  39:  let ns: typeof chars = '111'

  40:  console.log(ns)

  41:   

  42:  // simple onplace type declaration

  43:  let P1: () => {

  44:      x: number;

  45:      y: number

  46:  } = () => ({

  47:      x: 5,

  48:      y: 10

  49:  })

  50:   

  51:  // the same declaration with type

  52:  function fn() {

  53:      return { x: 10, y: 3 };

  54:  }

  55:   

  56:  type Pn = typeof fn;

  57:  let P2: Pn = () => ({

  58:      x: 5,

  59:      y: 10

  60:  })

  61:   

  62:  //ReturnType

  63:  type Pm = ReturnType<typeof fn>;

  64:  let P3: Pm = { x: 1, y: 2 }

  65:   

  66:  console.log(P1(), P2(), P3)

  67:   

  68:   

  69:  console.log(`

  70:  --- 3 --- Indexed Access Types

  71:  `)

  72:   

  73:  type Person1 = { age: number; name: string; alive: boolean };

  74:  type Age1 = Person1["age"];

  75:   

  76:  let P4: Age1 = 10

  77:  console.log(P4)

  78:   

  79:  const MyArray1 = [

  80:      { name: "Alice", age: 15 },

  81:      { name: "Bob", age: 23 },

  82:      { name: "Eve", age: 38 },

  83:  ];

  84:   

  85:  type Person2 = typeof MyArray1[number];

  86:   

  87:  type Age2 = typeof MyArray1[number]["age"];

  88:   

  89:  type Age3 = Person2["age"];

  90:   

  91:  let P5: Person2 = { name: "A", age: 1 }

  92:  let P6: Age2 = 1

  93:  let P7: Age3 = 2

  94:   

  95:  console.log(P5, P6, P7)

  96:   

  97:  console.log(`

  98:  --- 4 --- Conditional Types ( SomeType extends OtherType ? TrueType : FalseType; )

  99:  `)

 100:   

 101:  interface IdLabel {

 102:      id: number /* some fields */;

 103:  }

 104:  interface NameLabel {

 105:      name: string /* other fields */;

 106:  }

 107:   

 108:  //overloading function

 109:  function createLabel1(id: number): IdLabel;

 110:  function createLabel1(name: string): NameLabel;

 111:  function createLabel1(nameOrId: string | number): IdLabel | NameLabel;

 112:  function createLabel1(nameOrId: string | number): IdLabel | NameLabel {

 113:      throw "unimplemented";

 114:  }

 115:   

 116:  // the same as below:

 117:  //The extends keyword on an interface allows us to effectively copy members from other named types, and add whatever new members we want

 118:   

 119:  type NameOrId<T extends number | string> = T extends number

 120:      ? IdLabel

 121:      : NameLabel;

 122:   

 123:  function createLabel2<T extends number | string>(idOrName: T): NameOrId<T> {

 124:      throw "unimplemented";

 125:  }

 126:   

 127:  console.log(`

 128:  --- 5 --- Inferring Within Conditional Types

 129:  `)

 130:   

 131:  //https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#inferring-within-conditional-types

 132:  //we used the infer keyword to declaratively introduce a new generic type variable named Item instead of specifying how to retrieve the element type of Type within the true branch.

 133:  //For example, for simple cases, we can extract the return type out from function types:

 134:   

 135:  type GetReturnType<Type> = Type extends (...args: never[]) => infer Return

 136:      ? Return

 137:      : never;

 138:   

 139:  type Nm = GetReturnType<() => number>;

 140:   

 141:  type Str = GetReturnType<(x: string) => string>;

 142:   

 143:  type Bools = GetReturnType<(a: boolean, b: boolean) => boolean[]>;

 144:   

 145:  console.log(`

 146:  --- 6 --- Distributive Conditional Types

 147:  `)

 148:  //https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types

 149:  //When conditional types act on a generic type, they become distributive when given a union type.

 150:  //If we plug a union type into ToArray, then the conditional type will be applied to each member of that union.

 151:   

 152:  type ToArray<Type> = Type extends any ? Type[] : never;

 153:   

 154:  type StrArrOrNumArr = ToArray<string | number>;

 155:   

 156:  console.log(`

 157:  --- 7 --- Mapped Types

 158:  `)

 159:   

 160:   

 161:  //https://www.typescriptlang.org/docs/handbook/2/mapped-types.html

 162:  //When you don’t want to repeat yourself, sometimes a type needs to be based on another type

 163:  //Mapped types build on the syntax for index signatures,

 164:   

 165:  type OnlyBoolsAndPerson = {

 166:      [key: string]: boolean | Person1;

 167:  };

 168:   

 169:  const conforms: OnlyBoolsAndPerson = {

 170:      del: true,

 171:      rodney: false,

 172:  };

 173:   

 174:  //A mapped type is a generic type which uses a union of PropertyKeys (frequently created via a keyof) to iterate through keys to create a type:

 175:   

 176:  type OptionsFlags<T> = {

 177:      [Property in keyof T]: boolean;

 178:  };

 179:   

 180:  type Features = {

 181:      darkMode: () => void;

 182:      newUserProfile: () => void;

 183:  };

 184:   

 185:  type FeatureOptions = OptionsFlags<Features>;

 186:   

 187:  console.log(`

 188:  --- 8 --- Mapping Modifiers, readonly and ?

 189:  `)

 190:   

 191:  // Removes 'readonly' attributes from a type's properties

 192:  type CreateMutable<Type> = {

 193:      -readonly [Property in keyof Type]: Type[Property];

 194:  };

 195:   

 196:  type LockedAccount = {

 197:      readonly id: string;

 198:      readonly name: string;

 199:  };

 200:   

 201:  type UnlockedAccount = CreateMutable<LockedAccount>;

 202:   

 203:  // Removes 'optional' attributes from a type's properties

 204:  type Concrete<Type> = {

 205:      [Property in keyof Type]-?: Type[Property];

 206:  };

 207:   

 208:  type MaybeUser = {

 209:      id: string;

 210:      name?: string;

 211:      age?: number;

 212:  };

 213:   

 214:  type User = Concrete<MaybeUser>;

 215:   

 216:  console.log(`

 217:  --- 9 --- Key Remapping via as

 218:  `)

 219:   

 220:  type MappedTypeWithNewProperties<T> = {

 221:      [Properties in keyof T as P]: T[Properties]

 222:  }

 223:   

 224:  //You can leverage features like template literal types to create new property names from prior ones

 225:  type Getters<Type> = {

 226:      [Property in keyof Type as `get${Capitalize<string & Property>}`]: () => Type[Property]

 227:  };

 228:   

 229:  interface Person {

 230:      name: string;

 231:      age: number;

 232:      location: string;

 233:  }

 234:   

 235:  type LazyPerson = Getters<Person>;

 236:   

 237:   

 238:  //You can map over arbitrary unions, not just unions of string | number | symbol, but unions of any type:

 239:   

 240:  type EventConfig<Events extends { kind: string }> = {

 241:      [E in Events as E["kind"]]: (event: E) => void;

 242:  }

 243:   

 244:  type SquareEvent = { kind: "square", x: number, y: number };

 245:  type CircleEvent = { kind: "circle", radius: number };

 246:   

 247:  type Config = EventConfig<SquareEvent | CircleEvent>

 248:   

 249:   

 250:  console.log(`

 251:  --- 9 --- Template Literal Types

 252:  `)

 253:   

 254:  type World = "world";

 255:   

 256:  type Greeting = `hello ${World}`;

 257:   

 258:  type EmailLocaleIDs = "welcome_email" | "email_heading";

 259:  type FooterLocaleIDs = "footer_title" | "footer_sendoff";

 260:   

 261:  type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`;

 262:   

 263:  type AllLocaleID = `${EmailLocaleIDs | FooterLocaleIDs}_id`;

 264:  type Lang = "en" | "ja" | "pt";

 265:   

 266:  type LocaleMessageIDs = `${Lang}_${AllLocaleID}`;

 267:   

 268:   

 269:  console.log(`

 270:  --- 10 --- Intrinsic String Manipulation Types : Uppercase<StringType>, Lowercase<StringType>, Capitalize<StringType>, Uncapitalize<StringType>

 271:  `)

 272:   

 273:  type Greeting1 = "Hello, world"

 274:  type ShoutyGreeting = Uppercase<Greeting1>

 275:   

 276:  type ASCIICacheKey<Str extends string> = `ID-${Uppercase<Str>}`

 277:  type MainID = ASCIICacheKey<"my_app">

 278:   

 279:  console.log(`

 280:  --- 11 --- Intersection Types

 281:  `)

 282:   

 283:  interface Colorful {

 284:      color: string;

 285:  }

 286:  interface Circle {

 287:      radius: number;

 288:  }

 289:   

 290:  type ColorfulCircle = Colorful & Circle;

 291:   

 292:  function draw(circle: Colorful & Circle) {

 293:      console.log(`Color was ${circle.color}`);

 294:      console.log(`Radius was ${circle.radius}`);

 295:  }

 296:   

 297:  // okay

 298:  //draw({ color: "blue", radius: 42 });

 299:   

 300:  console.log(`

 301:  --- 12 --- type aliases, unlike interfaces, can describe more than just object types, we can also use them to write other kinds of generic helper types.

 302:  `)

 303:   

 304:  type OrNull<T> = T | null;

 305:   

 306:  type OneOrMany<T> = T | T[];

 307:   

 308:  type OneOrManyOrNull1<T> = OrNull<OneOrMany<T>>;

 309:   

 310:  type OneOrManyOrNull2<T> = OneOrMany<T> | null

 311:   

 312:  type OneOrManyOrNullStrings1 = OneOrManyOrNull1<string>;

 313:   

 314:  type OneOrManyOrNullStrings2 = OneOrManyOrNull2<string>;

 315:   

 316:  console.log(`

 317:  --- 13 --- Readonly Array Type and readonly tuple type

 318:  `)

 319:   

 320:  function doStuff(values: ReadonlyArray<string>) {

 321:      // We can read from 'values'...

 322:      const copy = values.slice();

 323:      console.log(`The first value is ${values[0]}`);

 324:   

 325:      // ...but we can't mutate 'values'.

 326:      // values.push("hello!");

 327:  }

 328:   

 329:  const roArray: ReadonlyArray<string> = ["red", "green", "blue"];

 330:   

 331:  function doSomething(pair: readonly [string, number]) {

 332:      // ...

 333:    }

 334:   

 335:  console.log(`

 336:  --- 14 --- 

 337:  `)

 338:   

 339:   

 340:   

 341:  console.log(`

 342:  --- 15 --- Template Literal Types examples

 343:  `)

 344:   

 345:  const person = makeWatchedObject({

 346:      firstName: "Saoirse",

 347:      lastName: "Ronan",

 348:      age: 26,

 349:  });

 350:   

 351:  // makeWatchedObject has added `on` to the anonymous Object

 352:  person.on("firstNameChanged", (newValue) => {

 353:      console.log(`firstName was changed to ${newValue}!`);

 354:  });

 355:   

 356:  type PropEventSource<Type> = {

 357:      on(eventName: `${string & keyof Type}Changed`, callback: (newValue: any) => void): void;

 358:  };

 359:   

 360:  /// Create a "watched object" with an `on` method, so that you can watch for changes to properties.

 361:  declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;

 362:   

 363:  console.log(`

 364:  --- 16 --- Inference with Template Literals

 365:  `)

 366:  //https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html#inference-with-template-literals

 367:   

 368:  type PropEventSource1<Type> = {

 369:      on<Key extends string & keyof Type>

 370:          (eventName: `${Key}Changed`, callback: (newValue: Type[Key]) => void): void;

 371:  };

 372:   

 373:  declare function makeWatchedObject1<Type>(obj: Type): Type & PropEventSource1<Type>;

 374:   

 375:  const person1 = makeWatchedObject1({

 376:      firstName: "Saoirse",

 377:      lastName: "Ronan",

 378:      age: 26

 379:  });

 380:   

 381:  person1.on("firstNameChanged", newName => {

 382:      console.log(`new name is ${newName.toUpperCase()}`);

 383:  });

 384:   

 385:  person1.on("ageChanged", newAge => {

 386:   

 387:      if (newAge < 0) {

 388:          console.warn("warning! negative age");

 389:      }

 390:  })