ITC602- Web X.

O
Module 2 : TypeScript

Mrs. Sujata Oak

Assistant Professor
Department of IT
Module 2 : Type Script

https://www.tutorialsteacher.com/typescript/t
ypescript-overview

2 Module 2 : Type Script

Contents

Lecture 7 – Overview , TypeScript Internal Architecture, TypeScript Environment Setup 4

Lecture 8 – TypeScript Types, variables and operators 16

Lecture 9 –Decision Making and loops 21

Lecture 10 –TypeScript Functions

Lecture 11–TypeScript Classes and Objects

Lecture 12–TypeScript Modules

SELF STUDY : Javascript Vs TypeScript

Module 2 : Type Script

3
 Lecture 7

Overview
TypeScript Internal Architecture
TypeScript Environment Setup
Module 2 : Type Script

5 Module 2 : Type Script

Module 2 : Type Script

6 Module 2 : Type Script

 Module 2 : How to Use Type Script?

History of TypeScript : In 2010, Anders Hejlsberg, a core member of the development

team of C# language, started working on TypeScript at Microsoft. 

7 Module 2 : Type Script

 Module 2 : WHY Type Script?

1. TypeScript supports Static typing, Strongly type, Modules, Optional Parameters, etc.

2. TypeScript supports object-oriented programming features such as classes,

interfaces, inheritance, generics, etc.

3. TypeScript is fast, simple, and most importantly, easy to learn.

4. TypeScript provides the error-checking feature at compilation time. It will compile

the code, and if any error found, then it highlighted the mistakes before the script is

run.

5. TypeScript supports all JavaScript libraries because it is the superset of JavaScript.

8 Module 2 : Type Script

 Module 2 : WHY Type Script?

6. TypeScript support reusability because of the inheritance.

7. TypeScript make app development quick and easy as possible, and the tooling support of
TypeScript gives us autocompletion, type checking, and source documentation.
8. TypeScript has a definition file with .d.ts extension to provide a definition for external
JavaScript libraries.
9. TypeScript supports the latest JavaScript features, including ECMAScript 2015.
10. TypeScript gives all the benefits of ES6 plus more productivity.
11. Developers can save a lot of time with TypeScript.

9 Module 2 : Type Script

Module 2 : Type Script

10 Module 2 : Type Script

Module 2 : Type Script

11 Module 2 : Type Script

Module 2 : Components of TypeScript

12 Module 2 : Type Script

 Module 2 : Environment Setup

Pre-requisite to install TypeScript

1.Text Editor or IDE

2.Node.js Package Manager (npm)

3.The TypeScript compiler

Ways to install TypeScript

There are two ways to install TypeScript:

1.Install TypeScript using Node.js Package Manager (npm).

2.Install the TypeScript plug-in in your IDE (Integrated Development Environment).

13 Module 2 : Type Script

 Module 2 : Environment Setup

STEP 1] Install TypeScript using Node.js Package Manager (npm)

To install Node.js on Windows, go to the following link: 

https://www.javatpoint.com/install-nodejs
https://nodejs.org/en/

To verify the installation was successful, enter the following command in the Terminal
Window.

$ node -v  

$ npm -v  

14 Module 2 : Type Script

 Module 2 : Environment Setup

Step-2] Install TypeScript. To install TypeScript

npm install -g typescript       

Step-3 To verify the installation was successful, enter the command 

$ tsc -v 

Step-4 Require Editor to write code

https://code.visualstudio.com/download

15 Module 2 : Type Script

Module 2 : Demo HELLO WORLD Program

HELLO WORLD

16 Module 2 : Type Script

Module 2 : Type Script

17 Module 2 : Type Script

Fundamentals of Type Script : Variables

18 Module 2 : Type Script

Fundamentals of Type Script : Variables

TypeScript variables must follow the JavaScript naming rules −

1.Variable names can contain alphabets and numeric digits.

2.They cannot contain spaces and special characters, except the underscore (_)

and the dollar ($) sign.

3.Variable names cannot begin with a digit.

4.A variable must be declared before it is used. 

19 Module 2 : Type Script

Fundamentals of Type Script : Operators

20 Module 2 : Type Script

Fundamentals of Type Script : Arithmetic Operators

21 Module 2 : Type Script

Fundamentals of Type Script : Logical Operators

22 Module 2 : Type Script

Fundamentals of Type Script : Relational Operators

23 Module 2 : Type Script

Fundamentals of Type Script : Bitwise Operators

24 Module 2 : Type Script

Fundamentals of Type Script : Assignment Operators

25 Module 2 : Type Script

 Fundamentals of Type Script : Decision Making

TypeScript control statement is used to control the flow of program

based on the specified condition.

1. If Statement
2. If else statement
3. if else if statement

If Statement:
If statement is used to execute a block of statements if specified condition
is true.
if(condition){
//Block of
TypeScript
statements. }

26 Module 2 : Type Script

 Fundamentals of Type Script : control statements:

If else statement is used to execute

TypeScript If Else Statement: either of two block of statements
depends upon the condition. If
condition is true then if block will
execute otherwise else block will
execute.
if(condition)
{ //Block of TypeScript
statements1. }else
{ //Block of TypeScript statements2. }

27 Module 2 : Type Script

 Fundamentals of Type Script : control statements:

If else statement is used to execute

TypeScript If Else If Statement: one block of statements from many
depends upon the condition. If
condition1 is true then block of
if(condition1) statements1 will be executed, else if
{ //Block of TypeScript condition2 is true block of
statements1. }else statements2 is executed and so on. If
if(condition2) no condition is true, then else block
{ //Block of TypeScript of statements will be executed
statements2. } . . . else
if(conditionn)
{ //Block of TypeScript
statementsn. }else{
//Block of TypeScript
statements. }

28 Module 2 : Type Script

Fundamentals of Type Script :LOOPS

29 Module 2 : Type Script

Fundamentals of Type Script : Switch

switch(expression) {
case constant-expression1: {
//statements;
break;
}
case constant_expression2: {
//statements;
break;
}
default: {
//statements;
break;
}
}

30 Module 2 : Type Script

Fundamentals of Type Script : BREAK

31 Module 2 : Type Script

Fundamentals of Type Script : CONTINUE

32 Module 2 : Type Script

Fundamentals of Type Script : FUNCTIONS

1. Named Function

2. Anonymous Function

3. Arrow Function

4. Function Overloading

33 Module 2 : Type Script

Fundamentals of Type Script : FUNCTION OVERLOADING

Function overloading is also known as method overloading.

The Function/Method overloading is allowed when:

•The function name is the same
•The number of parameters is different in each overloaded function.
•The number of parameters is the same, and their type is different.
•The all overloads function must have the same return type.

34 Module 2 : Type Script

Fundamentals of Type Script : FUNCTION OVERLOADING

function add(a:string, b:string):string; // Function Declaration

function add(a:number, b:number): number; // Function Declaration

function add(a: any, b:any): any { //Function Implementation

return a + b;

add("Hello ", “Gaurav");

add(10, 20); DEMO

35 Module 2 : Type Script

 Fundamentals of Type Script : FUNCTION OVERLOADING

Function overloading with different number of parameters and types with same name is not
supported.

function display(a:string, b:string):void //Compiler Error: Duplicate

function implementation
{
console.log(a + b);
}

function display(a:number): void //Compiler Error: Duplicate function

implementation
{
console.log(a);
}

DEMO

36 Module 2 : Type Script

Fundamentals of Type Script : FUNCTION OVERLOADING

Advantage of function overloading

1.It saves the memory space so that program execution becomes fast.

2.It provides code reusability, which saves time and efforts.

3.It increases the readability of the program.

4.Code maintenance is easy.

37 Module 2 : Type Script

Fundamentals of Type Script : Classes and Objects

Typescript supports Object-Oriented features.

Class is one of the concept in Object-Oriented Programming.

What Is Class? Collection of multiple Variables and Method

A Class Contains
Constructor


Properties


Methods


When we create a function without a class, we called it a FUNCTION

When we create a function within a class, we called it a Method

38 Module 2 : Type Script

Fundamentals of Type Script : Classes and Objects

39 Module 2 : Type Script

Fundamentals of Type Script : Classes and Objects

What Is an Object?

An Object is an instance of a class

Class Is a Logical Entity

Object Is a Physical Entity

DEMO
40 Module 2 : Type Script
 Fundamentals of Type Script : Classes and Objects DEMO
class Employee {
    eid:number; Created New Class and Object
    ename:string; Initialize Variables using object variables
    deptno:number;

    display():void
    {
        console.log(this.eid);
        console.log(this.ename);
        console.log(this.deptno);
    }
}

var emp1=new Employee();

emp1.eid=101;
emp1.ename="Gaurav";
emp1.deptno=5;
emp1.display();

41 Module 2 : Type Script

 Fundamentals of Type Script : Classes and Objects DEMO
class Employee {
    eid:number; Initialize Variables using Method
    ename:string;
    deptno:number;

setData(eid:number,ename:string,deptno:number):void
{
        this.eid=id;
        this.ename=ename;
        this.deptno=deptno;
}
display():void
    {
        console.log(this.eid);
        console.log(this.ename);
        console.log(this.deptno);
    }
}
var emp1=new Employee();
emp1.setData(110,"Shruti",10);
42 Module 2 : Type Script
Fundamentals of Type Script : Classes and Objects DEMO
Initialize Variables using Constructor
The constructor is a special type of method which is called when
creating an object. In TypeScript, the constructor method is always
defined with the name "constructor".

constructor(eid:number,ename:string,deptno:number)
    {
        this.eid=eid;
        this.ename=ename;
        this.deptno=deptno;
    }

var emp1=new Employee(117,"Mihir",45);

emp1.display();

43 Module 2 : Type Script

Fundamentals of Type Script : Classes and Objects DEMO
Constructor Vs Method

Whenever I created object for Employee class, this constructor

will be invoke. We don’t need to call the constructor explicitly.

BUT,

When we create a method setData() , we have to call this method

through a object.

44 Module 2 : Type Script

Fundamentals of Type Script : Modules

DEMO

45 Module 2 : Type Script

Fundamentals of Type Script : Inheritance

46 Module 2 : Type Script

Fundamentals of Type Script : Inheritance Advantages

47 Module 2 : Type Script

 Fundamentals of Type Script : Inheritance Example

NOTE: We must call super() method first before assigning values to

properties in the constructor of the derived class.

DEMO
48 Module 2 : Type Script
Fundamentals of Type Script : Interfaces

Interfaces define properties, methods, and events, which are the members of
the interface. Interfaces contain only the declaration of the members.

49 Module 2 : Type Script

Fundamentals of Type Script : Data Modifiers

In object-oriented programming, the concept of 'Encapsulation' is

used to make class members public or private i.e. a class can control
the visibility of its data members. This is done using access
modifiers.
There are three types of access modifiers in TypeScript: public,
private and protected.

50 Module 2 : Type Script

Fundamentals of Type Script : Data Modifiers

public
By default, all members of a class in TypeScript are public. All the
public members can be accessed anywhere without any restrictions.
private
The private access modifier ensures that class members are visible
only to that class and are not accessible outside the containing class.

51 Module 2 : Type Script

Module 2 : Type Script

52 Module 2 : Type Script

53