typescript.txt

Refer: https://rmolinamir.github.io/typescript-cheatsheet/#table-of-contents

1) Primitive & non-Primitive: 
  Primitive: number, string, boolean, symbol, null, or undefined.
  non-Primitive: other than all above e.g Object
  
2) Types:  
  String:
    const myName: string = 'Robert';
    
  Number:
    const myAge: number = 24;
    
  Boolean:
    const bHasHobbies: boolean = true;
    
  Array: 
    const hobbies: string[] = ['Programming', 'Cooking'];
    
  Tuples: Tuple types allow you to express an array where the type of a fixed number of elements is known, but need not be the same
    const address: [string, number] = ["Street", 99];
    
  Any:
    let myCar: any = 'BMW';
    
  Enums:
      enum Color {
        Gray, // 0
        Red, // 1
        Green = 100, // 100
        Blue, // 101
        Yellow = 2 // 2
      }
      const myColor: Color = Color.Green
      console.log(myColor); // Prints: 100
      
  Functions:
      function returnMyName(myName): string {
        return myName;
      }
      Argument types.:
        function multiply(value1: number, value2: number) {
          return value1 * value2;
        }
      Function types.:
        const myMultiply: (val1: number, val2: number) => number;
        
  Objects:
    let userData: { name: string, age: number }
    
  Complex Objects:
    let complex: { data: number[], output: (all: boolean) => number[] }
    
  Optional object properties:
    const right: { name: string, age?: number }
    
  Alias:
    type Complex = { data: number[], output: (all: boolean) => number[] };
    
  Union:
    let myRealRealAge: number | string = 24;
    
  Intersection:
    interface Loggable {
      log(name: string, age: number): void
    }
    interface Person {
      name: string
      age: number
      isStark?: boolean // May be undefined.
    }
    type LoggablePerson = Loggable & Person;
    
  Check:
    let finalValue = 'A string';
    if (typeof finalValue == 'string') {
      console.log('finalValue is a string');
    }
    
  Nullable:
     let canBeNull: null
     
  Never: The never type represents the type of values that never occur. 
    function neverReturns(): never {
      throw new Error('An error!');
    }

3) Type Assertions:
    const someValue: any = "this is a string";
    const strLength: number = (<string>someValue).length;
                        OR
    const strLength: number = (someValue as string).length;

4) ES6:
    Template Literals: 
      const userName = 'Robert';
      const greeting = `Hello I'm ${userName}`;
      
    Arrow Functions: 
      const greet = (name: string = 'Robert') => console.log(`Hello, ${name}`);
     
    Default Parameters:
      const greet = (name: string = 'Robert') => console.log(`Hello, ${name}`);
      
    Spread Operators:
      const numbers: number[] = [-3, 33, 38, 5];
      console.log(Math.min(...numbers));
     
    Array Destructuring:
      const testResults: number[] = [3.89, 2.99, 1.38];
      const [result1, result2, result3] = testResults;
    
    Object Destructuring: 
        const scientist: { firstName: string, experience: number } = { firstName: 'Robert', experience: 9000 };
        const { firstName, experience } = scientist;
     
 5) Classes:
      Accessors: Private, Public and Protected
        class Person {
           private type: string | null = null;
           protected age: number = 23;

           constructor(public name: string, public userName: string, private email: string) {
             this.name = name;
             this.userName = userName;
             this.email = email;
           }

           public printAge = () => {
             console.log(this.age);
             this.setType('Young guy');
           }

           private setType = (type: string) => {
             this.type = type;
             console.log(this.type);
           }
         }

         const person = new Person('Francisco', 'rmolinamir', 'example@email.com');
         person.printAge(); // Prints: 23
         // person.setType('Cool guy'); // Not possible, since setType is a private member of Person.
         
  Class Inheritance:
    class Robert extends Person {
      constructor(userName: string, email: string) {
        super('Robert Molina', userName, email);
        this.age = 25;
        this.printAge()
      }
    }
    
  Getters & Setters :
    class Plant {
      private _species: string = 'Default';
          get species() {
            return this._species;
          }
          set species(value: string) {
            if (value.length > 3) {
              this._species = value;
            } else {
              this._species = 'Default';
            }
          }
          public getSpecies = () => this._species
        }
  
  Static Properties & Methods: 
    class Helpers {
      static PI: number = 3.14;
      static calcCircumference(diameter: number): number {
        return this.PI * diameter;
      }
    }
    
  Abstract Classes:
    abstract class Project {
      projectName: string = 'Default';
      budget: number = 0;
      abstract changeName(name: string): void;
      calcBudget() {
       return this.budget * 2;
      }
    }
    
 Private Constructors & Singletons:
    class OnlyOne {
      private static instance: OnlyOne;
      private constructor(public readonly name: string) {}
      static getInstance() {
        if (!OnlyOne.instance) {
          OnlyOne.instance = new OnlyOne('The Only One');
        }
        return OnlyOne.instance;
      }
    }

6) Modules:
      All the code add in file are enclosed in a module for using in external file we need to export and import
      
    Export: 
        export const PI = 3.14;
        export const calculateCircumference = (diameter: number) => {
          return diameter * PI;
        }
        export interface IAppState {
          counterValue: number;
        }
        
    Default Exports:
        const calculateRectangle = (width: number, length: number) => {
          return width * length;
        }
        export default calculateRectangle;
        
    Import:
      import { PI, calculateCircumference } from './src/circle';
      import calculateRectangle from './src/rectangle'; // default export
      
    Advanced Module Loading: In some cases, you may want to only load a module under some conditions.
      System:
        declare const System: any;

         import { ZipCodeValidator as Zip } from "./ZipCodeValidator";

         if (needZipValidation) {
             System.import("./ZipCodeValidator").then((ZipCodeValidator: typeof Zip) => {
                 var x = new ZipCodeValidator();
                 if (x.isAcceptable("...")) { /* ... */ }
             });
         }
         
7) Namespace:
    Anywhere the module keyword was used when declaring an internal module, the namespace keyword can and should be used instead.
     namespace MyMath {
         export namespace Circle {
           export const PI = 3.14;
           export const calculateCircumference = (diameter: number) => {
             return diameter * PI;
           }
         }
       }
          /// <reference path="./src/circleMath.ts" />
         /// <reference path="./src/rectangleMath.ts" />
         import Circle = MyMath.Circle;
         import calculateRectangle = MyMath.Rectangle.calculateRectangle;
         
8) Manually declaring a third party library:
    Crate file : jquery.d.ts
                 declare var $: any;
                 
9) Interfaces:
    interface SimplePerson {
      firstName: string;
    }
    
    Optional Properties:
      interface SimplePerson {
        firstName: string;
        lastName?: string;
        age?: number;
      }
      
    Index Signatures (Dynamic Property Names):
      interface NamedPerson {
        firstName: string;
        age?: number;
        [propName: string]: any;
      }
      
    Implements Keyword:
      interface NamedPerson {
        firstName: string;
        age?: number;
      }
      class Person implements NamedPerson {
        constructor(public firstName: string, public lastName: string) {}
        greet(lastName: string) {
          console.log(`Hi, I am ${this.firstName} ${lastName}!`);
        }
      }
      
    Extend Keyword:
        class Control {
            private state: any;
        }

        interface SelectableControl extends Control {
            select(): void;
        }

        class Button extends Control implements SelectableControl {
            select() { }
        }

    Implementing an interface to a function:
        interface DoubleValueFunc {
          (number1: number, number2: number): number;
        }

        let myDoubleFunction: DoubleValueFunc;
        myDoubleFunction = (num1: number, num2: number) => {
            return (num1 + num2) * 2;
        }

        console.log(myDoubleFunction(10,50)); // Prints: 120
        
    Omit type when extending an interface:
      Sometimes, we might want to omit certain types from an extended interface. One of the most common reasons is to overwrite a property.
      
      type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
      /**
        * Base interface.
      */
      type InputElementAttributes = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

      interface IInputProps extends IInputState, Omit<InputElementAttributes, 'onChange'> {
        onChange: (value?: value) => void
      }
    
    Type checking for interfaces:
      function isFish(pet: Fish | Bird): pet is Fish {
        return (<Fish>pet).swim !== undefined;
      }
   
10) Generics:
      Built-in Generics:
        const testResults: Array<number> = [1.94, 2.33];
        
        Generic Types:
                function betterEcho<T>(data: T) {
                    return data;
                  }

                 const echoStr: <T>(data: T) => T = betterEcho;
                 console.log(echoStr<string>('Hello world!').toLocaleUpperCase()); // Prints: "HELLO WORLD!"

                 const echoNum: <T>(data: T) => T = betterEcho;
                 console.log(echoNum<number>(312).toString()); // Prints: "312"
                 
        Interfaces:
            interface GenericIdentityFn<T> {
              (arg: T): T;
            }

            function identity<T>(arg: T): T {
              return arg;
            }

            let myIdentity: GenericIdentityFn<number> = identity;
            
       Generic Class:
          class GenericMath<T extends number | string> {
              constructor(public baseValue: T, public multiplyValue: T) {}
              calculate(): number {
                return +this.baseValue * +this.multiplyValue
              }
           }
           const onlyNumbers = new GenericMath<number>(10, 20);
           const onlyStrings = new GenericMath<string>('10', '20');
           const bothTypes = new GenericMath<number | string>(10, '20');
           
11) Decorators: (enhance the functionality)
        A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.
        
        tsconfig.json
        {
            "compilerOptions": {
                "target": "ES5",
                "experimentalDecorators": true
            }
        }           
       
       Class Decorators : 
    
        function logged(constructorFn: Function) {
            console.log(constructorFn); // Will log the class Person constructor.
         }

        @logged
        class Person {
          constructor() {
            console.log('Hi!');
          }
        }
        O/P : 
          ƒ Person()
        
        Factory: 
          function logging(value: boolean) {
            return value ? logged : () => {console.log('not called')}
          }
          
          @logging(true) // If true, it will return the `logged` decorator, if false, it will execute an empty function.
          class Car {
          }
          O/P:
            f Car()
          
          @logging(false) // If true, it will return the `logged` decorator, if false, it will execute an empty function.
          class Car {
          }
          o/p:
            'not called'
            
        Add function in class: 
          function addPrint(constructorFn: Function) {
              constructorFn.prototype.print = function () {
                this.name = "Maruti"
              }
          }
          
          @addPrint
          class Car {
            private name = 'Suzuki
          }
          const c = new Car()
          (<any>c).print();
          o/p: 
            'Suzuki'
            
        Freez object :
          function Frozen(constructor: Function) {
            Object.freeze(constructor);
            Object.freeze(constructor.prototype);
          }
          
          @Frozen
          Class Tree {}
          
          Class Plat extend Tree {} // throws error
     
     Method Decorator:
     
          function ConfirmMsg(message: string) {
            return function(target: Object, key: string | symbol, descriptor: PropertyDescriptor) {
              const original = descriptor.value;
              console.log('-->',target, key);
              descriptor.value = function (...args: any[]) {
                const allow = confirm(message);
                if(allow) {
                  const result = original.apply(this, args);
                  return result;
                } else {
                  return null;
                }
              }
            }
          }

          class Classic {
            private missions: string[] = [];
            @ConfirmMsg('Run')
            addMontag(misson: string) {
              this.missions.push(misson);
              return this.missions;
            } 
          }

          const c = new Classic();
          console.log(c.addMontag('pop'));
                O/P:
                --> {}, addMontag
                ["pop"]

     Property Decorator:
          function AddSymbol(sym: string) {
            return function (target: object, key: string | symbol) {
              let val = target[key];
              const getter = () =>{
                return val;
              }
              const setter = (d) =>{
                val = sym + ': ' + d;
              }

              Object.defineProperty(target, key, {
                get: getter,
                set: setter,
                enumerable: true,
                configurable: true,
              })
            }
          }

          class Bob {
            @AddSymbol('$')
            private bob = 'Bobo';
            constructor() {
              console.log(this.bob);
            }
          }

          const b = new Bob();
          o/p: 
            $: Bobo
            
     Params Decorator:
        function printInfo(target: any, methodName: string, paramIndex: number) {
          console.log('Target: ', target);
          console.log('Method name: ', methodName);
          console.log('Param index: ', paramIndex);
        }

        class Course {
          name: string;

          constructor(name: string) {
            this.name = name;
          }

          // @printInfo behind printAll
          printStudentNumbers(mode: string, @printInfo printAll: boolean) {
            if (printAll) {
              console.log(10000);
            } else {
              console.log(2000);
            }
          }
        }

      o/p:
        Target: {}
        Method name: printStudentNumbers
        Param index: 1
        
        ##########################################################################################################################################
        
        1) Utility type: Record

const ids: Record<number, string> = {
  1: 'a',
  2: 'b',
}; 

2) null colision : ?? 

3) MutationFunction:
 
              export type MutationFunction = (v: number) => number;

              export function arrayMutate(numbers: number[], mutate: MutationFunction): numbers[] {

                             return numbers.map(mutate)

              }

	const myNewMutateFunc: MutationFunction = (v: number) => v * 200;

	console.log( arrayMutate([1,20,30], (v) => v * 10))

 

4) Function overloading:

	interface ICoordinate {
  		x: number;
  		y: number;
	}

	function parseCoordinate(obj: ICoordinate): ICoordinate;
	function parseCoordinate(str: string): ICoordinate;
	function parseCoordinate(x: number, y: number): ICoordinate;
	function parseCoordinate(arg1: unknown, arg2?: unknown): ICoordinate {

	  let coord: ICoordinate = {
	    x: 0,
	    y: 0,
	  };

	  if (typeof arg1 === 'object') {
	    coord = {
	      ...(arg1 as ICoordinate),
	    };
	  } else if (typeof arg1 === 'string') {
	    (arg1 as string).split(',').forEach((str) => {
	      const [key, value] = str.split(':');
	      coord[key as 'x' | 'y'] = parseInt(value, 10);
	    });
	  } else {
	    coord = {
	      x: arg1 as number,
	      y: arg2 as number,
	    };
	  }

	  return coord;

	} 

	console.log(parseCoordinate(10, 20));
	console.log(parseCoordinate({ x: 10, y: 20 }));
	console.log(parseCoordinate('x:10, y:20'));

 

5) Resolve JSON file: for importing json file in ts

            tsconfig:

                           "resolveJsonModule": true


6) Optional callback:
 
              function addWithCallback(x: number, y: number, callback?: () => void) {
                             callback?.();
              }

7) Tuples: Array of values
              function simpleStringState(initial: string): [() => string, (v: string) => void] {
                             let str: string = initial;
                             return [
                                           () => str,
                                           (v: string) => {
                                                          str = v;
                                           }
                             ]
              }

 

              const [strGetter, strSetter] = simpleStringState("hello");
              console.log(strGetter());
              strSetter("Good bye")
              console.log(strGetter());


8) Generics:

              function simpleStringState<T>(initial: T): [() => T, (v: T) => void] {
                             let str: T = initial;
                             return [
                                           () => str,
                                           (v: T) => {
                                                          str = v;
                                           }
                             ]
              }

              const [strGetter, strSetter] = simpleStringState("hello");
              const [strGetter, strSetter] = simpleStringState<string | null>(null);      

9) KeyOf:
              function pluck<DataType, KeyType extends keyof DataType>(items: DataType[], key: KeyType): DataType[KeyType][] {
                             return items.map(item => item[key]);
              }
              const dogs = [
                             {name: "micro", age: 3},
                             {name: "max", age: 5}
              ];
              console.log(pluck(dogs, 'name'))
              console.log(pluck(dogs, 'age'))
              -------------------------------------
              interface BaseEvent {
                time: number;
                user: string;
              }

              interface EventMap {
                addToCart: BaseEvent & { quantity: number , productID: string};
                checkout: BaseEvent;
              }

              function sendEvent<Name extends keyof EventMap>(name: Name, data: EventMap[Name]): void {
                console.log([name, data]);
              }

              sendEvent("addToCart", {productID: 'foo', user: 'baz', quantity: 1, time: 10});
              sendEvent("checkout", {time: 20, user: "boo"}); 

10) Utility types:

 

  a) Partial: makes all properties optional

             

              interfce MyUser {

                             name: string;

                             id: string;

                             email?: string;

              }

              const merge = (user: MyUser, overrideUser: Partial<MyUser>): MyUser => {

                                           return {...user, ...overrideUser}

                             }


  b) Required : makes all properties required

              type RequiredMyUser = Required<MyUser> 

  c) Pick<Type, Keys>: takes only mentioned properties
 
              type JustEmailAndName = Pick<MyUser, "email" | "name">; // {email?: string | undefined; name: string;}
 
  d) Omit: opposite of pick             

              const mapById = (user: MyUser[]): Record<MyUser["id"], Omit<MyUser, "id">> => {

                             return users.reduce((a, v) => {

                                                          const {id, ...others} = v;

                                                          return {

                                                                        ...a,

                                                                        [id]: others

                                                          }

                                           })

              }

                            

  e) Readonly:

              interface Cat {

                             name: string;
                             breed: string;
              }            

              function makeCate(name: string, breed: string): Readonly<Cat> {

                             return {
                                           name,
                                           breed
                             };
              }

              const cat = makeCat("Random", 'fab');
              cat.name = "sdfdsf" // error not possible

              For tuple

              function makeCoordinates(x: number, y: number) : readonly [number, number] {
                             return [x, y];
              }            

             
              use const
              const values = [10,30,50] as const; // you cannot reset the values

  f) Parameters & ReturnType 

              type Name = {

                first: string;

                last: string;

              }


              function addFullName(name: Name): Name & {

                fullName: string;

              } {

                return {

                  ...name,

                  fullName: `${name.first} ${name.last}`

                }

              }

              function permuteRows<T extends (...args:any[])=>void>(iteratorFunc: T, data: Parameters<T>[0][]): ReturnType<T>[] {

                return data.map(iteratorFunc);

              }

              console.log(permuteRows(addFullName, [{first: "jack", last: "hill"}]))

 

  g) ConstructorParameters & InstanceType

              class PersonFullName {

                constructor(public name: Name) {
                }

                get fullName() {

                  return `${this.name.first} ${this.name.last}`

                }

              }

 

              function createObject<T extends new (...args:any[])=>void>(objectType: T, data: ConstructorParameters<T>[0][]): InstanceType<T>[] {
                return data.map((item) => new objectType(item));
              }

              console.log(createObject(PersonFullName,  [{first: "jack", last: "hill"}]).map(obj => obj.fullName))
 

11) Mapped Types:

 

              type MyFlexibleDogInfo = {

                             name: string;

              } & Record<string, string>;

 

                             OR

 

              type MyFlexibleDogInfo = {

                             name: string;

                             [s: string]: string | number;

              }

 

              const dog: MyFlexibleDogInfo = {

                             name: "Abcd",

                             breed: "Xyz",

                             age: 12

              };

 

              interface DogInfo {

                             name: string;

                             age: number;

              }


              type OptionsFlags<Type> = {

                             [Property in keyof Type]: null;

              };

 

              type DogInfoOptions = OptionsFlags<DogInfo>; // {name: null, age: null}

 

              -------------------------------------------------------------------------------------------------

 

              type KeyTypes<T> = {

                             [K in keyof T]-?: K extends string ? string :

                                                            K extends number ? number :

                                                            K extends symbol ? symbol : never

                             }[keyof T];

 

              -------------------------------------------------------------------------------------------------

 

              Important:

 

              Create dynamic typed properties with template literals:

 

              type Listeners<Type> = {

                             [Property in keyof Type as `on${Capitalize<string & Property>Change}`]?: (

                                           newValue: Type[Property]

                             ) => void;          

              } & {

                             [Property in keyof Type as `on${Capitalize<string & Property>Delete}`]?: (

                                           newValue: Type[Property]

                             ) => void;          

              };

             

              function listenToObject<T>(obj: T, listeners: Listeners<T>): void {

                             throw "Needs to be implemented"

              }

 

              const lg: DogInfo = {

                            name: "LG",

                             age: 13

              }

 

              type DogInfoListeners = Listeners<DogInfo>;

 

              listenToObject(lg, {

                             onNameChange: (v: string) => {},

                             onAgeChange: (v: string) => {},

                             onNameDelete: (v: string) => {},

                             onAgeDelete: (v: string) => {},

              })

 

 

12) Abstract

 

              abstract class StreetFighter {

                             move() {}

                             flight() {

                                           console.log(this.attack());

                             }

 

                             abstract attack(): string;

              }

 

              class Ryu extends StreetFighter {

                             attack() {

                                           return "bom";

                             }

              }

 

              const ryu = new Ryu();

              ryu.flight();

 

 

13) Mixins

 

              Create functions from function , but also now create classes from functions

 

              function myLogFunction() {

                return (str: string) => {

                  console.log(str)

                }

              }

 

              const logger = myLogFunction();

 

              logger('Log string');

 

              function createLoggerClass() {

                return class MyLoggerClass {

                  private completelog: string = "";

                  log(str: string) {

                    console.log(str);

                    this.completelog += str + '\n';

                  }

 

                  dumpLog() {

                    return this.completelog;

                  }

                }

              }

 

              const MyLogger = createLoggerClass();

 

              const logger2 = new MyLogger();

              logger2.log("foo");

              logger2.dumpLog();

 

 

              function CreateSimpleMemoryDatabase<T>() {

                return class SimpleMemoryDatabase {

                  private db: Record<string, T> = {};

 

                  set(id: string, value: T) {

                    this.db[id] = value;

                  }

 

                  get(id: string) : T {

                    return this.db[id];

                  }

 

                  getObject(): object {

                    return this.db;

                  }

                }

              }

 

              const StringDatabase = CreateSimpleMemoryDatabase<string>();

 

              const sdb1 = new StringDatabase();

              sdb1.set("a", "foo");

              sdb1.get("a")

 

              type Constructor<T> = new (...args: any[]) => any;

 

              function Dumpable<T extends Constructor<{

                getObject(): object;

              }>>(Base: T) {

                return class Dumpable extends Base {

                  dump() {

                    console.log(this.getObject())

                  }

                }

              }

 

              const DumpableStringDatabase = Dumpable(StringDatabase);

              const sdb2 = new DumpableStringDatabase();

              sdb2.set("jack", "hello jack");

              sdb2.dump();

 

 

18) Condition types:

 

             

interface PokemonResults {

  count: number;

  next?: string;

  previous?: string;

  results: {

    name: string;

    url: string;

  }[];

}

 

type FetchPokemonResult<T> = T extends undefined

  ? Promise<PokemonResults[]>

  : void;

 

function fetchPokemon<T extends undefined | ((data: PokemonResults) => void)>(

  url: string,

  cb?: T

): FetchPokemonResult<T> {

  if (cb) {

    fetch(url)

      .then((r) => r.json())

      .then(cb);

    return undefined as FetchPokemonResult<T>;

  } else {

    return fetch(url).then((resp) => resp.json()) as FetchPokemonResult<T>;

  }

}

 

// fetchPokemon(https://pokeapi.co/api/v2/pokemon?limit=10, (data) => {

//   data.results.forEach(pokemon => console.log(pokemon.name))

// });

 

 

(async function() {

  const data = <PokemonResults>(await fetchPokemon(https://pokeapi.co/api/v2/pokemon?limit=10));

  data.results.forEach(pokemon => console.log(pokemon.name))

})()

------------------------------------------------------------------------------------------

              interface dog {

                name: string;

              }

 

              interface cat {

                age: number;

              }

 

              type animal = dog | cat;

 

              const a: animal = {

                age: 25

              }

 

              type z<T> = T extends dog ? dog & {petname: string} : cat & {jump: number}

 

              const h = a as z<typeof a>;

 

              console.log(h.age);  // h.name will get error