1 of 108

TYPESCRIPT

Dr.K.R.Prasanna Kumar AP(Sr.G)/IT

3 of 108

Contents to be covered

4 of 108

Typescript Introduction

Typescript instead of Express JS

5 of 108

What is TypeScript?�

TypeScript is a syntactic superset of JavaScript which adds static typing.
This basically means that TypeScript adds syntax on top of JavaScript, allowing developers to add types.

6 of 108

Why should I use TypeScript?�

JavaScript is a loosely typed language. It can be difficult to understand what types of data are being passed around in JavaScript.
In JavaScript, function parameters and variables don't have any information
TypeScript allows specifying the types of data being passed around within the code, and has the ability to report errors when the types don't match.
For example, TypeScript will report an error when passing a string into a function that expects a number. JavaScript will not.

7 of 108

Features of Type Script

8 of 108

More about Type Script

9 of 108

Frameworks using Typescript

10 of 108

Installation steps

11 of 108

Installation steps

npm install –g typescript

tsc -v

12 of 108

Installation of visual studio code

Download and install visual studio code from the below link

https://code.visualstudio.com/download

13 of 108

Check the installed version of TypeScript

Checking installed version in cmd prompt

Checking installed version in visual studio code

14 of 108

Typescript Basics

15 of 108

TypeScript and ECMAScript�

The ECMAScript specification is a standardized specification of a scripting language
TypeScript adopts its basic language features from the ECMAScript5 specification, i.e., the official specification for JavaScript.
TypeScript language features like Modules and class-based orientation are in line with the EcmaScript 6 specification.
Additionally, TypeScript also embraces features like generics and type annotations that aren’t a part of the EcmaScript6 specification.

16 of 108

Typescript and Javascript relationship

17 of 108

TypeScript History

18 of 108

Components of TypeScript

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.

19 of 108

Typescript code is written in a file with .ts extension and then compiled into JavaScript using the Typescript compiler.
Example: tsc program.ts
tsc-typescript compiler is a source-to-source compiler (transcompiler / transpiler)
On compilation ts file is converted into js file. We can able to see additional file in a folder named program.js
Then a javascript code generated on compilation should be run as node program.js�

20 of 108

Sample Program Execution

1.simplehello.ts

Compile the code tsc 1.simplehello.ts

After compilation 1.simplehello.js file can be generated

tsc program_name.ts

21 of 108

Sample Program Execution

1.simplehello.js

Run the js code node 1.simplehello.js

22 of 108

Sample program Addition

23 of 108

Sample program- Static type checking

Static type-checking
I nterface
Class
Module
help programmers to write clean and more scalable code that can be shared across teams

24 of 108

TypeScript - Type Annotations

Used to specify the type using :Type after the name of the variable, function parameter or object property

27 of 108

Scope

Global Scope − Global variables are declared outside the programming constructs. These variables can be accessed from anywhere within your code.
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 e

28 of 108

Declaring Variables

29 of 108

Var Keyword

Variables defined inside a function are not accessible (visible) from outside the function.

Local Type Variables

Variables declared within a function, become LOCAL to the function. They can only be accessed from within the function.

30 of 108

Variable declaration :var keyword examples

function scope. This variable has global scope in the function.

31 of 108

Variable declaration :let keyword examples

block-scope :This means that the scope of let variables is limited to their containing block, e.g. function, if else block or loop block

32 of 108

Var vs Let keyword

33 of 108

Advantages of using let over var

Block-scoped let variables cannot be read or written to before they are declared.
Let variables cannot be re-declared

variables cannot be re-declared

34 of 108

Const keyword

35 of 108

Const variabes

The const makes a variable a constant where its value cannot be changed.
Const variables have the same scoping rules as let variables.
Const variables must be declared and initialized in a single statement. Separate declaration and initialization is not supported.

37 of 108

DATA TYPES

38 of 108

any is a type that disables type checking and effectively allows all types to be used.
any can be a useful way to get past errors since it disables type checking, but TypeScript will not be able provide type safety, and tools which rely on type data, such as auto completion, will not work.
You can assign anything to any type and you can perform any operation on any
let v: any = true;�v = "string";

39 of 108

unknown

unknown is a similar, but safer alternative to any.
TypeScript will prevent unknown types from being used
You can assign anything to unknown type but you have to do a type check or type assertion to operate on unknown

let w: unknown = 1; �w = "string"; // no error

40 of 108

const strVariable: unknown = "This is Test Value";

(strVariable as string).toLowerCase();

(OR)

const strVariable: unknown = "This is Test Value";

if (strVariable && typeof strVariable === 'string')

{

strVariable.toLowerCase();

}

41 of 108

undefined & null

undefined and null are types that refer to the JavaScript primitives undefined and null respectively.

let y: undefined = undefined;
let z: null = null;

42 of 108

DATA TYPES

Void:

opposite of any: the absence of having any type at all
return type of functions that do not return a value
variables of type void is not useful - can only assign null

Null & Undefined:

they’re not extremely useful on their own (like Void)

Never:

never is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns

44 of 108

Operators

Arithmetic operators
Logical operators
Relational operators
Bitwise operators
Assignment operators
Ternary/conditional operator
String operator
Type Operator

typeof - returns the data type of the operand.
instanceof -to test if an object is of a specified type or not.

45 of 108

Conditional Operator (?)

Test ? expr1 : expr2

var num:number = -2

var result = num > 0 ?"positive":"non-positive"

console.log(result)

typeof operator

var num = 12

console.log(typeof num);

47 of 108

: ENUM

enums allow us to declare a set of named constants

i.e. a collection of related values that can be numeric or string values.

48 of 108

: ENUM

enums allow us to declare a set of named constants

i.e. a collection of related values that can be numeric or string values.

49 of 108

: ENUM Examples

enums allow us to declare a set of named constants i.e. a collection of related values that can be numeric or string values.

50 of 108

: ARRAY Examples

51 of 108

: ARRAY Examples

52 of 108

: ARRAY Examples

53 of 108

: ARRAY Functions

54 of 108

: ARRAY functions

55 of 108

: ARRAY function Examples

OUTPUT

56 of 108

:TUPLES

ACCESSING TUPLES

Creation of Tuples

57 of 108

:TUPLES examples

58 of 108

Tuples & Arrays

Tuple

an array with fixed size and known datatypes
Used for a static, well-defined array
Can store a combination of datatypes

const nameAge: [string, number] = ['Osinachi', 10011];

structure of the tuple needs to stay the same (a string followed by a number)

Arrays

Can store a combination of datatypes

const nameAge: (string | number)[] = ['Osinachi', 10011];

structure of the array can have any combination of the two types specified (this can be extended to as many types as is required)

59 of 108

Tuples & Arrays

Why Tuples?

to store data in an unchanging array
Example:

employee’s personal information

62 of 108

Functions in typescript Vs javascript

63 of 108

Syntax Function with parameters

64 of 108

Functions in typescript -examples

Output:

65 of 108

Functions in typescript -examples

Output:

Hello World

66 of 108

Optional Parameters

67 of 108

Default Parameters

68 of 108

Rest Parameters

69 of 108

Overloading functions

Overloading: Multiple functions with the same name but different parameter types and return type

In typescript:

Function declaration with different number of parameters and types with same name is supported

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

70 of 108

Function overloading- not possible like this

ERROR

71 of 108

Anonymous Function

Anonymous Functions are functions that are not bound to an identifier i.e., anonymous functions do not have name of the function.
Anonymous functions are used as inline functions.
These are used when the function is used only once and does not require a name.

var varName = function( [arguments] ) {

// function body

}

75 of 108

A class definition can include the following −

Fields − A field is any variable declared in a class. Fields represent data pertaining to objects
Constructors − Responsible for allocating memory for the objects of the class
Functions − Functions represent actions an object can take. They are also at times referred to as methods

76 of 108

Class example

77 of 108

Class Syntax

78 of 108

Class and instantiation Examples

86 of 108

Interface examples

87 of 108

Extending Interfaces

93 of 108

Method 1�module.ts

94 of 108

Module_im.ts

Output

95 of 108

Method 2�module.ts

96 of 108

Module_im.ts

Output

97 of 108

Method 3�module.ts

98 of 108

Module_im.ts

Output

99 of 108

Method 4�module2class.ts

100 of 108

Method 4�module_im2class.ts

102 of 108

Decorators

103 of 108

Decorators

104 of 108

Decorators

105 of 108

Decorators

Where to use?

class definition
properties
methods
accessors
parameters

106 of 108

Class Decorator - Example

107 of 108

Class Decorator - Example

108 of 108

Thank You

1 of 108

2 of 108

3 of 108

4 of 108

5 of 108

6 of 108

7 of 108

8 of 108

9 of 108

10 of 108

11 of 108

12 of 108

13 of 108

14 of 108

15 of 108

16 of 108

17 of 108

18 of 108

19 of 108

20 of 108

21 of 108

22 of 108

23 of 108

24 of 108

25 of 108

26 of 108

27 of 108

28 of 108

29 of 108

30 of 108

31 of 108

32 of 108

33 of 108

34 of 108

35 of 108

36 of 108

37 of 108

38 of 108

39 of 108

40 of 108

41 of 108

42 of 108

43 of 108

44 of 108

45 of 108

46 of 108

47 of 108

48 of 108

49 of 108

50 of 108

51 of 108

52 of 108

53 of 108

54 of 108

55 of 108

56 of 108

57 of 108

58 of 108

59 of 108

60 of 108

61 of 108

62 of 108

63 of 108

64 of 108

65 of 108

66 of 108

67 of 108

68 of 108

69 of 108

70 of 108

71 of 108

72 of 108

73 of 108

74 of 108

75 of 108

76 of 108

77 of 108

78 of 108

79 of 108

80 of 108