Scribd
Upload
10 views

Angular Session-08

The document outlines an Angular training session on TypeScript that covers: 1. Revisiting JavaScript features like let, const, arrow functions etc. 2. An introduction to TypeScript including what it is, how to install and set it up, the benefits of strong typing, and basic TypeScript types. 3. A detailed overview of TypeScript features like functions, classes, interfaces, generics, enums and how they improve on JavaScript. Real world examples are provided. 4. Who uses TypeScript in practice and a conclusion that emphasizes how TypeScript simplifies code and helps avoid bugs through type checking.

Uploaded by

shubhamsen.hzs
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Angular Session-08

The document outlines an Angular training session on TypeScript that covers: 1. Revisiting JavaScript features like let, const, arrow functions etc. 2. An introduction to TypeScript including what it is, how to install and set it up, the benefits of strong typing, and basic TypeScript types. 3. A detailed overview of TypeScript features like functions, classes, interfaces, generics, enums and how they improve on JavaScript. Real world examples are provided. 4. Who uses TypeScript in practice and a conclusion that emphasizes how TypeScript simplifies code and helps avoid bugs through type checking.

Uploaded by

shubhamsen.hzs
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

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

You might also like