Learning the basics of Typescript and Javascript

typescript-learning.js

console.log("Hello World");

let id: number = 3.14;
let num_name: string = "Pi";
let isRational: boolean = true;
let ch: any = 'c'
let n = undefined
let n2 = null
console.log(typeof n)

let nums: number[] = [1, 2, 3, 4, 5]
let arr: any[] = [1, 3.14, true, 'c']

// ********** Tuple **********
let numerDetails: [number, string, boolean] = [id, num_name, isRational]
// ********** Tuple Array **********
let employees: [number, string][]

employees = [
    [1, "John"],
    [2, "Mary"],
    [3, "Mark"],
    [4, "Julie"]
]

// ********** Union **********
let pid: string | number
pid = 22
pid = '22'

// ********** Enum **********
enum Arrows {
    Up = 'Up',
    Down = 'Down',
    Left = 'Left',
    Right = 'Right',
}

console.log("Arrow key: ", Arrows.Up)
console.log()

// ********** Objects **********
const userJS = {
    id: 1,
    name: "John"
}

const userTS: {
    id: number,
    name: string
} = {
    id: 1,
    name: "John"
}

// Better way to create objects
type User = {
    id: number,
    name: string
}

const user1: User = {
    id: 2,
    name: "Mary"
}

// ********** Type Assertion **********
let cid: any = 1
// let customerId = <number>cid
let customerId = cid as number

// ********** Functions **********

// Javascript version of a function:
// function squareNumJS(x) {
//     return x * x
// }
// console.log(squareNum(5))

function squareNum(x: number): number {
    return x * x
}

console.log(squareNum(3))
console.log()

// ********** Void Functions **********
function log(errMsg: string | number): void {
    console.log(errMsg)
}

console.log(log("Arrey bhai bhai bhai!"))
log("Arrey bhai bhai bhai 2!")
console.log()

// ********** Interfaces **********
interface UserInterface {
    id: number
    name: string
    age?: number // ? symbol makes this an optional property of the object.
    readonly uid?: number // readonly makes it a readonly property.
}

const user2: UserInterface = {
    id: 3,
    name: "Mark"
}

// Types can be Unions or Primitives, but Interfaces cannot
type Point = number | string
const p1: Point = 1

// ********** Interfaces with Functions **********
interface MathFunc {
    (x: number, y: number): number
}

const add: MathFunc = (x: number, y: number): number => x + y
const sub: MathFunc = (x: number, y: number): number => x - y
const mul: MathFunc = (x: number, y: number): number => x * y
const div: MathFunc = (x: number, y: number): number => x / y

let x: number = 10
let y: number = 5
console.log("Calculate: ")
console.log(add(x, y))
console.log(sub(x, y))
console.log(mul(x, y))
console.log(div(x, y))
console.log()

// ******************************
// Classes
// ******************************
class Person {
    id: number      // public
    name: string    // public

    constructor(id: number, name: string) {
        this.id = id
        this.name = name
    }
}

const john = new Person(1, "John")
const mary = new Person(2, "Mary")
const mark = new Person(3, "Mark")
const julie = new Person(4, "Julie")
console.log(john)

class Employee {
    private id: number      // private
    protected dept: string  // protected
    name: string    // public

    constructor(id: number, dept: string, name: string) {
        this.id = id
        this.dept = dept
        this.name = name
    }

    register() {
        return `${this.name} is now registered.`
    }
}
const emp1 = new Employee(1, "Sales", "John")
console.log(emp1)
console.log(emp1.register())

console.log()

// ******************************
//    Classes with Interfaces 
// ******************************
interface PersonInterface {
    id: number
    name: string
    register(): string
}

class PersonI implements PersonInterface {
    id: number      // public
    name: string    // public

    constructor(id: number, name: string) {
        this.id = id
        this.name = name
    }

    register() {
        return `${this.name} is now registered.`
    }
}
const p2 = new PersonI(1, "Julie")
console.log(p2)

console.log()

// ******************************
//      Deriving classes
// ******************************
class EmployeeE extends PersonI {
    position: string

    constructor(id: number, name: string, position: string) {
        super(id, name)
        this.position = position
    }
}
const emp2 = new EmployeeE(4, "Stacy", "Developer")
console.log(emp2)
console.log(emp2.register())
console.log()

// ******************************
//          Generics
// ******************************
function getArray(items: any[]): any[] {
    return new Array().concat(items)
}
function createArray<T>(items: T[]): T[] {
    return new Array().concat(items)
}

let numArray = getArray([1, 2, 3, 4])
let strArray = getArray(["John", "Mary", "Mark", "Julie"])
console.log(strArray)
numArray.push("Hello") // doesn't throw error because we are using any.

let numArray2 = createArray<number>([1, 2, 3, 4])
console.log(numArray2)
// try {
//     numArray2.push("Hello") // throws error because we have defined numArray2 to have type number[]
// }
// catch {console.log(Error)}
console.log()

// ******************************
//      String manipulation
// ******************************

//      String concatenation
const s = "Hello " + emp2.name + ", your employee id is: " + emp2.id
console.log(s)
let tags: string = "tech, computers, code, blockchain, defi"
console.log(tags.split(", "))
console.log()

// ******************************
//            Arrays
// ******************************
const values: number[] = new Array(1, 2, 3, 4, 5)
console.log(values)
values.push(6)
values.unshift(0)
console.log(values)
values.pop()
console.log("Is 6 in array after pop? " + Array.isArray(6))
console.log()

// ******************************
//            Loops
// ******************************
// For
for(let i:number = 0; i < 5; i++) {
    console.log(`For loop number: ${i}`)
}
console.log()
// While
let i: number = 0;
while(i < 5) {
    console.log(`While loop number: ${i}`);
    i++;
}
console.log()
// ForEach
employees.forEach(function(employee) {
    console.log(employee[1])
})
// ForEach Filtering
let people: Person[] = [john, mary, mark, julie]
const person: Person[] = people.filter(function(person: Person) {
    return person ? person.name == "Mark": undefined
})
console.log(person)
console.log()

// ******************************
//          Conditionals
// ******************************
// If-Else
const len: number = 10
if(len === 5) {
    console.log('length is 5');
} else if(len > 20) {
    console.log('length is greater than 20');
} else if(len < 10) {
    console.log('length is less than 10');
} else {
    console.log("I guess my conditions don't cover all cases");
}
console.log()
// Ternary operator
const colorCode: number = 2
const color: string = colorCode == 1 ? "red" : "blue";
// Switch case
switch(color) {
    case "red":
        console.log("color is red")
        break;
    case "blue":
        console.log("color is blue")
        break;
    default:
        console.log("color is neither red nor blue")
        break;
}

console.log()


/*

Output:

Hello World
undefined
Arrow key:  Up

9

Arrey bhai bhai bhai!
undefined
Arrey bhai bhai bhai 2!

Calculate: 
15
5
50
2

Person { id: 1, name: 'John' }
Employee { id: 1, dept: 'Sales', name: 'John' }
John is now registered.

PersonI { id: 1, name: 'Julie' }

EmployeeE { id: 4, name: 'Stacy', position: 'Developer' }
Stacy is now registered.

[ 'John', 'Mary', 'Mark', 'Julie' ]
[ 1, 2, 3, 4 ]

Hello Stacy, your employee id is: 4
[ 'tech', 'computers', 'code', 'blockchain', 'defi' ]

[ 1, 2, 3, 4, 5 ]
[
  0, 1, 2, 3,
  4, 5, 6
]
Is 6 in array after pop? false

For loop number: 0
For loop number: 1
For loop number: 2
For loop number: 3
For loop number: 4

While loop number: 0
While loop number: 1
While loop number: 2
While loop number: 3
While loop number: 4

John
Mary
Mark
Julie
[ Person { id: 3, name: 'Mark' } ]

I guess my conditions don't cover all cases

color is blue

*/