TypeScript

Javascript wtih extra features like using strict types compared to traditional dynamic types usage JS has which means in TS, data type of a typed variable cannot be changed later, or invalidates any other value except for the declared one.
Supports Modern features of JS like -> functions, let, const, ...
extra features like generic, interface, tuples

Pre-requisite
  • NODE.JS, basic framework
  • VS.CODE, just a coding IDE
npm install -g typescript or node install node-typescript

Browser does not understand TS right of the box, requires compiler. Clean/easy from only development POV. So
tsc FILE.TS
compiles the TS file into JS file of the same filename. if needed another filename,
tsc FILE.ts NEWFILE.js
which will compile TS file to new JS file
tsc FILE.TS -w
-w here will watch the file for changes and recompiles the file if changes are introduced in it

Basic Types

  • string can be enclosed by " or '
  • number includes float, int, long....
  • boolean only true and false
  • Arrays & Objects
    • let name = ['a','b','c']  is a string type array
    • let numbers = [1,2,3,4,5] is a num type array
    • let mixed = ['namaste', 34, 'everyone', true,  2, 'U'] is a mixed type array which can accommodate all types of data i.e.
    • mixed.push('hello'); mixed.push(7); mixed[0]=3 doesn't give errors which cannot be done in name and numbers array.
    • As for the Object
                    let person ={
                        name: Zeee,
                        age: 12,
                        hobby: ['run', 'game']
                    }
    • is the object defined then another Person2 inheriting object (person) should have the same properties like name, age and hobby. If any one property is missing the TS throws error.

Type Casting

  1. Explicit Types: declaring variables at first without giving any values, can be used for functions too or its parameters and return types
    • let characters: string;
    • let age: number;
    • let isTrue: boolean;
    • let arrays: string[ ]=[ ]
      • arrays.push('data'); while initializing array types, should be declared as empty array for errors like undefined, type error.
    • let mixedArray: (string | number)[ ]=[ ]; aka UNION Types
      • mixedArray.push('a');
      • mixedArray.push(12);
      • mixedArray.push(false); will give errors since the array is declared to house only string and numbers
    • Similarly let uuid: string | number; will house uuid of string and number type.
    • let obj:{name: string, age: number} for declaring objects
    • var function: Function(a: string, b: string): string
  2. Dynamic Types: a typical JS way but useful at special circumstances where type is unknown
    • let age: any = 3; variable age can house any type of data/value
    • let mixed: any[ ] = [ ]; mixed can house any size and structure of array
    • Similarly for objects, let obj:{name: any, age: any}

WorkFlow Folder Structure and TsConfig file

  • 📑tsconfig.json
  • 📂public
    • 📂assets
      • 📚images, videos, etc
    • 📁html
      • 📰index.html
    • 📁styles
      • 📗index.css
    • 📁js
      • 📃index.js
  • 📂src
    • 📃ts files
tsconfig.json includes directory specifications as
    "outDir":"./public"
    "srcDir":"./src"
where Folders that deploys into the server and Folder of Source files during development is separated
this tsconfig.json file can be generated using tsc --init command.
and compilation command is tsc -w
to exclude any other file from being compiled  "include":["src"] which explicitly compile files in src folder only.

Funtions

Normal Function Declaration
let func: Function;
func = ( ) = > {
    //actions
    }
Parameterized Functions
const add=(p1;number,p2:number,p3?:number | boolean | string)=>{
    //actions
}
add(7,7)
Here p1, p2 are compulsory params while p3 is optional(?: is optional operator) for this function to work.
But also p3 can have default value as p3:number | boolean | string = 10
🚩? and default cannot be used together and they are declared at as last parameters.

func = (a: number, b: number ):number = > {
    //returns number
    }

func = (a: number, b: number ):void= > {
    //return void or no return statement
    }

Function Signatures

Simply declaring what the function takes and returns like
let func1:(a: number, b: number, c:string)=>number;
and describing as 
func1=(num1: number, num2: number, action: string)=>{
    if(action==="add"){
        return num1+num2;
    }else
    return num1-num2;
}

Type Aliases

    type StringOrNum = string | number
  • assigning aliases for type of a parameters or a variable.
  • type can be object, array or union of data types as above.
  • useful for reducing code duplications.

DOM and Type Casting

const anchor = document.querySelector('a')!;
if(anchor){console.log(anchor?.href)}
here ! and ?. avoids getting null and undefined error.
const form = document.querySelector('.element-class') as HTMLFormElement;
here form is element from DOM with type HTMLFormElement.
there are other elements of DOM like HTMLSelectElement, HTMLInputElement, HTMLRadioElement, etc.

Classes
























Comments

Post a Comment