TypeScript Functions: Functions are the most crucial aspect of JavaScript as it

is a functional programming language. Functions are pieces of code that execute

specified tasks. They are used to implement object-oriented programming
principles like classes, objects, polymorphism, and abstraction. It is used to
ensure the reusability and maintainability of the program. Although TypeScript
has the idea of classes and modules, functions are still an important aspect of
the language.
Types of Functions in TypeScript: There are two types of functions in
TypeScript:
● Named Function
● Anonymous Function

1. Named function: A named function is defined as one that is declared and

called by its given name. They may include parameters and have return types.
Syntax:
functionName( [args] ) { }

2. Anonymous Function: An anonymous function is a function without a

name. At runtime, these kinds of functions are dynamically defined as an
expression. We may save it in a variable and eliminate the requirement for
function names. They accept inputs and return outputs in the same way as
normal functions do. We may use the variable name to call it when we need
it. The functions themselves are contained inside the variable.
Syntax:
let result = function( [args] ) { }

Var keyword: Declaring a variable using the var keyword.

var variable : number = 1;

The var variables have function scope. It indicates they’re only available
within the function they were formed in, or they’re globally scoped if they
weren’t generated within a function. It won’t work if I declare var inside a
function and then try to call it from outside the function.
The number1 is a number that is globally declared. The number2 has the
scope of the function it resides in. The number3, even if it’s declared in an
if loop, it can be accessed in the function as it’s declared with the var
keyword.
Let keyword: Declaring a variable using the let keyword.
let variable : string = "geeksforgeeks";

The let variables are block-scoped. Unlike the var keyword, which declares
a variable globally to the whole function regardless of block scope, the let
keyword allows you to define variables that are confined to the scope of the
block statement or expression on which it is used.
The number1 is a number that is globally declared. The number2 has the
scope of the function it resides in. The number3 is declared in an if loop, it
can be accessed only in the if loop, it’s block-scoped as it’s declared using
the let keyword.
Const keyword: Declaring a variable using the const keyword.
const variable : number = 9;

The const variables are block scoped. Constants, like variables declared
with the let keyword, are block-scoped. A constant’s value cannot be
modified by reassigning a new value to it and the variable with the same
name cannot be redeclared either.
The number1 is a number that is globally declared. The number2 has the
scope of the function it resides in. The number3 is declared in an if loop, it
can be accessed only in the if loop, it’s block-scoped as it’s declared using
the const keyword. the const keyword is similar to let but the difference is
that const variables can’t be reassigned, variables declared using let can
be reassigned.

Advantages of AngularJS
The advantages of AngularJS are −

​ It provides the capability to create Single Page Application in a very

clean and maintainable way.

​ It provides data binding capability to HTML. Thus, it gives user a rich

and responsive experience.

 ​ AngularJS code is unit testable.

​ AngularJS uses dependency injection and make use of separation of

concerns.

Disadvantages:

Disadvantages of AngularJS
Though AngularJS comes with a lot of merits, here are some points of concern −

​ Not Secure − Being JavaScript only framework, application written in

AngularJS are not safe. Server side authentication and authorization is

must to keep an application secure.

​ Not degradable − If the user of your application disables JavaScript,

then nothing would be visible, except the basic page.

In Typescript, any value can be assigned to unknown, but without a type

assertion, unknown can’t be assigned to anything but itself and any.
Let’s understand when to use unknown types and when not to use with the
help of the following examples.
Unknown type is used to make our code type-safe. when we use the
unknown type we have to write extra code but finally, our code will be
type-safe. type safety is nothing but the prevention of type errors.
Example 1: When variables of other value types are assigned to unknown.
In this example, we assign values of different types to the unknown
variable. we can see that it doesn’t raise any error. unknown type lies on
the top when it comes to variable types in Typescript.

​ Javascript
let val: unknown;

console.log(val);

val = true;

console.log(val);

val = 7;

console.log(val);

val = "geeks for geeks";

console.log(val);
val = [1, 2, 3, 4];

console.log(val);

val = { name: "rachel" };

console.log(val);

val = Math.random();

console.log(val);

val = null;

console.log(val);
 val = undefined;

console.log(val);

Output:
undefined
true
7
geeks for geeks
[ 1, 2, 3, 4 ]
{ name: 'rachel' }
0.776446663785197
null
undefined

Example 2: unknown is assigned to unknown and other type values

As it’s given in the introduction, an unknown type variable can only be
assigned to another unknown type variable or a variable of type any.
unknown type is displayed as “undefined”.

​ Javascript

let a: unknown;
 console.log(a);

let b: unknown = a;

console.log(b);

let c: any = a;

console.log(c);

Output:
undefined
undefined
undefined

Example 3: In this example, we tried to assign an unknown type value to a

variable of type number, an error is raised.

​ Javascript
 let unknown: unknown;

let num: number = unknown; // Error

console.log(num);

Output:
error TS2322: Type 'unknown' is not assignable to type 'number'.
let num: number = a; // Error

Example 4: In typescript, we can’t perform operations on unknown type

values. Object type operations cannot be performed on unknown type
values.

​ Javascript

let unknown_val: unknown;

unknown_val.split("");
 console.log(unknown_val);

Output:
error TS2339: Property 'split' does not exist on type 'unknown'.

Data Binding is a way to synchronize the data between the model and view
components automatically. AngularJS implements data-binding that treats
the model as the single-source-of-truth in your application & for all the
time, the view is a projection of the model. Unlike React, angular supports
two-way binding. In this way, we can make the code more loosely coupled.
Data binding can be categorized into 2 types, ie., One-way Binding &
Two-way Binding.
One-way Binding: This type of binding is unidirectional, i.e. this binds the
data flow from either component to view(DOM) or from the view(DOM) to
the component. There are various techniques through which the data flow
can be bind from component to view or vice-versa. If the data flow from
component to view(DOM), then this task can be accomplished with the help
of String Interpolation & Property Binding.

Two-way Binding: In this type of binding, the immediate changes to the

view & component, will be reflected automatically, i.e. when the changes
made to the component or model then the view will render the changes
simultaneously. Similarly, when the data is altered or modified in the view
then the model or component will be updated accordingly.

In website analytics, a clickstream or click path is the sequence of pages a user

visits on a website. Thus, clickstream analysis is simply the process of analyzing
what pages a user visits (and in what order) on a website. This allows
webmasters to better understand how their website is being used, and where they
can make improvements.
Benefits of clickstream data analysis
There are a number of benefits organizations can get from clickstream
data and clickstream analytics. Among them are the following:

● User information. The data collected can include search terms

used, pages landed on, webpage features used and the addition
or removal of items from a cart, all of which can lead to more
actionable insights.
● User routes. Organizations can use data analysis to view the
different routes their online visitors or customers take to reach
a page or to make a purchase.
● Customer trends and insights. Collecting and analyzing the
clickstreams of a large number of visitors lets an organization
identify trends in the following areas:
○ how visitors get to the website;
○ what they do once there;
○ how long they stay on a page;
○ the number of page visits visitors make; and
○ the number of unique and repeat visitors.
● UX. If a majority of users quickly leave a page or website, it
could be a sign that the page is poorly optimized or doesn't
contain enough information of value. Clickstream data enables
an organization to recognize UX shortcomings, enabling them
to make necessary changes.
 ● Digital marketing. Clickstream data can be used to determine
the amount of traffic coming from ad banners and campaigns.
Such data provides insight as to which advertisements are most
effective and lead to customer conversion rate optimization.
Clickstream analysis can also derive what times of day, month
or year a marketing strategy is most effective.

The W3C Web Ontology Language (OWL) is a Semantic Web language designed to represent
rich and complex knowledge about things, groups of things, and relations between things.
OWL is a computational logic-based language such that knowledge expressed in OWL can be
exploited by computer programs, e.g., to verify the consistency of that knowledge or to make
implicit knowledge explicit. OWL documents, known as ontologies, can be published in the
World Wide Web and may refer to or be referred from other OWL ontologies. OWL is part of
the W3C’s Semantic Web technology stack, which includes RDF, RDFS, SPARQL, etc.
The current version of OWL, also referred to as “OWL 2”, was developed by the [W3C OWL
Working Group] (now closed) and published in 2009, with a Second Edition published in
2012. OWL 2 is an extension and revision of the 2004 version of OWL developed by the [W3C
Web Ontology Working Group] (now closed) and published in 2004. The deliverables that
make up the OWL 2 specification include a Document Overview, which serves as an
introduction to OWL 2, describes the relationship between OWL 1 and OWL 2, and provides
an entry point to the remaining deliverables via a Documentation Roadmap.

TypeScript is object oriented JavaScript. TypeScript supports object-oriented

programming features like classes, interfaces, etc. A class in terms of OOP is a
blueprint for creating objects

Creating classes
Use the class keyword to declare a class in TypeScript. The syntax for the same is

given below −

Syntax
class class_name {
 //class scope

The class keyword is followed by the class name. The rules for identifiers must be

considered while naming a class.

A class definition can include the following −

​ Fields − A field is any variable declared in a class. Fields represent data

pertaining to objects

​ Constructors − Responsible for allocating memory for the objects of

the class

​ Functions − Functions represent actions an object can take. They are

also at times referred to as methods

Inheritance is an aspect of OOPs languages, which provides the ability of a program to

create a new class from an existing class. It is a mechanism which acquires the
properties and behaviors of a class from another class. The class whose members are
inherited is called the base class, and the class that inherits those members is called
the derived/child/subclass. In child class, we can override or modify the behaviors of
its parent class.

Syntax

We can declare a class inheritance as below.

1. class sub_class_name extends super_class_name

2. {
3. // methods and fields
4. {
Why use inheritance?

○ We can use it for Method Overriding (so runtime polymorphism can be

achieved).

○ We can use it for Code Reusability.

Single Inheritance

Single inheritance can inherit properties and behavior from at most one parent class.

Multiple Inheritance

When an object or class inherits the characteristics and features form more than one
parent class, then this type of inheritance is known as multiple inheritance.

Hierarchical Inheritance

When more than one subclass is inherited from a single base class, then this type of
inheritance is known as hierarchical inheritance.

Hybrid Inheritance

When a class inherits the characteristics and features from more than one form of
inheritance, then this type of inheritance is known as Hybrid inheritance.

5 website metrics to consider

Websites generate many different pieces of data. Here are 15 metrics that can
help you target and improve a website's performance:

1. Website traffic

Tracking the total number of visits to a website provides a measurement of a

company's ability to attract an audience. If you see an increase in website traffic
after posting a particular type of content, it can indicate that it resonates with
audiences. Content that attracts a growing number of visitors may help build a
consistent audience.

Related: 26 Effective Ways To Increase Traffic to Your Website

2. Bounce rate

The bounce rate metric tells businesses the number of visitors who leave the
website immediately after visiting. A lower bounce rate metric means more
visitors stay on the website longer and check out the content. A longer visit may
also mean visitors have found their desired service or product on the site, which
may give you a greater chance of convincing them to become digital customers
of the company's products or services.

3. Top pages

Getting data for the top-performing pages on a site can help you identify the
individual pages that generate the most traffic. Knowing the website pages that
perform the best can provide insight into what visitors like. For example, if you
get the most traffic to a particular blog, it might be worth investing more
resources to do more blog posts.

4. Conversion rate

The conversion rate measures the percentage of visitors who perform the desired
action, such as making a purchase. For example, a company with products to sell
might offer an online coupon. To track conversion rates, you divide the number of
users who have purchased a company's product with the coupon by the total
number of people who saw the advertisement.

For example, 25 people may take advantage of an offer to buy a pair of sneakers
out of 100 people who have viewed the offer. To find the conversion rate, you'd
divide the 25 people by the 100 visitors for a conversion rate of 0.25, or 25%.
Read more: What Is Google Analytics? Definition and Benefits

5. Customer's lifetime value

Customer lifetime value (CLV) is the total amount generated from a single
customer, and it can help measure the success of a particular offer over time.
This simple calculation involves adding up all the sales over a period and then
subtracting the cost of the ad.

For instance, if someone has bought $200 of takeout food from a restaurant while
using a coupon for $10 off over five years, the customer's lifetime value would be
$950. You can calculate this across all repeat customers to estimate how much
cash flow a particular online coupon might produce.

Related: How To Calculate Customer Lifetime Value and Why It's Important

6. Average time spent on site

Another important metric is reviewing the amount of time spent on the site or
each page. If people spend more time on the site, it can mean that you're
providing valuable content. Content creators may want to consider doing more of
the same types of content to increase the time spent on their website.

Read more: Guide: What Is SEO?

7. Returning visitors

Examining the amount of returning visitors is another way of judging the value of
a website's content. More returning visitors means more people are deciding to
come back, potentially because they like what the site offers. To calculate
returning visitors, divide the number of return visits by the website's total visits.
For instance, if you have 4,000 returning visitors and a total website visit of
10,000, you divide the returning number by the total number for a conversion rate
of 40%.

Read more: 13 User Engagement Metrics To Measure and Track in 2022

8. Cost per conversion

The cost per conversion (CPC) metric evaluates how much it costs in
advertisements to gain a single customer. This can help you determine how
effectively an advertising campaign produces results. To calculate your cost per
conversion, divide the cost for generating traffic by the number of conversions.
For instance, for an ad campaign that costs $100 and generates 10 conversions,
you'd divide $100 by 10 to get a CPC of $10.

Related: 4 Ways To Boost Conversions (Plus Definition and Tips)

9. Landing page results

When running a unique website campaign, organizers often create special

sections focused on that topic or offer. The first page of that campaign is the
landing page and can show how effective your work is. Focus your analysis by
collecting some of the page metrics, such as total traffic, time spent on a page,
bounce rate and conversion rate. You might consider reworking the offer or
content if any of those seem low.

Read more: 15 Digital Marketing Metrics for Businesses (And How To Use)

10. Exit pages

Exit pages tell you where a visitor decides to leave the site. Often, this can be the
same as the landing page, particularly if a site has a high bounce rate. If you
discover that most visitors leave on the same page, consider updating the page
to make it more attractive and user-friendly. For example, if a business notices
that customers tend to go halfway through placing an order, it might consider
making the ordering process easier to complete. You can also integrate links to
other content to convince people to continue to explore.

Read more: 11 of the Best Marketing Dashboard Examples

11. Device sources

Another essential metric to track is the type of devices that visitors use to access
the site. Knowing what visitors use to get to the site is essential, as it gives you
information about how to format the content. For instance, if people are
accessing the site by mobile phone, you may consider building content formatted
for mobile devices.

AngularJS is a structural framework for dynamic web applications. It lets you use
HTML as your template language and lets you extend HTML's syntax to express
your application components clearly and succinctly.

1.The MVC Architecture is Perfect

MVC stands for Model View Architecture which is a software pattern to develop

applications. The model layer manages the application data, the view layer is

responsible for the display of this data while the controller is what connects the model

and the view layer.

In normal MVC architectures, you have to split your app into these three components

and then write code to connect them too. However, in AngularJS, all you have to do is

split the application into MVC and it does the rest.This saves up a significant amount

of time in coding.

2. Unit Testing assures Quality Code

One of the best features of angularjs is the fact that it makes use of a unit testing

technique that helps user produce high quality applications. The code is divided into

the smallest testable parts i.e. units. This also helps you easily detect any flaws or

mistakes in each line of the code.

Using Angular’s module that provides mocking for tests,mock units are injected and

tested to see if the request is returned with the expected data. This helps you make

sure that each and every component of your application works exactly as required.

3. Data Binding is Efficient

Data binding in AngularJS is a two way street. This means that the view layer of the

architecture is always an exact representation of the model. Unlike in other

applications, the model and view layers are continuously updated to remain in sync

with one another.

So any changes you make in your model layer will automatically be reflected in your

view layer and vice versa. This again saves a significant amount of time in coding the

connection between the two whenever a change is made.

4. Requires Writing Less Code

As is made clear by the above characteristics, AngularJS needs a lot less coding than

others. You don’t have to write code to connect the MVC layers, you don’t have to write

separate codes for the view manually, directives are separate from the app code and

can be written parallelly etc. All of these collectively decrease the amount of coding

that is required, significantly. This also saves up your developer costs making your

AngularJS hires the most cost effective.

5. It is developed by Google:
Google is the pioneer of the internet age and you know when there’s something that

Google develops, it will be great. AngularJS is maintained by a dedicated team of

highly skilled engineers who are readily available to solve any issues related to the

framework. Since this also provides a large community to learn from, you can also find

a number of highly skilled and expert AngularJS developers spread across the world

to assist you.

Although the list could go on, these 5 features are compelling enough to prove the

point. AngularJS has become the dominant JavaScript framework in the world of

professional web development. It helps you create a powerful and unique web

application that is yet easy to use and maintain. Given these advantages, it definitely

becomes hard not to prefer AngularJS for your projects.

What is Web Analytics?

Web Analytics or Online Analytics refers to the analysis of quantifiable and

measureable data of your website with the aim of understanding and optimizing

the web usage.

Web analytics focuses on various issues. For example,

​ Detailed comparison of visitor data, and Affiliate or referral data.

​ Website navigation patterns.

​ The amount of traffic your website received over a specified period of

time.

​ Search engine data.

Web analytics improves online experience for your customers and elevates your

business prospects. There are various Web Analytics tools available in the market.

For example, Google Analytics, Kissmetrics, Optimizely, etc.

Types of Web Analytics

There are two types of web analytics −

​ On-site − It measures the users’ behaviour once it is on the website. For

example, measurement of your website performance.

​ Off-site − It is the measurement and analysis irrespective of whether

you own or maintain a website. For example, measurement of visibility,

comments, potential audience, etc.

Metrics of Web Analytics

There are three basic metrics of web analytics −

Count
It is most basic metric of measurement. It is represented as a whole number or a

fraction. For example,

​ Number of visitors = 12999, Number of likes = 3060, etc.

​ Total sales of merchandise = $54,396.18.

Ratio
It is typically a count divided by some other count. For example, Page views per

visit.

Key Performance Indicator (KPI)

It depends upon the business type and strategy. KPI varies from one business to

another.

These are the few measurements conducted in web analytics −

Engagement Rate
It shows how long a person stays on your web page. What all pages he surf. To

make your web pages more engaging, include informative content, visuals, fonts

and bullets.

Bounce Rate
If a person leaves your website within a span of 30 sec, it is considered as a bounce.

The rate at which users spin back is called the bounce rate.

To minimize bounce rate include related posts, clear call-to-action and backlinks in

your webpages.

Dashboards
Dashboard is single page view of information important to user. You can create your

own dashboards keeping in mind your requirements. You may keep only frequently

viewed data on dashboard.

Event Tracking
Event tracking allows you to track other activities on your website. For example,

you can track downloads and sign-ups through event tracking.

Definition of TypeScript typeof

typeof is a keyword that is used to differentiate between different types in TypeScript.
Using typeof, we can figure out differences between numbers, strings, boolean, etc. It
can be used with any type, also we can reuse the code by passing any parameter type.

The typeof operator can be used as a Type guard in TypeScript and returns a string
that indicates the type of a value.

The typeof type guards can be acknowledged in two different forms: typeof t ===
"typename" and typeof t !== "typename" where typename is one of the return values of
typeof. The return values can be undefined, number, string, boolean, object or
function.

Syntax
The syntax for defining the TypeScript typeof keyword is as follows:

typeof variable_name === "your_type"

We can directly make use of typeof with the variable name that we want to define.
After this declaration, we can write our logic as per the code's requirements.

How does typeof work in TypeScript?

TypeScript typeof keyword allows us to work with various types in TypeScript. We can
reuse the same code for multiple types. By using this keyword, we can easily make
checks that can help us to get any further exceptions if we try to cast them incorrectly.

It is used to create new basic types. If we define our custom types, then we can use
typeof to copy the type of an existing item. It is majorly used with identifiers (i.e
variable names) or their properties.

Directives are special attributes starting with ng- prefix. Following are the most
common directives:

○ ng-app: This directive starts an AngularJS Application.

○ ng-init: This directive initializes application data.

 ○ ng-model: This directive defines the model that is variable to be used in
AngularJS.

○ ng-repeat: This directive repeats html elements for each item in a collection.

ng-app directive
ng-app directive defines the root element. It starts an AngularJS Application and
automatically initializes or bootstraps the application when web page containing
AngularJS Application is loaded. It is also used to load various AngularJS modules in
AngularJS Application.

Play Video

See this example:

In following example, we've defined a default AngularJS application using ng-app

attribute of a div element.

1. <div ng-app = "">

2. ...
3. </div>
4.
5.

ng-init directive
ng-init directive initializes an AngularJS Application data. It defines the initial values
for an AngularJS application.
In following example, we'll initialize an array of countries. We're using JSON syntax to
define array of countries.

1. <div ng-app = "" ng-init = "countries = [{locale:'en-IND',name:'India'},

{locale:'en-PAK',name:'Pakistan'}, {locale:'en-AUS',name:'Australia'}]">
2. ...
3. </div>

ng-model directive:
ng-model directive defines the model/variable to be used in AngularJS Application.

In following example, we've defined a model named "name".

1. <div ng-app = "">

2. ...
3. <p>Enter your Name: <input type = "text" ng-model = "name"></p>
4. </div>

ng-repeat directive
ng-repeat directive repeats html elements for each item in a collection. In following
example, we've iterated over array of countries.

1. <div ng-app = "">

2. ...
3. <p>List of Countries with locale:</p>
4.
5. <ol>
6. <li ng-repeat = "country in countries">
 7. {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
8. </li>
9. </ol>

TypeScript Anonymous Functions are functions that are not bound to an

identifier i.e., anonymous functions do not have name of the function.

Anonymous functions are used as inline functions. These are used when
the function is used only once and does not require a name. The best
example is a callback function.

Syntax of Anonymous Function in TypeScript

var varName = function( [arguments] ) {
// function body
}

■ var is the keyword

■ varName is the name of the variable in which function is stored

■ function (is a keyword) is an operator that creates a TypeScript Function

during runtime

■ arguments are optional variables that could be declared for the

anonymous function

■ function body can contain multiple lines of code

Single Page Application Pros

Single-page applications are fast as most of the resources,

including HTML, CSS, and Scripts, are loaded once, and only
data is transmitted back and forth. Here are some of the business
benefits of building single-page applications:

1. Quick Loading Time

A page taking over 200 milliseconds to load can significantly

affect your online business and, eventually, sales.
With the SPA approach, your full page loads quicker than
traditional web applications, as it only has to load a page at the
first request. On the other hand, traditional web apps have to
load pages at every request, taking more time.

2. Seamless User Experience

SPAs deliver an experience like a desktop or mobile app. Users
do not have to watch a new page load, as only the content
changes, not the page, making the experience enjoyable.

3. Ease in Building Feature-rich Apps

SPA application makes adding advanced features to a web

application easy. For example, it is easier to build a
content-editing web app with real-time analysis using SPA
development. Doing this with a traditional web app requires a
total page reload to perform content analysis.

4. Uses Less Bandwidth

It is no surprise that SPAs consume less bandwidth since they

only load web pages once. Besides that, they can also do well in
areas with a slow internet connection. Hence, it is convenient for
everyone, regardless of internet speed.
3. UX

Single page applications also provide a better overall

user experience. With an MPA, users have to click
through links and menus to get the information they're
looking for, but with an SPA, the user just has to
scroll. This feature makes SPAs particularly
well-suited to mobile environments.

2. Caching capabilities

SPAs request data from the server just one time, upon
initial download, so caching works better; if a user
has a poor internet connection, site data can be
accessed with the server when the connection
improves.