Angular Training

Session -8
Outlines

Revisiting JS

TypeScript
Revisiting JS

1. let,const
2. Object Destructuring,Object Literals
3. Arrow Functions
4. Rest,Spread Operator
5. Template Literal
6. Promises
7. Classes
TypeScript
- What is TypeScript?
- Installation
- Hello World
- Why TypeScript?
- Basic Type

Agenda -
-
Function & Class
Interface
- Generic
- Enum
- Who Use TypeScript?
- Conclusion
- Q&A
- References
What is TypeScript?

Add new features &

JavaScript Superset
advantages to JavaScript

Language building up on
Browser CAN’T execute it!
JavaScript
What is TypeScript?
What is TypeScript?

TypeScript (.ts)

TypeScript Compiler

Javascript (.js)
Installation

The following tools you need to setup to

start with TypeScript:
- Node js
- TypeScript compiler
- IDE (VsCode)

npm install -g typescript

tsc --v

Version 4.0.2
Hello World

You will see the output as

compile the app.ts file
Hello, World!
Why TypeScript?

There are three main reasons to use TypeScript:

- TypeScript adds a strongly-type system to help you avoid many

problems with dynamic types in JavaScript.

- TypeScript always point out the compilation errors at the time of

development.

- TypeScript implements the future features of JavaScript ES Next so

that you can use them today.
-
- Write code better with architecture.
Why TypeScript?
Why TypeScript?
Basic Type

TypeScript inherits the built-in types from JavaScript. TypeScript types is categorized into:
- Primitive type
- Objective Type
Object types:

- Function
- Arrays
- Classes
- Objects
- Tuples
- Enum
Function

TypeScript functions are the building blocks of readable, maintainable, and reusable code.
Function
Function: overloading
Function: overloading
Function: overloading
Overloading function
Class
ES5
Class
ES6
Class
TypeScript
Class: inheritances
Interface
Interface
Interface: extend one interface
Generic
Generic
Using the any type
Generic
TypeScript Generic comes to rescue
Generic: constraints
Generic: constraints
Generic: constraints
Generic: interface
Enum

Without enum With enum

Enum
Who use TypeScript?
Conclusion
-TypeScript simplifies JavaScript code making it easier to read and understand.
- It gives us all the benefits of ES6, plus more productivity.

- Help us avoid painful bugs by type checking.

- Structural, rather than nominal

Any
Questions?
References

- prototype inheritance
- ES6 allowed you to define a class
- https://www.typescripttutorial.net/
- https://www.typescriptlang.org/
- TypeScript type annotations
TypeScript
Installing and Compiling TypeScript
npm install -g typescript tsc app.ts

export {};
function welcomePerson(person) {
console.log(`Hey ${person.firstName} ${person.lastName}`);
return `Hey ${person.firstName} ${person.lastName}`;
}

const james = {
firstName: "James",
lastName: "Quick"
};
welcomePerson(james);
export {};
function welcomePerson(person: Person) {
console.log(`Hey ${person.firstName} ${person.lastName}`);
return `Hey ${person.firstName} ${person.lastName}`;
}
const james = {
firstName: "James",
lastName: "Quick"
};
welcomePerson(james);
interface Person {
firstName: string;
lastName: string;
}
Creating a TypeScript Config File

tsc --init