TYPESCRIP

T
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.
 TypeScript enables you to develop a highly
structured, less error-prone JavaScript code using
TypeScript features.
NEED FOR TYPESCRIPT
 JavaScript is used for client-side scripting to do
client-side validations, DOM manipulation
and also, 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.
 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.
 Interpreted Language: It is a language in which the

code instructions are executed directly without prior

compilation to machine-language instructions.

 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
 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.
 Example: Same JavaScript function using
TypeScript
 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 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
 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?
 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
 FEATURES OF TYPESCRIPT
 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.
 Supports Object-Oriented Programming: such as
class, encapsulation, interface, inheritance and so on
which helps in creating highly structured and reusable
code.
FEATURES OF TYPESCRIPT

 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.
 As mentioned on the official site, you need to
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.
 Open Node.js command prompt, execute the
below commands as shown below to download
the TypeScript node module.

npm i –g typescript

or

npm install –g typescript

 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.

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.

 Run the compiled js file using node command.

TYPESCRIPT BASICS
 Consider 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.
 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.

 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.
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.
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.
 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,
JavaScript has introduced let and const as two n
ew 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.
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.
DIFFERENCE BETWEEN VAR AND LET
KEYWORD

 Due to these reasons let declaration is preferred

over var declaration.
DECLARING VARIABLES USING CONST
KEYWORD
 The value cannot be re-assigned to the variable.
 const declared variables are mutable if declared

as an array or as an object literal.

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.
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
 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

 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
 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.

 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 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.
 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:
 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
 Arrays are used to represent a collection of similar
objects, whereas tuples are used to represent a
collection of different objects.
 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 compilation error will be thrown in below two

cases:
 if you are trying to assign multiple entries in the
first initialization.
 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?
 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.
 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.
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.
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.
 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, 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
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

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.

 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.
HOW TO CREATE AN INTERFACE?
DUCK TYPING
 Duck-Typing is a rule for checking the type
compatibility for more complex variable types.
 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.
 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.
FUNCTION TYPES
 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

 Use implements keyword to implement interface

inside a class.

 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
 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.
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
PROTECTED ACCESS MODIFIER
 STATIC ACCESS MODIFIER
 Static 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.
 Instead of this declare the parameter itself with
any of the access modifiers and reduce the lines
of code used for the initialization.
 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.

 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.
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.

 A namespace is a programming concept that

gives identifiers (names of types, functions,

variables, etc.) scope to avoid name conflicts.

For instance, a program may need to use the

same variable name in many contexts.

 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
 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.
 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.
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

 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
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:
 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.
 This interface can be implemented by different
classes with their own types.
GENERIC CLASS
 Generic class is a class that works with multiple
types.
 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.
 To invoke this generic function, you can pass any
parameter which has a length property.
Thank You