Typescript Basics.txt

Typescript Basics


TS is superset of JS. It is transcompiled into JS at build/runtime so that all of the type safety syntax is removed

Compiling .ts files
------------------------
To transpile a .ts file to a .js file we have to use the typescript compiler

tsc index.ts // if there are no errors this creates a new file in the folder called index.js


Variable Declaration
--------------------------

var x:number = 10; // declares the type number for the variable

var x:number = 10;

var fname:string = "Erin"
var lname:string = "Wooden"

var isTrue:boolean = false

var product:any = {
    name: "Call of Duty",
    type: "Video Game",
    Manufacturer: "Treyarch"
}

var array1:Array<string> = ["Low", "Erin", "Low Jr", "Joe"]
var array2:Array<number> = [2, 5, 10]
var array3:Array<any> = [2,5,10,true,"Bob"]

Types
  number
  string
  boolean
  any
  enum


Function Declaration
--------------------------

// declares a function that takes two variables as type number and returns a value of type number

function add(num1: number, num2: number):number {
	return num1 + num2
}



Class Declaration
-----------------------

class Student {
   constructor(id: number, name: string) {
   }
}




Type Aliases
—————————
-  a name for any type
- a type cannot be re-opened to add new properties like an interface which is always extendable — IMPORTANT

type IProduct = { 
    id: number;
    name: string;
    description: string;
    price: number;
}



Interface Declaration
-----------------------
- another way to name an object type
- define a "contract" that our objects will follow. 
- this happens solely at compile time; once the code is compiled the concept of interfaces is gone.

interface IProduct {
    id: number;
    name: string;
    description: string;
    price: number;
}

// create an instance of IProduct
var product:IProduct = {
    id: 1,
    name: "Call of Duty",
    description: "The latest COD game",
    price: 59.99
}


Generic Objects
———————

interface Row<T> {
  label: string;
  value: T;
  disabled: boolean;
}


Generic Functions
————————


const createRow = <T,>(label: string, value: T, disabled = false) => ({
  // do stuff
});









Control Flow
-----------------

Selection - Conditional Execution
  if-else
  switch
  
Iterative - Execute Many Times
  for
  while
 
Transfer - Transfer Execution From One Part To Another
  break
  continue