(FRONT) FRONT (2022)

( << Back) TypeNarrowing.ts

   1:  //https://www.vb-net.com/TsLecture/Index.htm#Narrowing
   2:  // 1. JS Typeof Guard
   3:  // 2. Truthiness guard (check by IF). These values {0, NaN, "" (the empty string), 0n (the bigint version of zero), null, undefined} - always get False on IF checking. Other get True on IF checking.
   4:  // 3. Equality narrowing. Comparing without transformation to one type (===, !==) or with transformation to one type (==, !=).
   5:  // 4. IN narrowing - check if object of prototype has property
   6:  // 5. InstanceOf narrowing - check prototype chain, and object created with New
   7:  // 6. Type predicates AS - TypeScript will narrow that variable to that specific type if the original type is compatible
   8:  // 7. Discriminated unions - store literal as one of property
   9:  // 8. Using Never type to receive exception if type is wrong
  10:  // 9. Non-null Assertion Operator (Postfix !)
  11:   
  12:  //https://www.typescriptlang.org/docs/handbook/2/narrowing.html#handbook-content
  13:   
  14:  console.log(`
  15:  --- 1 --- JS Typeof Guard.
  16:  `)
  17:   
  18:  //js TypeOf return https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof
  19:  // "string", "number", "bigint", "boolean", "symbol", "undefined", "object", "function",  (typeof null === "object";)
  20:   
  21:  function padLeft(padding: number | string, input: string) {
  22:      if (typeof padding === "number") {
  23:          return " ".repeat(padding) + input;
  24:      }
  25:      return padding + input;
  26:  }
  27:   
  28:  console.log(`
  29:  --- 2 --- Truthiness guard (check by IF). These values {0, NaN, "" (the empty string), 0n (the bigint version of zero), null, undefined} - always get False on IF checking. Other get True on IF checking.
  30:  `)
  31:   
  32:  function multiplyAll(
  33:      values: number[] | undefined,
  34:      factor: number
  35:  ): number[] | undefined {
  36:      if (!values) {
  37:          return values;
  38:      } else {
  39:          return values.map((x) => x * factor);
  40:      }
  41:  }
  42:   
  43:  console.log(`
  44:  --- 3 --- Equality narrowing. Comparing without transformation to one type (===, !==) or with transformation to one type (==, !=).
  45:  `)
  46:   
  47:  function printAll(strs: string | string[] | null) {
  48:      if (strs !== null) {
  49:          if (typeof strs === "object") {
  50:              for (const s of strs) {
  51:                  console.log(s);
  52:              }
  53:          } else if (typeof strs === "string") {
  54:              console.log(strs);
  55:          }
  56:      }
  57:  }
  58:   
  59:  console.log(`
  60:  --- 4 --- IN narrowing - check if object of prototype has property
  61:  `)
  62:   
  63:  type Fish = { swim: () => void };
  64:  type Bird = { fly: () => void };
  65:   
  66:  function move(animal: Fish | Bird) {
  67:      if ("swim" in animal) {
  68:          return animal.swim();
  69:      }
  70:   
  71:      return animal.fly();
  72:  }
  73:   
  74:  console.log(`
  75:  --- 5 --- InstanceOf narrowing - check prototype chain, and object created with New
  76:  `)
  77:   
  78:  function logValue(x: Date | string) {
  79:      if (x instanceof Date) {
  80:          console.log(x.toUTCString());
  81:      } else {
  82:          console.log(x.toUpperCase());
  83:      }
  84:  }
  85:   
  86:  console.log(`
  87:  --- 6 --- Type predicates AS - TypeScript will narrow that variable to that specific type if the original type is compatible
  88:  `)
  89:   
  90:  function isFish(pet: Fish | Bird): pet is Fish {
  91:      return (pet as Fish).swim !== undefined;
  92:  }
  93:   
  94:  console.log(`
  95:  --- 7 --- Discriminated unions - store literal as one of property
  96:  `)
  97:   
  98:  interface Circle {
  99:      kind: "circle";
 100:      radius: number;
 101:  }
 102:   
 103:  interface Square {
 104:      kind: "square";
 105:      sideLength: number;
 106:  }
 107:   
 108:  type Shape2 = Circle | Square;
 109:   
 110:  console.log(`
 111:  --- 8 --- Using Never type to receive exception if type is wrong
 112:  `)
 113:   
 114:  type Shape3 = Circle | Square;
 115:   
 116:  function getArea2(shape: Shape3) {
 117:      switch (shape.kind) {
 118:          case "circle":
 119:              return Math.PI * shape.radius ** 2;
 120:          case "square":
 121:              return shape.sideLength ** 2;
 122:          default:
 123:              const _exhaustiveCheck: never = shape;
 124:              return _exhaustiveCheck;
 125:      }
 126:  }
 127:   
 128:  console.log(`
 129:  --- 9--- non-null assertion (!) to say that radius is definitely present.
 130:  `)
 131:   
 132:  function getArea(shape: Shape) {
 133:      if (shape.kind === "circle") {
 134:          return Math.PI * shape.radius! ** 2;
 135:      }
 136:  }





Comments ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17>  <18>  <19>  <20>  <21>  <22>  <23
Link to this page: http://www.vb-net.com/TypescriptLearningStartPoint/TypeNarrowing.htm
<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <CHAT ME>  <ABOUT ME>  < THANKS ME>