TYPESCRIPT

CHAPTER - 2
 Overview of Typescript

x TypeScript is an open-source, object-oriented language developed and

maintained by Microsoft, licensed under Apache 2 license.

x TypeScript extends JavaScript by adding data types, classes, and other

object-oriented features with type-checking.

x It is a typed superset of JavaScript that compiles to plain JavaScript.

x Official website: https://www.typescriptlang.org

 Features of Typescript

. Cross-Platform : TypeScript runs on any platform that JavaScript runs on. The TypeScript
1

compiler can be installed on any Operating System such as Windows, macOS, and Linux.
2. Object-Oriented Language : TypeScript provides powerful features such as Classes, Interfaces,
and Modules. You can write pure object-oriented code for client-side as well as server-side
development.
3. Static type-checking : TypeScript uses static typing. This is done using type annotations. It
helps type checking at compile time. Thus, you can find errors while typing the code without
running your script each time. Additionally, using the type inference mechanism, if a variable is
declared without a type, it will be inferred based on its value.
 Features of Typescript

4. Optional Static Typing : TypeScript static typing is optional, if you

1

prefer to use JavaScript's dynamic typing.

5. DOM Manipulation : Like JavaScript, TypeScript can be used to

manipulate the DOM.

6. ES 6 Features : TypeScript includes most features of planned

ECMAScript 2015 (ES 6, 7) such as class, interface, Arrow functions etc.
 TypeScript Advantages

1. TypeScript is an open-source language with continuous development and maintenance by Microsoft.

2. TypeScript runs on any browser or JavaScript engine.
3. TypeScript is similar to JavaScript and uses the same syntax and semantics. All of TypeScript's code
finally gets converted into JavaScript. This allows a quicker learning curve for front-end developers
currently coding in JavaScript.
4. TypeScript is also closer in syntax to backend languages like Java and Scala. This helps backend
developers write front-end code faster.
5. TypeScript code can be called from an existing JavaScript code. TypeScript also works with existing
JavaScript frameworks and libraries without any issues.
 TypeScript Advantages

6. The TypeScript Definition file, with .d.ts extension, provides support for existing JavaScript libraries
like JQuery, D3.js, etc. So, TypeScript code can add JavaScript libraries using type definitions to avail the
benefits of type-checking, code auto-completion, and documentation
In existing dynamically-typed JavaScript libraries.

7. TypeScript has support for the latest JavaScript features from ECMAScript 2015. It includes features
from ES6 and ES7 that can run in ES5-level JavaScript engines like Node.js. This offers a massive
advantage of using features from future JavaScript versions in current JavaScript engines.

8. TypeScript has easy integration with task runner tools like Grunt and Gulp to automate the workflow.
TypeScript Architecture
Language : It features the TypeScript language ,elements. It consists of syntax, keywords,
and type annotations.
The TypeScript Compiler : The TypeScript compiler (tsc) changes the instructions written
in TypeScript to its JavaScript equivalent.
Example
$ tschelloworld.ts //
It compiles the TS file helloworld into the helloworld.js file
The TypeScript Language Service − The “Language Service” reveals an extra layer around
the core language service assists the common set of typical editor operations like statement
completion, signature help, code formatting and outlining, colorization, etc.
Types of Typescript
TypeScript Data Types Syntax

[Keyword] [Variable Name]: [Data Type] = [Value];

[Keyword] [Variable Name]: [Data Type];

let uname: string = "Vaishali Kavathekar";

console.log("Name:" + uname);
x An Operator is a symbol which operates on a value or data.
x It represents a specific action on working with data.
x The data on which operators operates is called operand.
x It can be used with one or more than one values to produce a single value.
x All of the standard JavaScript operators are available with the TypeScript program.
x Example
10 + 20 = 30;
In the above example, the values ‘10’, ‘20’ and ‘30’ are known as an operand, whereas
'+' and '=' are known as
operators.
DECISION MAKING IN TYPESCRIPT
Var num:number = 2
if(num> 0) {
console.log(num+" is positive")
} else if(num< 0) {
console.log(num+" is negative")
} else {
console.log(num+" is neither positive nor negative")
}
LOOPS IN TYPESCRIPT
x A loop whose number of iterations are definite/fixed is
termed as a definite loop. The for loop is an implementation of a definite loop.
x The for loop executes the code block for a specified
number of times. It can be used to iterate over a fixed
set of values, such as an array.

var num:number = 5;

var i:number;

var factorial = 1;

for(i = num;i>=1;i--) {

factorial *= i;

console.log(factorial);
x An indefinite loop is used when the number of
iterations in a loop is indeterminate or unknown.
x Indefinite loops can be implemented using while and do...while loop.

var num:number = 5;
var factorial:number = 1;
while(num>=1) {
factorial = factorial * num;
num--;
}
console.log("The factorial is "+factorial);
 TYPESCRIPT FUNCTIONS

1. Code reusability : We can call a function several times without writing the same block of code
again. The code reusability saves time and reduces the program size.
2. Less coding : Functions makes our program compact. So, we don't need to write many lines of code
each time to perform a common task.
3. Easy to debug : It makes the programmer easy to locate and isolate faulty information.
//Function Definition

function display() {

console.log("Hello WebX.0!");

//Function Call

display();
TypeScript Arrow Function (Lambda Function)

1. When we don't need to keep typing function.

2. It lexically captures the meaning of this keyword.
3. It lexically captures the meaning of arguments.
x Parameters: A function may or may not have
parameters.
x The arrow notation/lambda notation (=>).
x Statements: It represents the function's instruction set.
 et sum = (x: number, y: number): number => {
return x + y;
}
console.log(sum(10, 20)); //returns 30
l

x In the above example, sum is an arrow function. (x:number, y:number) denotes the
parameter types, :number specifies the return type. The fat arrow =>

separates the function parameters and the function body. The right side of => can contain
one or more code statements.
 TypeScript Function Overloading

1. The function name is the same

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

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.
function add(a:string, b:string):string;
function add(a:number, b:number): number;
function add(a: any, b:any): any {
return a + b;
}
console.log(add("Hello ", "Steve")); // returns "Hello Steve"
console.log(add(10, 20)); // returns 30

let sum = (x: number, y: number): number => {

return x + y;
}
console.log(sum(10, 20)); //returns 30
 TYPESCRIPT CLASSES AND OBJECTS

//Defining a Student class.

class Student {

Sid:number;

Sname:string;

//creating method or function

display():void {

console.log("Student ID is: "+this.Sid)

console.log("Student Name is: "+this.Sname)

}
 Data Hiding

x It is a technique which is used to hide the internal object details.

x A class can control the visibility of its data members from the members of the other classes.
This capability is termed as encapsulation or data-hiding.

x OOPs uses the concept of access modifier to implement the encapsulation.

x The access modifier defines the visibility of class data member outside its defining class.

x TypeScript supports the three types of access modifier. These are: Public, Private and
Protected.
class Student {
public studCode: number;
studName: string;
}
let stud = new Student();
stud.studCode = 101;
stud.studName = "Sachin Shah";
console.log(stud.studCode+ " "+stud.studName);