BCA

SEMESTER – 3

0302302

INTRODUCTION TO ANGULAR
UNIT -2 Introduction to Typescript

●
Introduction to TypeScript
●
Datatypes and Variables
●
Writing and Using Classes
●
Constructor Method

UNIT - 2 Intro. to Typescript 2

UNIT -2 Introduction to TypeScript

●
"TypeScript is JavaScript for application-scale development.”
●
TypeScript is a strongly typed, object oriented, compiled
language.
●
It was designed by Anders Hejlsberg (designer of C#) at
Microsoft.
●
TypeScript is both a language and a set of tools.
●
TypeScript is a typed superset of JavaScript compiled to
JavaScript.
●
In other words, TypeScript is JavaScript plus some additional
features.

UNIT - 2 Intro. to Typescript 3

UNIT -2 Introduction to TypeScript

UNIT - 2 Intro. to Typescript 4

What is TypeScript?

●
TypeScript is an open-source pure object-oriented
programing language.
●
It is a strongly typed superset of JavaScript which
compiles to plain JavaScript.
●
It contains all elements of the JavaScript. It is a language
designed for large-scale JavaScript application
development, which can be executed on any browser, any
Host, and any Operating System.
●
The TypeScript is a language as well as a set of tools.

UNIT - 2 Intro. to Typescript 5

●
TypeScript cannot run directly on the browser.
●
It needs a compiler to compile the file and generate it in
JavaScript file, which can run directly on the browser.
●
The TypeScript source file is in ".ts" extension.
●
We can use any valid ".js" file by renaming it to ".ts" file.
●
TypeScript uses TSC (TypeScript Compiler) compiler,
which convert Typescript code (.ts file) to JavaScript (.js
file).

UNIT - 2 Intro. to Typescript 6

Why use TypeScript?
●
TypeScript supports object-oriented programming features
such as classes, interfaces, inheritance, generics, etc.
●
TypeScript is fast, simple, and most importantly, easy to
learn.
●
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.
●
TypeScript supports all JavaScript libraries because it is
the superset of JavaScript.
●
Developers can save a lot of time with TypeScript.

UNIT - 2 Intro. to Typescript 7

Difference between JavaScript and TypeScript

Advantage of TypeScript over JavaScript

●
TypeScript always highlights errors at compilation time
during the time of development, whereas JavaScript points
out errors at the runtime.
●
TypeScript supports strongly typed or static typing,
whereas this is not in JavaScript. TypeScript runs on any
browser or JavaScript engine.
●
Great tooling supports with IntelliSense which provides
active hints as the code is added.

UNIT - 2 Intro. to Typescript 8

 Disadvantage of TypeScript over JavaScript
●
TypeScript takes a long time to compile the code.
●
TypeScript does not support abstract classes.
●
If we run the TypeScript application in the browser, a
compilation step is required to transform TypeScript into
JavaScript.

UNIT - 2 Intro. to Typescript 9

TypeScript Vs. JavaScript

UNIT - 2 Intro. to Typescript 10

UNIT - 2 Intro. to Typescript 11
Features of TypeScript

UNIT - 2 Intro. to Typescript 12

●
Object-Oriented language: TypeScript provides a complete feature of an
object-oriented programming language such as classes, interfaces,
inheritance, modules, etc. In TypeScript, we can write code for both client-
side as well as server-side development.

●
TypeScript supports JavaScript libraries: TypeScript supports each
JavaScript elements. It allows the developers to use existing JavaScript
code with the TypeScript. Here, we can use all of the JavaScript
frameworks, tools, and other libraries easily.

●
JavaScript is TypeScript: It means the code written in JavaScript with
valid .js extension can be converted to TypeScript by changing the
extension from .js to .ts and compiled with other TypeScript files.

UNIT - 2 Intro. to Typescript 13

●
TypeScript is portable: TypeScript is portable because it can be
executed on any browsers, devices, or any operating systems. It
can be run in any environment where JavaScript runs on. It is not
specific to any virtual-machine for execution.

●
DOM Manipulation: TypeScript can be used to manipulate the
DOM for adding or removing elements similar to JavaScript.

●
TypeScript is just a JS: TypeScript code is not executed on any
browsers directly. The program written in TypeScript always starts
with JavaScript and ends with JavaScript.

UNIT - 2 Intro. to Typescript 14

Components of Type Script

– Language − It comprises of the syntax, keywords, and type annotations.

– The TypeScript Compiler − The TypeScript compiler (tsc) converts the

instructions written in TypeScript to its JavaScript equivalent.

– The TypeScript Language Service − The "Language Service" exposes

an additional layer around the core compiler pipeline that are editor-like
applications. The language service supports the common set of a
typical editor operations like statement completions, signature
help, code formatting and outlining, colorization, etc.

UNIT - 2 Intro. to Typescript 15

●
Type Script Compiler
– tsc one.ts
– node one.js

One.ts

UNIT - 2 Intro. to Typescript 16

●
Compile and Execute a TypeScript Program
– Let us see how to compile and execute a TypeScript program
using Visual Studio Code. Follow the steps given below −

Step 1 − Save the file with .ts extension. We shall save the
file as Test.ts. The code editor marks errors in the code, if any,
while you save it.

Step 2 − Right-click the TypeScript file under the Working

Files option in VS Code’s Explore Pane. Select Open in
Command Prompt option.

UNIT - 2 Intro. to Typescript 17

●
Compile and Execute a TypeScript Program
– Step 3 − To compile the file use the following command
on the terminal window.
tsc Test.ts
– Step 4 − The file is compiled to Test.js. To run the
program written, type the following in the terminal.
node Test.js

UNIT - 2 Intro. to Typescript 18

Typescript composition

A TypeScript program is composed of −

●
Modules
●
Functions
●
Variables
●
Statements and Expressions
●
Comments

UNIT - 2 Intro. to Typescript 19

TypeScript Variables

●
A variable is the storage location, which is used to store
value/information to be referenced and used by programs.
●
These rules are-
– The variable name must be an alphabet or numeric
digits.
– The variable name cannot start with digits.
– The variable name cannot contain spaces and special
character, except the underscore(_) and the dollar($)
sign.

UNIT - 2 Intro. to Typescript 20

Variable Declaration in TypeScript

1. Declare its type and value in one statement

Eg:var name:string = ”mary”;

2. Declare its type but no value. In this case, the variable will be set to
undefined.

Eg : var name:string;

UNIT - 2 Intro. to Typescript 21

3. Declare its value but no type. The variable type will be
set to the data type of the assigned value.

Eg: var name = ”mary”

4. Declare neither value not type. In this case, the data
type of the variable will be any and will be initialized to
undefined.

Eg: var name;

UNIT - 2 Intro. to Typescript 22

UNIT -2 Data Type and Variabel -

●
Identifiers in TypeScript
– Identifiers are names given to elements in a program like variables,
functions etc. The rules for identifiers are −

●
Identifiers can include both, characters and digits. However, the
identifier cannot begin with a digit.
●
Identifiers cannot include special symbols except for underscore (_)
or a dollar sign ($).
●
Identifiers cannot be keywords.
●
They must be unique.
●
Identifiers are case-sensitive.
●
Identifiers cannot contain spaces.

UNIT - 2 Intro. to Typescript 23

UNIT -2 Data Type and Variabel -

●
keywords
break as any switch
case If else throw
var number string get
Moduel type Instanceof typeof
Public private enum export
finally For while void
null super this new
in return true false
any extends static let
package implements interface function
new try yield const
continue Do catch

UNIT - 2 Intro. to Typescript 24

UNIT -2 Data Type and Variabel -

●
TypeScript is Case-sensitive
– TypeScript is case-sensitive. This means that
TypeScript differentiates between uppercase and
lowercase characters.
●
Comments in TypeScript
– TypeScript supports the following types of comments −
●
Single-line comments ( // ) − Any text between a //
and the end of a line is treated as a comment
●
Multi-line comments (/* */) − These comments may
span multiple lines.

UNIT - 2 Intro. to Typescript 25

UNIT -2 Data Types

UNIT - 2 Intro. to Typescript 26

UNIT -2 Data Type and Variabel -

●
Any Type
– The any data type is the super type of all types in
TypeScript. It denotes a dynamic type. Using the any
type is equivalent to opting out of type checking for a
variable.
●
User-defined Types
– User-defined types include Enumerations (enums),
classes, interfaces, arrays, and tuple.

UNIT - 2 Intro. to Typescript 27

UNIT -2 Data Type and Variabel -

●
Buit – in Type

Data Type Keyword Description

Double precision 64-bit floating point values. It

Number Number can be used to represent both, integers and
fractions.
String string Represents a sequence of Unicode characters

Boolean boolean Represents logical values, true and false

Used on function return types to represent non-
Void void
returning functions
Represents an intentional absence of an object
Null nll
value.
undefined undefined Denotes value given to all uninitialized variables

UNIT - 2 Intro. to Typescript 28

UNIT -2 Data Type and Variabel -

●
TypeScript Variable Scope
– The scope of a variable specifies where the variable is
defined. The availability of a variable within a program
is determined by its scope. TypeScript variables can be
of the following scopes −
– Global Scope − Global variables are declared
outside the programming constructs. These
variables can be accessed from anywhere within your
code.

UNIT - 2 Intro. to Typescript 29

UNIT -2 Data Type and Variabel -

●
TypeScript Variable Scope
– Class Scope − These variables are also called fields.
Fields or class variables are declared within the class
but outside the methods. These variables can be
accessed using the object of the class. Fields can also be
static. Static fields can be accessed using the class name.

– Local Scope − Local variables, as the name suggests,

are declared within the constructs like methods, loops
etc. Local variables are accessible only within the construct
where they are declared.
type_assertion.ts

UNIT - 2 Intro. to Typescript 30

UNIT -2 Operator-

●
The major operators in TypeScript can be classified as −
– Arithmetic operators
– Logical operators
– Relational operators
– Bitwise operators
– Assignment operators
– Ternary/conditional operator
– String operator
– Type Operator

UNIT - 2 Intro. to Typescript 31

UNIT -2 Operator- Arithmetic Operator

UNIT - 2 Intro. to Typescript 32

UNIT -2 Operator- Relation Operator

UNIT - 2 Intro. to Typescript 33

UNIT -2 Operator- Logical Operator

UNIT - 2 Intro. to Typescript 34

UNIT -2 Operator- Bitwise Operator

UNIT - 2 Intro. to Typescript 35

UNIT -2 Operator- Assignment Operator

UNIT - 2 Intro. to Typescript 36

UNIT -2 Operator-

●
The major operators in TypeScript can be classified as
−
– Miscellaneous Operators
●
negation operator (-)
●
String Operators: Concatenation operator (+)
●
Conditional Operator (?)
●
typeof operator

UNIT - 2 Intro. to Typescript 37