Unit-4 – TypeScript MEAN Stack Development

Typescript
About TypeScript
 Implementing a JavaScript-based application is more error-prone as it supports dynamic typing and
supports non-strict mode with global variables.
 TypeScript makes such implementations easy, as it supports static typing and structured code with the
help of modules and object-oriented concepts.
 This course introduces various features and programming constructs of TypeScript which enables you
to develop a highly structured, less error-prone JavaScript code using TypeScript features.

Need For TypeScript

 JavaScript is the language used for client-side scripting to do client-side validations, DOM
manipulation, Ajax calls, etc. using JavaScript. Also, JavaScript frameworks can be used for writing
complex business logic that runs at the client-side.
 As the complexity of the JavaScript code increases, it gradually becomes difficult in coding and
maintaining. This is because of the limitations of the JavaScript language. There is no option to
change the language for the client-side scripting as the browser understands only JavaScript.
 The solution is to choose a language that is rich in features and the code can be converted to
JavaScript. This process of converting the code written in one language into another language is
called Transpilation.
TypeScript is one such language where its code can get transpiled to JavaScript.

Pitfalls of JavaScript
 Dynamic Typing: It decides the data type of the variable dynamically at run time.
 Interpreted Language: It is a language in which the code instructions are executed directly
without prior compilation to machine-language instructions.
 Minimal Object Oriented support: Object-Oriented Programming (OOP) is a programming
methodology based on the concept of objects. Object-Oriented concepts like classes,
encapsulation, inheritance help in the readability and reusability of the code.
 Minimal IDE support: Integrated Development Environment (IDE) is a software application that
provides all necessary options like code refactoring, intelliSense support, debugging support to
software programmers for software development.
Dynamic Typing
Consider the below JavaScript function:
function calculateTotalPrice(quantity, unitPrice) {
return quantity * unitPrice;
}
We can invoke this function using the below code:
console.log(calculateTotalPrice(3, "500"));
Since JavaScript is dynamically typed, we can invoke the above function using the below code as well.
console.log(calculateTotalPrice('three', "500"));

Even though the above code will not throw any error, it will return NaN as output, since the expected
number type value is not passed to the quantity argument of the calculateTotalPrice function.
To avoid the above runtime error we can use static typing in TypeScript, wherein we will add data type to
the function argument while defining it. Consider the same JavaScript function written using TypeScript
as below:

VLITS, Vadlamudi. Page 1

 Unit-4 – TypeScript MEAN Stack Development

function calculateTotalPrice(quantity:number, unitPrice:number) {

return quantity * unitPrice;
}
In the above code, we are adding a number as the data type to both the arguments of the function. Hence
when we invoke the function using the below code:
console.log(calculateTotalPrice('three', "500"));
We will get a compilation error since we are invoking the function with the first parameter as
a string type. Hence we can detect error early at compilation time itself.
Interpreted Language
JavaScript is an interpreted language. The advantages are:
 It takes less amount of time to analyze the source code
 Memory efficient as no intermediate object code will get generated.

The disadvantage is most of the errors can be identified only at run time.
 This can be overcome by using TypeScript which will be transpiled to JavaScript and most of the
errors will be fixed during the transpilation time itself.
 Therefore, TypeScript saves the application development time for a JavaScript developer.
Minimal Object Oriented Support
The equivalent Typescript code is as below:
class Product{
protected productId:number;
}
class Gadget extends Product{
getProduct():void{
}
}
You can observe from the above code that:
 The readability of the JavaScript code is minimal.
 Abstraction is done using closures or self-invoking functions wherein the number of lines of code
is more compared to public, private, protected access modifiers.
 Classes are created using a constructor function, which leads to confusion compared to using the
class keyword.
 Javascript supports OOP through prototypal inheritance which is complex for people with
classical inheritance background to understand.
In addition to that TypeScript also supports interface and generic concepts which is not supported by
JavaScript.
Minimal IDE Support
A few IDEs have code refactoring, IntelliSense support for JavaScript application development.
 IntelliSense support helps in writing the code quickly.
 Refactoring support helps in changing the variable or function names throughout the application
quickly.
Most of the IDEs has good support for TypeScript, some are listed below:
 Visual Studio with versions 2015, 2013, and so on
 Sublime Text
 Atom
 Eclipse
 Emacs

VLITS, Vadlamudi. Page 2

 Unit-4 – TypeScript MEAN Stack Development

 WebStorm
 Vim
Why TypeScript?
JavaScript application development has become easier with the help of the following tools:
 npm can be used to download packages
 webpack can be used to manage the complexity of applications.
 Babel can be used to fetch the latest features of the language.
 Tools like rollup and uglifyjs can be used to optimize application payloads.
 prettier and eslint can be used to uphold code with consistent style as well as quality.
 IDE like Visual Studio Code with Node.js environment can be used to run JavaScript code
everywhere.
There is browser support challenge for the latest ES6 version of JavaScript. You can use ES6 transpilers
like Babel to address this.
TypeScript can be another preferred option which is a superset of JavaScript and transpiles to the
preferred version of JavaScript.

What is TypeScript?
TypeScript can be considered as a typed superset of JavaScript, that transpiles to JavaScript.
 Transplier converts the source code of one programming language to the source code of another
programming language.
 TypeScript makes the development of JavaScript more of a traditional object-oriented experience.
 TypeScript is based on ECMAScript 6 and 7 proposals.
 Any valid JavaScript is TypeScript.
Relationship between TypeScript and JavaScript
 TypeScript implements EcmaScript specification. Apart from the EcmaScript specification,
TypeScript has its own features as well.
 JavaScript also implements EcmaScript.
 TypeScript code must be transpiled to JavaScript code to use it in an application.

Relationship between TypeScript and JavaScript

From the above code, the TypeScript class Helloworld is converted to a self-invoking function in
JavaScript when transpiled.
You can use TypeScript's online playground editor to see how TypeScript gets converted into JavaScript.
Features of TypeScript

VLITS, Vadlamudi. Page 3

 Unit-4 – TypeScript MEAN Stack Development

Static Typing: It adds static typing to JavaScript, due to which the readability of the code improves and
helps in finding more early compilation errors than run time errors.
Modules support: TypeScript provides an option to create modules to modularize the code for easy
maintenance. Modules help in making the application scalable.
Object-Oriented Programming: TypeScript supports Object-Oriented Programming features such as
class, encapsulation, interface, inheritance and so on which helps in creating highly structured and
reusable code.
Open Source: TypeScript is open source. The source code of TypeScript can be downloaded from
Github.
Cross-Platform: It works across the platform.
Tooling Support: TypeScript works extremely well with Sublime Text, Eclipse, and almost all major
IDEs compared to JavaScript.
Installing TypeScript
 To install TypeScript, go to the official site of TypeScript ( http://www.typescriptlang.org/ ) and
follow the steps mentioned there to download TypeScript.
 As mentioned on the official site, you need to install Node.js.
 Install Node.js from the official site of Node.js ( https://nodejs.org/en/) or Software Center.
 Open a Node.js command prompt and check whether node and npm are installed in your machine by
using "node -v " and "npm -v" commands.
 npm is a command-line tool that comes along with Node.js installation with which you can download
node modules. TypeScript is also such a node module that can be installed using npm.
 In the same Node.js command prompt, type the "npm i –g typescript" command to download the
TypeScript module from the repository.
 On successful execution of above command, the TypeScript module will get downloaded under
folder C:\Users\<<username>>\AppData\Roaming\npm\node_modules\typescript as shown below.

In the same command prompt check for TypeScript installation as below:

tsc -v
//or
tsc --version
 Output showing version number indicates the successful installation of the TypeScript module.
 Alternatively, you can also use TypeScript online playground editor in this case, you should
be always connected to good Internet.
To configure TypeScript with different IDEs. Here are a few links for IDE configuration for TypeScript:
 Visual Studio Code: https://code.visualstudio.com/Docs/languages/typescript
 Eclipse IDE: https://github.com/palantir/eclipse-typescript
 Visual Studio 2015: https://angular.io/guide/visual-studio-2015

VLITS, Vadlamudi. Page 4

 Unit-4 – TypeScript MEAN Stack Development

To configure TypeScript with different IDEs. Here are some of the popular IDEs for working with
TypeScript:
 Visual Studio code
 Eclipse IDE
 Visual Studio 2015
First TypeScript Application
To start with the first application in TypeScript, create a file hello_typescript.ts under a folder. In the ts
file give a console.log statement and save it.

From the Node.js command prompt, navigate to the directory in which the ts file resides and compile the
ts file using the tsc command.

After compilation of the TypeScript file, the corresponding JavaScript file gets generated.

To run the generated JavaScript file, use the node command from the command line or include it in an
HTML page using the script tag and render it in the browser.

TypeScript Basics
Consider the below page of the Mobile Cart application. The information such as mobile phone
name, price, status on the availability of the mobile, discounts is displayed on the page. It also displays
different price ranges as GoldPlatinum, PinkGold, SilverTitanium.

VLITS, Vadlamudi. Page 5

 Unit-4 – TypeScript MEAN Stack Development

Each of the information getting displayed has a specific type. For example, the price can only be numeric
and the mobile name can only be a string.
There should be a mechanism using which you can restrict the values being rendered on the page.
Sometimes it is preferred to have a text instead of numeric values to represent some information. For
example, on the above page instead of categorizing the mobiles based on their prices, you can prefer to
remember them as some text like GoldPlatinum, PinkGold, etc.
TypeScript is a static typed language that allows us to declare variables of various data types so that you
ensure only the desired type of data being used in the application.
Let us discuss declaring variables and basic data types supported by TypeScript.
Declaring Variables
Declaration of a variable is used to assign a data type and an identifier to a variable. Declaration of
variables in TypeScript is like JavaScript variable declaration.
Below are the three declaration types supported in TypeScript.
Data
Explanation
Type
 Variable declared with this type would have function scope.
 They can be re-assigned and re-defined.
var
 When a variable declared outside the function, it would have global scope
and automatically attaches itself to the window object.
 Variable declared with this type would have a block-level scope.
let
 They can be re-assigned and cannot be redefined.
 Variable declared with this type would have a block-level scope.
const
 They can be neither re-assigned nor re-defined.
Problem with var declaration:
In the below code, you will observe a strange behavior of the variable count. You can access this variable
even outside the loop although it is defined inside the loop. This is due to the global scope nature of
the var data type declaration.

Output:
Some of the other problems with global scope variable are:
 When the var declared variable is defined outside a function it is attached with the window
object which has only one instance.
 This is a bad practice and causes an overridden of a variable when you try to use a third-party
library working with the same variable.
 Generally, var variables have a function-scope and if they are not declared within a function, they
have a global scope.
To overcome this issue, in ES2015. JavaScript has introduced let and const as two new declaration types
and it is considered as standard because declaring variables by these two data types are safer
than declaring a variable using the var keyword.
Let us learn about these declarations.

VLITS, Vadlamudi. Page 6

 Unit-4 – TypeScript MEAN Stack Development

Declaring variables using let keyword

When a developer wants to declare variables to live only within the block, they can achieve a block-
scoped variable using let declaration.
Let us replace the var with the let keyword in the previous for loop code-snippet and observe the
difference.

Output:

Since the count variable is a block-scoped, it is not accessible outside the for loop hence results in the
error as not defined.
Difference between var and let Keyword
Capturing Variable in the loop
Variable declared using var keyword will have function scope. So, even if you declare a variable
using var inside a loop, it will have function scope.
In the below example, variable i has been declared inside the for loop using the var keyword, but it will
have the scope of the function. Thus, by the time setTimeout function executes, the value of i has already
reached 10.

Therefore, every invocation of setTimeout function gets the same value of i as 10.
Variable declared using let keyword will have block scope. Therefore, once the block is terminated, the
scope also is lost.
In the below example, variable i has been declared using let inside the for loop. So, its scope will be
limited to one iteration of the loop.

VLITS, Vadlamudi. Page 7

 Unit-4 – TypeScript MEAN Stack Development

In this scenario, every invocation of the setTimeout function will get the value of i from that iteration
scope.
Difference between var and let Keyword
Redeclaring block-scoped variable:
 The let declared variable cannot be redeclared within the same block.
 The var declared variable can be redeclared within the same block.

Due to these reasons let declaration is preferred over var declaration.

Now let us see what is const declaration meant for.
Declaring variables using const Keyword
The const declaration is similar to the let declaration except that the value cannot be re-assigned to the
variable.
 const declared variables are mutable if declared as an array or as an object literal.
 this declaration should be used if the value of the variable should not be reinitialized.

Basic Types
Data type mentions the type of value assigned to a variable. It is used for variable declarations.
Since TypeScript supports static typing, the data type of the variable can be determined at the
compilation time itself.

VLITS, Vadlamudi. Page 8

 Unit-4 – TypeScript MEAN Stack Development

There are variables of different types in TypeScript code based on the data type used while declaring the
variable.
boolean:
boolean is a data type that accepts only true or false as a value for the variable it is been declared.
In a shopping cart application, you can use a boolean type variable to check for the product availability,
to show/hide the product image, etc.

number:
number type represents numeric values. All TypeScript numbers are floating-point values.
In a shopping cart application, you can use number type to declare the Id of a product, price of a product,
etc.

string:
A string is used to assign textual values or template strings. String values are written in quotes – single or
double.
In a shopping cart application, you can use string type to declare variables like productName,
productType, etc.

Template strings are types of string value that can have multiple lines and embedded expressions. They
are surrounded by the backquote\backtick (`) character and embedded expressions of the form ${ expr }.

any:
any type is used to declare a variable whose type can be determined dynamically at runtime with the
value supplied to it. If no type annotation is mentioned while declaring the variable, any type will be
assigned by default.
In a shopping cart application, you can use any type to declare a variable like screenSize of a Tablet.

void:

VLITS, Vadlamudi. Page 9

 Unit-4 – TypeScript MEAN Stack Development

void type represents undefined as the value. the undefined value represents "no value".
A variable can be declared with void type as below:

void type is commonly used to declare function return type. The function which does not return a value
can be declared with a void return type. If you don’t mention any return type for the function, the void
return type will be assigned by default.

Type Annotations
Type Annotation is a way to enforce type restriction to a specific variable or a function.
If a variable is declared with a specific data type and another type of value is assigned to the variable, a
compilation error will be thrown.

Enum:
Enum in TypeScript is used to give more friendly names to a set of numeric values.
For example, if you need to store a set of size variables such as Small, Medium, Large with different
numeric values, group those variables under a common enum called Size.
By default, enum’s first item will be assigned with zero as the value and the subsequent values will be
incremented by one.

In a shopping cart application, you can use a MobilePrice enum to store different prices of the mobile
depending on the mobile color.

VLITS, Vadlamudi. Page 10

 Unit-4 – TypeScript MEAN Stack Development

To get the value from an enum use one of the following:

Enum items can also be initialized with different values than the default value. If you set a different value
for one of the variables, the subsequent values will be incremented by 1.

You can even set different values to different enum items

Arrays
Consider the below page of the Mobile Cart application that displays the list of mobile phones available.
For each mobile in the list, you can see its image, name, price, and availability status.

This requirement is implemented using the concept of arrays of TypeScript. Let us discuss arrays in
TypeScript.
An Array is used to store multiple values in a single variable. You can easily access the values stored in
an array using the index position of the data stored in the array.
TypeScript array is an object to store multiple values in a variable with a type annotation. They are like
JavaScript arrays.
Arrays can be created using one of the below:

VLITS, Vadlamudi. Page 11

 Unit-4 – TypeScript MEAN Stack Development

A TypeScript array defined with a specific type does not accept data of different types. TypeScript arrays
can be accessed and used much like JavaScript arrays.
JavaScript Arrays has several useful properties and methods to access or modify the given array. The
same is supported in TypeScript.
To add a dynamic value to an array, you can either use the push function or use the index reference.

Data can be removed from an array using the pop function or splice function

The splice function removes the item from a specific index position.
Tuple
Tuple type is a kind of array which accepts more than one predefined type of data. Arrays are used to
represent a collection of similar objects, whereas tuples are used to represent a collection of different
objects.

VLITS, Vadlamudi. Page 12

 Unit-4 – TypeScript MEAN Stack Development

Let us consider an example, where customerCreditId, Customer object, and customerCreditLimit must be
represented in a data type.
The choice could be to define a class, with these properties. If it is represented using the class, then there
will be a requirement to instantiate the class and then the properties can be accessed.
Tuples provides an easy way to implement the same scenario with an array-like data structure, which is
easy to access and manipulate.

In order to access the customerCreditId, you can use customerCreditInfo[0].

In order to access the customer object, you can use customerCreditInfo[1].
In a shopping cart application, you can use tuples to store product details that should require more than
one type of data.
 The order of the first set of data entries while initializing a tuple variable should be the same as
the order in which the type is declared in a tuple.
 A developer can initialize only one entry as per TypeScript data restriction length policy.
 A compilation error will be thrown in below two cases:
o if you are trying to assign multiple entries in the first initialization.
o if you try to initialize different datatypes directly to the tuple declared variable.
 In order to overcome the above-mentioned compilation errors, you can use the push() method.
Example:

In the above example, the underlined error is due to multiple declarations in the first initialization which
violates the length restriction policy. To avoid this, the push method can be used as shown in the code.
Why Function?
Consider the below page that displays the list of mobile phones available. For each mobile in the list, you
can see its image, name, price, and availability status. The property ‘name’ of the mobile is clickable.

When the mobile name link is clicked, the user is navigated to the next screen which shows the details
specific to the phone selected. The details such as different colors in which the phone is available, price
of mobile according to the color selected, description of the phone, availability status, and discounts if
any.

VLITS, Vadlamudi. Page 13

 Unit-4 – TypeScript MEAN Stack Development

Users can click on each color to view the mobile image for that color. The Price corresponding to the
color selected can also be shown. For example: On click of PinkGold the below screen should be
rendered:

This requirement is implemented using the function concept in TypeScript that helps us to implement
business logic and event handlers. Let us discuss functions in TypeScript.
Function in TypeScript Vs JavaScript:
 A function is a block of statements to perform a particular task.
 A sequence of statements written within function forms function body.
 Functions are executed when it is invoked by a function call. Values can be passed to a function
as function parameters and the function returns a value.
 Functions in TypeScript are like functions in JavaScript with some additional features.
TypeScript JavaScript
Types: Supports Do not support
Required and optional parameters: Supports All parameters are optional
Function overloading: Supports Do not support
Arrow functions: Supports Supported with ES2015
Default parameters: Supports Supported with ES2015
Rest parameters: Supports Supported with ES2015

Parameter Types and Return Types

The parameter type is the data type of the parameter and the return type is the data type of the returned
value from the function.

VLITS, Vadlamudi. Page 14

 Unit-4 – TypeScript MEAN Stack Development

With the TypeScript function, you can add types to the parameter passed to the function and the function
return types.
While defining the function, return the data with the same type as the function return type. While
invoking the function you need to pass the data with the same data type as the function parameter type, or
else it will throw a compilation error.

Arrow Function
Arrow function is a concise way of writing a function. Whenever you need a function to be written within
a loop, the arrow function will be the opt choice.
Do not use the function keyword to define an arrow function.
In a shopping cart application, you can use the arrow function to perform filtering, sorting, searching
operations, and so on.

Handling ‘this’ keyword in JavaScript

 In a class, if a method wants to access the property of the class it should use this keyword.
 For a particular object, this keyword will help to access the properties of the current object. This is
possible because all the methods and properties are within the same scope.
 In the above example, when you use this.productName inside the getProductDetails method,
getProductDetails method, and productName variable are in the same scope. Also, you get the desired
result.
 But when you use this.productName inside the setTimeout function, instead of directly using it in
testThisFunction method, the scope of this.productName will be inside the

VLITS, Vadlamudi. Page 15

 Unit-4 – TypeScript MEAN Stack Development

setTimeout's callback function and not the testThisFunction method. That is the reason you are unable
to access the value of productName for that particular object.
 If you need to access the class scope with this keyword inside the callback function then use the
arrow function.
 Arrow function lexically captures the meaning of this keyword.
Rewrite the same logic using the arrow function as below:

In the above code, this.productName is written inside an arrow function. Since the callback function of
setTimeout is implemented using the arrow function, it does not create a new scope and it will be in the
same scope as the testThisFunction method.
Function Types
Function types are a combination of parameter types and return type. Functions can be assigned to
variables.
While assigning a function to a variable make sure that the variable declaration is the same as the
assigned function’s return type.

Optional and Default Parameters

TypeScript treats every function parameter as mandatory. So when a function is compiled, the compiler
will check whether there is a value supplied to all the parameters of the function, or else it will throw a
compilation error.
Consider the code below:

In the above example, you have tried to invoke a function with only a single parameter, whereas the

VLITS, Vadlamudi. Page 16

 Unit-4 – TypeScript MEAN Stack Development

definition of the function accepts two parameters. Hence, it will throw a compilation error. Also, optional
parameter can be used to tackle this issue.
The Optional parameter is used to make a parameter, optional in a function while invoking the function.
If you rewrite the previous code using an optional parameter, it looks like the below:

 An Optional parameter must appear after all the mandatory parameters of a function.
 Default parameter is used to assign the default value to a function parameter.
 If the user does not provide a value for a function parameter or provide the value as undefined for it
while invoking the function, the default value assigned will be considered.
 If the default parameter comes before a required parameter, you need to explicitly pass undefined as
the value to get the default value.

Rest Parameter
Rest Parameter is used to pass multiple values to a single parameter of a function. It accepts zero or more
values for a single parameter.
 Rest Parameter should be declared as an array.
 Precede the parameter to be made as rest parameter with triple dots.
 Rest parameter should be the last parameter in the function parameter list.

Why Interface?
 Interfaces can be used to impose consistency among various TypeScript classes.

VLITS, Vadlamudi. Page 17

 Unit-4 – TypeScript MEAN Stack Development

 Any class which implements an interface should implement all the required members of that
interface.
 Interfaces can be used to ensure that proper values are being passed into functions, properties as
well as constructors.
 Interfaces can be used to achieve additional flexibility as well as loosely coupling in
an application.
 Any object which implements an interface can be passed as a parameter to a function whose
parameter type is declared the same as the interface.
Consider the below screen of the Mobile Cart application:

Here an array is used to store the product information. But not restricted the type of object to be stored
in the array. You can restrict the array which contains only a particular type of object. For this, use
Interface.
Let us discuss more on Interface in TypeScript.
What is an Interface?
An interface in TypeScript is used to define contracts within the code.
 Interfaces are used to enforce type checking by defining contracts.
 It is a collection of properties and method declarations.
 Interfaces are not supported in JavaScript and will get removed from the generated JavaScript.
 Interfaces are mainly used to identify issues upfront as we proceed with coding.
How to create an Interface?

Duck Typing
Duck-Typing is a rule for checking the type compatibility for more complex variable types.

VLITS, Vadlamudi. Page 18

 Unit-4 – TypeScript MEAN Stack Development

TypeScript compiler uses the duck-typing method to compare one object with the other by comparing
that both the objects have the same properties with the same data types.
TypeScript interface uses the same duck typing method to enforce type restriction. If an object that has
been assigned as an interface contains more properties than the interface mentioned properties, it will be
accepted as an interface type and additional properties will be ignored for type checking
Let us rewrite the previous example to a pass additional parameter.

Defining an Interface
 Interface keyword is used to declare an interface.
 An interface should have properties and method declarations.
 Properties or methods in an interface should not have any access modifiers.
 Properties cannot be initialized in a TypeScript interface.

Defining an Interface – Optional Property

In a TypeScript interface, if certain properties need to be made optional, you can make them optional by
adding ‘?’ after the property name.
Let us rewrite the duck typing example with the optional property.

Function Types

VLITS, Vadlamudi. Page 19

 Unit-4 – TypeScript MEAN Stack Development

Interfaces can be used to define the structure of functions like defining structure of objects.
Once the interface for a function type is declared, you can declare variables of that type and assign
functions to the variable if the function matches the signature defined in the interface.
Function type interface is used to enforce the same number and type of parameters to any function which
is been declared with the function type interface.

Extending Interfaces

An interface can be extended from an already existing one using the extends keyword.

In the code below, extend the productList interface from both the Category interface and Product
interface.

Class Types

Make use of the interface to define class types to explicitly enforce that a class meets a particular
contract. Use implements keyword to implement interface inside a class.

VLITS, Vadlamudi. Page 20

 Unit-4 – TypeScript MEAN Stack Development

To enforce interface type on a class, while instantiating an object of a class declare it using the interface
type.

The only interface declared functions and properties will be available with the instantiated object.

Why Classes
Classes are used to create reusable components. Till the ES5 version of JavaScript, you do not have a
class concept as such. For implementing reusable components, use functions and prototype-based
inheritance. TypeScript provides an option for the developers to use object-oriented programming with
the help of classes.
In the Mobile Cart application, you can use a class to define the product and create various objects of
different products. In the below screen, creating different objects of product and rendering the details

Let us discuss more on classes in TypeScript.

What is a Class?
 Class is a template from which objects can be created.
 It provides behavior and state storage.
 It is meant for implementing reusable functionality.
 Use a class keyword to create a class.

VLITS, Vadlamudi. Page 21

 Unit-4 – TypeScript MEAN Stack Development

Constructor
A constructor is a function that gets executed automatically whenever an instance of a class is created
using a new keyword.
 To create a constructor, a function with the name as a "constructor" is used.
 A class can hold a maximum of one constructor method per class.
 You can use optional parameters with a constructor function as well.

Access Modifiers
Access modifiers are used to provide certain restriction of accessing the properties and methods outside
the class.

Public and Private Access Modifiers

VLITS, Vadlamudi. Page 22

 Unit-4 – TypeScript MEAN Stack Development

Protected Access Modifier

Static Access Modifier

TypeScript provides an option to add a static keyword. This keyword can be used to declare a class
variable or method.
 A static variable belongs to the class and not to the instance of the class.
 A variable or function declared with a static keyword can be accessed using the class name
instead of the instance of the class.
 Static variables are initialized only once, at the start of the execution.
 A single copy of the static variables would be shared by all instances of the class.
 A static variable can be accessible inside the static function as well as the non-static function.
 A static function can access only static variables and other static functions.

Properties and Methods – Parameter Properties

Instead of declaring instance variables and then passing parameters to the constructor and initializing it,
you can reduce the code by adding access specifiers to the parameters passed to the constructor.
Consider the below code:

Instead of this declare the parameter itself with any of the access modifiers and reduce the lines of code
used for the initialization.
Let us rewrite the above code:

VLITS, Vadlamudi. Page 23

 Unit-4 – TypeScript MEAN Stack Development

Properties and Methods- Accessors

TypeScript provides an option to add getters/setters to control accessing the members outside the class or
modifying the same.
There is no direct option available to access private members outside the class but use accessors in
TypeScript for the same.
If you need to access private properties outside the class, you can use the getter and if you need to update
the value of the private property, you can use the setter.

Extending Classes with Inheritance

Inheritance is the process of extending a class from an already existing class and reuse the functions and
properties of the inherited class in the subclass.
TypeScript supports inheritance with class, wherein the superclass functionalities can be reused within
the subclass.

VLITS, Vadlamudi. Page 24

 Unit-4 – TypeScript MEAN Stack Development

The subclass constructor function definition should invoke the superclass constructor using the super
function.

Use the super keyword to access the methods of the super class inside the subclass methods.
Override the superclass methods inside the subclass by specifying the same function signature.

Abstract Class
 Abstract classes are base classes that may not be instantiated.
 An abstract class can be created using abstract keyword.
 Abstract methods within an abstract class are methods declared with abstract keyword and does
not contain implementation.
 They must be implemented inside the derived classes.
 Abstract classes can contain both abstract methods and its implementations.

VLITS, Vadlamudi. Page 25

 Unit-4 – TypeScript MEAN Stack Development

Modules and Namespaces

 Modules and Namespaces are useful in grouping functionalities under a common name.
 The main use is reusability.
 Code can be reused by importing modules or namespaces in other files.
 Namespaces are used for namespace resolution and are suitable for the development of a smaller
application.
 In larger-scale applications, they can be used to achieve modularity.

TypeScript provides native support in terms of module loaders using modules concept which takes care
of all the concerns with respect to modularity.

In the MobileCart application, create a product utility namespace or module and place the code related to
the product in it. Reuse the code related to the product by importing it into other files.
What is Namespace?
A Namespace is used to group functions, classes, or interfaces under a common name.
 The content of namespaces is hidden by default unless they are exported.
 Use nested namespaces if required.
 The function or any construct which is not exported cannot be accessible outside the namespace.

Creating and using Namespaces

VLITS, Vadlamudi. Page 26

 Unit-4 – TypeScript MEAN Stack Development

In the below example, create a namespace called Utility and group a function MaxDiscountAllowed and
a nested namespace called payment inside it.

To import the namespace and use it, make use of the triple slash reference tag.

The file in which the namespace is declared and the file which uses the namespace to be compiled
together. It is preferable to group the output together in a single file. You have an option to do that by
using the --outFile keyword.

What is a Module?
Modules help us in grouping a set of functionalities under a common name. The content of modules
cannot be accessible outside unless exported.

Precede export keyword to the function, class, interface, etc.. which you need to export from a module.

VLITS, Vadlamudi. Page 27

 Unit-4 – TypeScript MEAN Stack Development

Exporting from a Module

The constructs of a module can be exported by one of the below approaches:
1. Adding an export keyword in front of a function or a class or an interface
2. Adding an export keyword to a block of statements

Importing a Module
Using the import keyword, you can import a module within another module or another TypeScript
file. Provide the file name as the module name while importing.
Once the module is imported, make use of the classes and other constructs exported from the module.

Also, alias names can be used while importing/exporting a module.

VLITS, Vadlamudi. Page 28

 Unit-4 – TypeScript MEAN Stack Development

Compiling Module
To compile the modules and the file which is using the module, compile them together using the tsc
command.

Module Formats and Loaders

Module format is the syntax that is used to define a module in JavaScript.
Modules in TypeScript can be compiled to one of the module formats given below:

Commonly we compile the modular code in TypeScript to ES2015 format by using the --module ES2015
keyword while performing the compilation.

If none of the formats are mentioned in the compiler option, by default CommonJS module format will
be the one that gets generated while compiling modules in TypeScript.
A module loader interprets and loads a module written in a certain module format as well as helps in
importing all the dependent modules into developer working environment. At the runtime, they play a
very vital role in loading and configuring all needed dependencies modules before executing any linked
module.
The most commonly used module loaders in JavaScript are:
SystemJS module loader for modules in AMD, CommonJS, UMD, or System.register format

VLITS, Vadlamudi. Page 29

 Unit-4 – TypeScript MEAN Stack Development

Require.js module loader for modules in AMD format.

On-demand functionalities can be loaded by Modules, which is known as lazy loading. By using this
feature while executing our application all the declared modules are not loaded at that moment, it only
loads needed modules that are needed by the user to render the initial look of the application on the first
load. Due to this concept performance of the application can be enhanced as the initial startup time of the
application automatically decreases.

Default Exports
 Default export is used to export any one of the constructs such as class, interface, function, and so on
from the current module as a default one.
 Default exports are handy in case you need to export a class that has almost all functionalities
attached, such as javascript library object jQuery.
 Name for the default exported constructs are optional. You can assign a name to the default construct
while importing it into the other file.
 As you cannot have more than one default export per module.

Module Vs Namespace:
Module Namespace
Organizes code Organizes code
Have native support with Node.js module loader. All
No special loader required
modern browsers are supported with a module

VLITS, Vadlamudi. Page 30

 Unit-4 – TypeScript MEAN Stack Development

loader.
ES2015 does not have a Namespace concept. It is
Supports ES2015 module syntax mainly used to prevent global namespace
pollution.
Suited for large-scale applications Suited for small-scale applications

Why Generics?
Generics helps us to avoid writing the same code again for different data types.
In TypeScript, generics are used along :
 with function to invoke the same code with different type arguments
 with Array to access the same array declaration with a different set of typed values
 with Interface to implement the same interface declaration by different classes with different
types
 with a class to access the same class with different types while instantiating it
What is Generics?
Generics is a concept using which we can make the same code work for multiple types.
It accepts type parameters for each invocation of a function or a class or an interface so that the same
code can be used for multiple types.
Consider the below code where you implement a similar function for two different types of data:

Avoid writing the same code again for different types using generics. Let us rewrite the above code using
generics:

What are Type Parameters?

Type Parameters are used to specify the type, a generic will work over.
They are listed using an angle bracket<>.
The actual type will be provided while invoking function or instance creation.
Consider a generic function given below:

VLITS, Vadlamudi. Page 31

 Unit-4 – TypeScript MEAN Stack Development

To access this function with different types you will use the below code:

Generic Array:
Using Array<T>
Array<T> provides us the option to use the same array declaration for different types of data when used
along with a function.
<T> here represents the type parameter.

Generic Functions
Generic functions are functions declared with generic types.
Declaring generic function is done using the type parameter and using the same type variable for the
parameter and the return type.

Generic Interface
Generic interface is an interface that works with multiple types.

VLITS, Vadlamudi. Page 32

 Unit-4 – TypeScript MEAN Stack Development

This interface can be implemented by different classes with their own types.

Generic Class
Generic class is a class that works with multiple types.

VLITS, Vadlamudi. Page 33

 Unit-4 – TypeScript MEAN Stack Development

Consider the generic class given below:

The same class instance can be instantiated and invoked with different type parameters.
Generic Constraints
Generic constraints are used to add constraints to the generic type.
Generic constraints are added using the 'extends' keyword.

Consider the below code:

Here you are trying to access the length property of the function type parameter.
Since the parameter type will get resolved only at run time, this line will throw compilation

To resolve this, you can add a constraint with the type parameter.
If you need to access a property on the type parameter, add those properties in an interface or class and
extend the type parameter from the declared interface or class.
Let us rewrite the previous code:

To invoke this generic function, you can pass any parameter which has a length property.

VLITS, Vadlamudi. Page 34

 Unit-4 – TypeScript MEAN Stack Development

VLITS, Vadlamudi. Page 35