Typescript Cheat Sheet for Beginners

What is TypeScript ??

In one line ☝ JavaScript which is scalable === TypeScript

TypeScripts's Type system helps you during the developement (i.e before the codes get compile.) Browsers dont have TS type support.

To compile the TS file

run tsc app.ts in the terminal. If we don't wanna run this command frequently we can run a tsc --init this will create a tscconfig.json file and after that we can compile using tsc command only.

If we also dint want to run the tsc command after the tsc --init command .. We can also use tsc -w or tsc --watch command and it will auto compile the file.

"noEmitOnError": true , in the tsconfig.json file will stop creating files during the compiling if there is any error in the TS

Tips

Basics

function (num: number , str: string , bool: boolean){  //this is how we define number sttring and Boolean
  console.log(num , str , bool);
}


let anyNumber: number = 1 ;  // this is not a good practise

let anyNumber: number;  // this is recommended
anyNumber = 1;

// ALSO

// const is in nature not re-assignable so

const newNum = 9 ; // here newNum is a type of number that is 9

Objects

const owner: {
  name: string; // Key_type pair instead of key_value pair
  age: number; // We can do this but its recommended not to do this
} = {
  name: "Shikhar",
  age: 23,
};

// Let TS do the inference on its own ONLY do inference when the TS is not infering as you want it to be

const owner = {
  name: "Shikhar",
  age: 23,
};

Arrays

const owner = {
  name: "Shikhar",
  age: 23,
  hobbies: ["playing", "biking", "kiting"], //Ts inference will automatically knows its a string[]
};

let activities: string[];
activities = ["abc", "def", "ghi"]; //we can include no number/object/bool in this

// we can also have arrays of object
/*


*/

Tuples

Arrays with a fixed length and having exact types can be called as tuples

const owner: {
  name: string;
  age: number;
  roles: [number, string]; // called tuples (array with fixed length and type orderwise)
} = {
  name: "Shikhar",
  age: 23,
  roles: [69, "vns"],
};

// Only exception in this is that owner.roles.push("newplace") will work (.push method will work)

Enums

To create human readable identifiers we use enums The convention of using enum values all-uppercase but it is not a "mustdo"


enums Role {  //naming start with capital letter
  ADMIN ,
  ATTENDEE,     //here value of ADMIN is 0 , ATTENDEE is 1 and soo on
  AUTHOR
}

// enums Role {  //we can also give enums our own value that we like
//   ADMIN = 2,
//   ATTENDEE,    //Here ADMIN = 2 therefore ATTENDEE = 3 , AUTHOR = 4
//   AUTHOR
// }

// enums Role {  //or we can give all enums its own value
//   ADMIN  = 0,
//   ATTENDEE = "abcd",
//   AUTHOR = true
// }

const owner = {
  name: "Shikhar",
  age: 23,
  role : Role.ADMIN
};

console.log(owner.role) // this will be 0

ANY

Try to avoid using this . Any takes away all the TS features that it provides.

Union Types

Suppose when we want to work with more than 1 type in the function or anywhere else we will use union type

function combine(val: string | number, val2: string | number) {
  // suppose here we want to work with strings and numbers too
  let result;
  if (typeof val === "number" && typeof val2 === "number") {
    return (result = val + val2);
  } else {
    return (result = val.toString() + val2.toString());
  }

  return result;
}

Type Alias

To create a custom type of our own we use the type alias


type NumStr = string | number ; // here we have create a own custom type alias

type OwProp = {            // a custom type
  name: string;
  age: number;
  roles: [number, string];
}

const owner : OwProp = {
  name : "abcd"
  age : 23,
  role : [123 , "xyz"]
}

function combine(val: NumStr , val2: NumStr) {

  let result;
  if (typeof val === "number" && typeof val2 === "number") {
    return (result = val + val2);
  } else {
    return (result = val.toString() + val2.toString());
  }

  return result;
}

Return Function Types

There are two categories of types that can bve returned by the function . The core typeslike Number , String , Boolean and other is :void or :never type .

Ts automatically infers the suggested type after writing the function but we can also explictly ask the function that what it should return

A function with :never will never return anything .

Function as a Type

We can also assign variable a function type

function add(a: number, b: number): number {
  return a + b;
}

// There will be cases when we want a variable to be assign a function

//let combine ; //here combine is :any which is useless
// we want combine to work as add function , we can do that like this

let combine: (x: number, y: number) => number;
// Combine should be any function which takes 2 parameter (that should be number) and
// should return a number

combine = add;

console.log(combine(7, 8));

// we can also use the same pattern {  callbackFunction: (x: number) => void   } to pass
// a function as a callbackFunction (Function that are passed as a arguments)

There is also a : unknown type . It is bit more restrictive than the :any type. We have to do the type-checking in a if(typeof val === "string"){ // do-something} to procede with this

Interface

Interface are like types the key difference between both of them is the familiarity (extends) and declaration merging with OOP of interface is more .

Interfaces can only define objects i.e we CANT use union types in interfaces.

In Interfaces we can extend the properties by implementing it in a another class


interface Greetable {
  name: string;
  greet(n: string): void;
}

// interface Greetable {
         //we can also have a read-only feature if we want a property not to change in future
//   readonly name: string;
//   greet(n: string): void;
// }

class Person implements Greetable {
  // this class should have the the properties of name and greet and it can also have other props of its own
  name : string ,
  age  = 30;     //other special props of Person class

  greet (phrase : string){
    console.log("Hi my name is" + this.name)
  }

  //name and greet are compulsory because they are inherited
}


// INTERFACES CAN ALSO BE EXTENDS

interface Named {
 readonly name: string;

}

interface Greetable2 extends Named {
  greet(n: string): void;
}

// Interface can also be used as a function

interface Add {
  (a: number , b: number) : number
}

// in types we usually do like a arrow

type addFunc = (a: number , b: number) => number;

When we want object to share exact features of it in other classes then we use interfaces .

When you have a preference of choosing the structure of Union , Primitives , Shorthand Functions , Advanced Type Functions use Type instead of interface

Advance TS Features

Intersection types

// When we have two object types that are intersecting its features like this

type Person = {
  address: string;
  name: string;
};

type Employee = {
  name: string;
  job: string[];
};

type ElevatedEmployee = Person & Employee;
// then ElevatedEmployee will have combined feature (properties) of person and employee because {};

//BUT

type Combined = string | number;
type OtherCombine = number | boolean;

type Universal = Combined & OtherCombined; // this will have intersecting feature of number
// Because the number is the type that is common in Combined and OtherCombined

Type Guard

Type-Guard is just use to check where we are getting our desired type or not

//1

if (typeof val === "string") {
  // could be string or number or boolean
}

//2

if ("ObjectPropName" in aObject) {
  // do something if the objectPropName property is present in the "aObject"
}

//3

if (parameterIs instanceof aClassObj) {
  //proceede with the code
}

// We can TypeCast a element using a `as` syntax

ex: (document.querySelector("p") as HTMLInputElement).value = "Hello Bhai";

Generic Types

When the value is unknown and you are expecting a particular type to take out of the info recieved then you can use generic types

Mainly used on Arrays and Promise

const result: Array<string> = [];
const result2: Array<string | number> = [];

const somePromise: Promise<string> = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("I am a String");
    // if the resolve here will be number or boolean then we will get err while using .then method
  }, 2000);
});

somePromise.then((data) => {
  data.split(" "); // this will give err if resolve is not the desired type
});

And that's all for this blog .

More advance topics will be covered in the future blogs.

Shikhar's Blog