Interview Question Difference between let vs var & const in Type Script (Part 7)

 Advantages of using let over var

We cannot read or write before they are declared , if the variable is declared as let .Whereas it won't give an error when using variables before declaring them using var.

console.log(num1);

let num1:number = 10 ;

console.log(num2);

var num2:number = 10 ;

Output

variables declared with let cannot be re-declared

The TypeScript compiler will give an error when variables with the same name (case sensitive) are declared multiple times in the same block using let.

Whereas it wont give any error when declaring variable with var.

var num:number = 02; // OK
var Num:number = 22;// OK
var NUM:number = 34;// OK
var NuM:number = 444;// OK

let num:number = 52;// Compiler Error: Cannot redeclared block-scoped variable 'num'
let Num:number = 66;// Compiler Error: Cannot redeclared block-scoped variable 'Num'
let NUM:number = 77;// Compiler Error: Cannot redeclared block-scoped variable 'NUM'
let NuM:number = 88;// Compiler Error: Cannot redeclared block-scoped variable 'NuM'

Note:

Variables with the same name and case can be declared in different blocks using let.

const

Variables can be declared using const as well. If declared const it values cannot be changed

const num:number = 100;
num = 200; //Compiler Error: Cannot assign to 'num' because it is a constant or read-only property

Const variables must be declared and initialized in a single statement. Separate declaration and initialization is not supported.

const num:number; //Compiler Error: const declaration must be initialized
num = 100; 

Operators in TypeScript Part 6

 What is operator

Operator is an object in computer programming used to evaluate an value based  on the operands defined

The operators are categorized into various groups

1 Arithmetic Operator

2 Comparison Operator

3 Bit-Wise Operator

4 Logical Operator

5 Assignment Operator

6 Special Operator

 

Arithmetic Operator

+ Addition

- Subtraction

* Multiplication

/ Division

% Modules(Reminder)

++ (Increment)

-- ( Decrement)

2  Comparison Operator

== Is Equal to   (10==20)

=== Identical Equal and of same Type  (10===20)

!= Not Equal to

!== Not Identical

> Greater than

< Less than

3 BitWise Operator

& --Bitwise And

|  Bit Wise Or

^ Bit wise XOR

<< Bit wise Left Shift

 >> Bitwise Right Shift

Logical Operator

&&--> Logical And

||--- > Logical OR

! Logical Not

Assignment Operator

= Assign

+= Add And Assign

- = Substract and Assign

*= Multiply and Assign

/ = Divide and Assign

%= Module and Assign

Special Operators in Type Script

 Ternary Operator ( ? : )

Syntax

let pin: number=4040;

console.log(pin==4040 ? "valid" : "invalid" )

Delete operator

It is used to delete a property from any specified object.

let product : any ={

Name : 'TV',

price : 333

}

delete product.price   //valid

console.log("price= " + product.price);  //undefined

Note: You cannot delete read only properties

delete Math.PI  //Invalid

In operator

It is used to verify whether the given property is available in an object .It returns true if found

Syntax

console.log("price"  in products)  //true  -- if price is found

In is used to verify the properties

OF operator

It is an special operator used to verify the values in an object. It returns boolean true if they the values are in collection.

Ex:

let cities: string[] =["Delhi" , "Hyd" ]

for( var city of cities) {

console.log(city)

}

typeof operator

It is an special operator that is used to identity and return data type of a property in an object.

Example

let product : any= {

    Id:1,

    Name: "TV",

    Isinstock : true

    }

    console.log("Id=" + typeof product.Id  + "\n"  +

     "Name=" + typeof product.Name + "\n" +

     "Isinstock=" + typeof product.Isinstock);

Output:

Type Script part 5 Date type

Date is a non primitive value stored in memory heap by using date constructor

The data type in typescript to store date value is defined with  "any" type

The memory for date value is allocated by using dynamic memory allocation operator "new" and date constructor.

Type script uses following date functions

getHours()--> returns the hour number in 24 hour format

getMinutes()--> return the minute number.

getSecond()-->return the second number.

getDay()--> return the week day number.

Example Sunday=0

getDate()---Returns the date number

getMonth()-->Returns the month number

getYear()-->Returns the year number as per y2k

getFullYear()--> Returns full year number

toLocaleDateString()-->Returns short date format

toLocaleTimeString()-->Returns short time format

Example

let mfd:any=new Date();

console.log(mfd.getDate())

console.log(mfd.getMonth())

console.log(mfd.getYear())

console.log(mfd.getFullYear())

console.log(mfd.getHours())

console.log(mfd.getMinutes())

console.log(mfd.getSeconds())

console.log(mfd.getDay())

Output

How to Fix tsc is not recognized as an internal or external in Visual Studio Code

 To Fix , this first we need to Install Typescript 

 install typescript globally by running 

  npm install -g typescript

To check , if that typescript is installed or not. we need to use the below command

And use tsc.cmd instead of tsc

Below example

What are the challenges in the modern development , Why we need to learn Angular

Intro to web development|technology:
------------------------------------
  browser[client]                         webserver
                -------------------------> website[asp.net,php,jsp,..]
                                             |
                                          execution -->backend part
                                             |
                <--------------------------output
  html+css+javascript
       

Here, with in the browser what execution is happening that is called as front end part. The execution which is happening at the web server is called as back end part.
  

Here web development can be classified into 2  parts
 1.backend part
       the execution which takes place with in webserver system is
        called backend part

 2.frontend part
      the execution which takes place with in browser[client system]
      is called frontend part

Before 2008, more execution was placed on the web server.

Note: 

Now more number of users increased for web[websites] because of smart devices usage[mobile, tab,..],this will increase network traffic and more
burden on webserver

*From 2008 more execution burden was placed on browser to reduce burden on
 on webserver, this leads to importance for frontend web development

*there are different libraries and frameworks provided for frontend
 web development.

library-->it will be specific to particular task
              [narrow]

    framework-->environment with end to end tools for entire
                web development, it is a collection of libraries
                [wider] 

2006---jquery---->jquery team[john resig]-->it provides shortcut way to work with javascript
                         |
                  ->javascript library
                  ->it is collection of javascript functions
                  ->it will focus on DOM manips and traversal

 2010----angularjs-->google
                      |
                 ->javascript framework
                 ->no object oriented support
                 ->handling complex ui will not be easy 

2015-----angular2--->google
                        |
                    ->typescript framework
                    ->component based arch with object oriented support
                    ->handling complex ui will be easy
                    ->it provides more options as framework compare to reactjs[library]
                         *more databinding options
                         *built-in validations support
                         *dependency injection is supported

They are three reasons, why we need to learn Angular

1 Unified User Experience/Unified UX

2 Fluid User Experience

3 Search Engine Friendly URLS

Unified User Experience /Unified UX

The web application, must have an unified experience across devices.

An application must reach broad range of devices i.e. from pc to mobiles.

now what client wants is develop an application so that it should work in both web and mobile

It must have similar experience even on low bandwidth device.

Unified UX: Mobile users must get access to everything features of your application should not be restricted according to the device.

Application must run on any device. it must have the same feel n look.

Fluid User Experience: 

User must stay on only one page and get access to everything from that page

Page must get updated with new details without reloading the page.

it must avoid navigation using pagination.

User and SEO Friendly URLS

User must be able to browser the content of the application based on the previous search criteria.

Application must support routing technique to handle this.

Now, the question is how to build this kind of application.

Single Page Application

Can I use 

JavaScript-Yes

jQuery-Yes

knockout.js-Yes

backbone.js-Yes

Angular-Yes

What are the issues with jQuery ?

DOM Manipulation:

How to manipulate the view effectively.

Back Button:

What happens when we press back button,back button cannot be handled.

Routing

Readable URL( Query String )

Is URL User friendly and SEO Friendly.

Data Binding

How to bind the data from the model to view.

View Loading

How to load the view.

So solution for this is better use the framework.

jQuery Flow

Jquery Libraray----> Page is requested from Browser---> Page loads the static Dom---> library Loads--->library is passive--->browser uses event to make library active--->static dom converts into dynamic dom

Angular Flow

framework--->page is requested from browser--> page loads the static dom-->framework loads into browser---> framework is active--> static dom converts into dynamic dom

Framework:

A software framework is an architectural pattern responsible for not just building the application , but also control the application flow.

A service is a collection of factories and every factory is defined with a set of functions.

Service represents business logic with predefined functionalities.

 

A component comprises of template with html, css and typescript.

*the above development is called as stack based development
 1.MEAN stack

     M----Mongodb [database]
     E----Expressjs[middleware]
     A----Angular [frontend app]
     N----Nodejs[backend]

Introduction to Angular

Angular is a typescript framework provided by google to develop web application and mobile application.

Angular as a framework is providing end to end tools required for entire front end
web development

    building---->debugging--->unit testing-->production build
                         |
                  entire frontend web development
                         |
                  end to end tools
                         |
                typescript language
                debugging files[map files]
                jasmine and karma tool for unit testing 
                Ivy and AoT compilers for provided for production build 

angular is developed using typescript language and programming with in angular
will be using typescript language, so angular is called as typescript framework

  ->typescript language is developed by Microsoft in the year 2012
  ->google used typescript language of Microsoft to develop angular framework
    in the year 2015[Angular2]

  ->angular is having the power of 2 big companies Microsoft[typescript]
    and google[angular]

*angular is not an extension of angular.js,it is completely rebuilt from ground level using typescript language


angular vs react:
-----------------
1.angular is a typescript framework
  reactjs is a javascript library

2.angular is less dependent on thirdparty packages,it comes with 
  so many builtin services
  [like httpclient service is available for ajax]

  react is more dependent on thirdparty packages
  [like axois third party package is required for ajax]

3.angular as a framework comes with so many features
  [like more databinding options,builtin validations,pipes,dependency injection,..]

  react.js as a library will focus more on UI part, less features compare to angular