SlideShare a Scribd company logo
3
Most read
14
Most read
15
Most read
Typescript
• What's Typescript?
• Type Annotation
• Functions
• Class
• Inheritance
• Module
• Interface
• Generics
• Declaration source files (*.d.ts)
• New features
Agenda
• JavaScript is not originally designed for large complex applications (mostly a scripting language, with
functional programming constructs), lacks structuring mechanisms like Class, Module, Interface.
• Typescript is a typed superset of JavaScript that compiles to plain JavaScript.
• Adds additional features like Static Type (optional), Class, Module etc. to JavaScript
• Microsoft technology.
• Open Source.
• Versions.
• First made public in October 2012.
• Latest version - Typescript 1.7.
What’s Typescript?
• Any
• Any Type is a super set of all types
• var x : any;
• var y;
• Primitive
• Number
• Does not have separate integer and float/double type.
• var num : number = 20;
• var num = 20;
• String
• Both single quote or double quotes can be used.
• var name : string = “hello”;
• var name =’hello’;
• Bool
• var isOpen =true;
Type Annotation
• Void
• Used as the return type of functions that don’t return any value
• Object Types
• class, interface, module.
• Array
• Array types can be written in:
• var list: number[] = [1, 2, 3];
• var list: Array<number> = [1, 2, 3];
• var list:any[] = [1, true, "free"]
• Enum
• enum Color { Red, Green, Blue };
• var color = Color.Blue;
Type Annotation
• Tuple
• Tuple types allow you to express an array where the type of a fixed number of elements is known.
• var x: [string, number];
x = ['hello', 10];
Type Annotation
• Design time feature. No additional code is emitted in the final JavaScript that TypeScript compiler
produces.
• If there’s a type mismatch TypeScript shows a warning.
Type Annotation
• Type Annotation for parameter and return type.
• Optional and Default Parameter.
• Function Overloads.
• Fat Arrow functions.
• Rest parameters.
• denoted by ‘...argumentName’ for the last argument allow you to quickly accept multiple
arguments in your function and get them as an array.
Functions
• Properties and fields to store data
• Methods to define behavior
Class
• Typescript supports inheritance of class through extends keyword
• super keyword.
Inheritance
• Modules can be defined using module keyword.
• A module can contain sub module, class, interface or enum.
• Class, Interfaces , functions can be exposed using export keyword.
• Adding file references. - /// <reference path=“filename.ts" />
Module
• Declared using interface keyword
• TS compiler shows error when Interface signature and implementation does not match
• Optional properties can be declared for an interface (using ?)
Interface
• Able to create a component that can work over a variety of types rather than a single one.
function identity<T>(arg: T): T {
return arg;
}
• type argument inference - we want the compiler to set the value of T for us automatically based on
the type of the argument we pass in.
Generics
• The purpose of these files is to provide some typing information for JavaScript libraries.
• These files do not compile to .js files, simply describe their JavaScript implementations, and act as their
representative.
• Contains typing info.
• http://definitelytyped.org/
Declaration source files (*.d.ts)
• await & async
• for..of – iteration.
• Exponentiation operators - ** and **=
• Spread operator
New features

More Related Content

PPT
TypeScript Presentation
DOCX
Software engineering Questions and Answers
PDF
TypeScript: coding JavaScript without the pain
PDF
Ngrx slides
PPTX
TypeScript Overview
PPTX
Typescript in 30mins
PDF
TypeScript
PPTX
Normal distribution
TypeScript Presentation
Software engineering Questions and Answers
TypeScript: coding JavaScript without the pain
Ngrx slides
TypeScript Overview
Typescript in 30mins
TypeScript
Normal distribution

What's hot (20)

PDF
TypeScript - An Introduction
PDF
TypeScript Introduction
PPTX
TypeScript intro
PPTX
Typescript Fundamentals
PPTX
Introducing type script
PDF
TypeScript Best Practices
PPTX
Getting started with typescript
PPTX
TypeScript VS JavaScript.pptx
PDF
The New JavaScript: ES6
PPT
Introduction to Javascript
PPTX
Why TypeScript?
PPTX
Reactjs
PDF
Basics of JavaScript
PDF
Javascript essentials
PPT
javaScript.ppt
PPTX
Lab #2: Introduction to Javascript
PPT
Javascript
PPSX
Javascript variables and datatypes
PPTX
Introduction to JSX
PPTX
What is component in reactjs
TypeScript - An Introduction
TypeScript Introduction
TypeScript intro
Typescript Fundamentals
Introducing type script
TypeScript Best Practices
Getting started with typescript
TypeScript VS JavaScript.pptx
The New JavaScript: ES6
Introduction to Javascript
Why TypeScript?
Reactjs
Basics of JavaScript
Javascript essentials
javaScript.ppt
Lab #2: Introduction to Javascript
Javascript
Javascript variables and datatypes
Introduction to JSX
What is component in reactjs
Ad

Viewers also liked (17)

PDF
TypeScript Seminar
PDF
Angular 2 - Typescript
PPTX
TypeScript
PDF
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
PDF
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
PDF
Power Leveling your TypeScript
PPTX
Typescript tips & tricks
PPTX
PDF
TypeScript for Java Developers
PDF
Александр Русаков - TypeScript 2 in action
PPTX
Typescript
PPTX
002. Introducere in type script
PDF
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
PPTX
TypeScript - Silver Bullet for the Full-stack Developers
PDF
TypeScript: Angular's Secret Weapon
PDF
Typescript + Graphql = <3
PDF
TypeScriptで快適javascript
TypeScript Seminar
Angular 2 - Typescript
TypeScript
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
Power Leveling your TypeScript
Typescript tips & tricks
TypeScript for Java Developers
Александр Русаков - TypeScript 2 in action
Typescript
002. Introducere in type script
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
TypeScript - Silver Bullet for the Full-stack Developers
TypeScript: Angular's Secret Weapon
Typescript + Graphql = <3
TypeScriptで快適javascript
Ad

Similar to Typescript ppt (20)

PPTX
TypeScript: Basic Features and Compilation Guide
PPTX
TypeScript 101
PPTX
Introduction to C#.pptx for all BSIT students
PDF
Getting Started with the TypeScript Language
PPTX
Typescript: Beginner to Advanced
PPTX
Type-Script-Fundamentals Type-Script-Fundamentals
PDF
Angular - Chapter 2 - TypeScript Programming
PPTX
TypeScript Introduction
PPTX
TypeScript . the JavaScript developer best friend!
PPT
Learning typescript
PDF
End to-end apps with type script
PDF
Scala Days NYC 2016
PPTX
The advantage of developing with TypeScript
PPTX
AngularConf2015
PPTX
PDF
One language to rule them all type script
PDF
Type script
PPTX
Java-Intro.pptx
PPTX
Web technologies-course 07.pptx
TypeScript: Basic Features and Compilation Guide
TypeScript 101
Introduction to C#.pptx for all BSIT students
Getting Started with the TypeScript Language
Typescript: Beginner to Advanced
Type-Script-Fundamentals Type-Script-Fundamentals
Angular - Chapter 2 - TypeScript Programming
TypeScript Introduction
TypeScript . the JavaScript developer best friend!
Learning typescript
End to-end apps with type script
Scala Days NYC 2016
The advantage of developing with TypeScript
AngularConf2015
One language to rule them all type script
Type script
Java-Intro.pptx
Web technologies-course 07.pptx

Recently uploaded (20)

PDF
Convert Thunderbird to Outlook into bulk
PPTX
AIRLINE PRICE API | FLIGHT API COST |
PPTX
Benefits of DCCM for Genesys Contact Center
PPT
JAVA ppt tutorial basics to learn java programming
PDF
Become an Agentblazer Champion Challenge
PDF
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
PPTX
Mastering-Cybersecurity-The-Crucial-Role-of-Antivirus-Support-Services.pptx
PPTX
CRUISE TICKETING SYSTEM | CRUISE RESERVATION SOFTWARE
PDF
Jenkins: An open-source automation server powering CI/CD Automation
PPTX
What to Capture When It Breaks: 16 Artifacts That Reveal Root Causes
PDF
System and Network Administration Chapter 2
PDF
Become an Agentblazer Champion Challenge Kickoff
PDF
IEEE-CS Tech Predictions, SWEBOK and Quantum Software: Towards Q-SWEBOK
PDF
Upgrade and Innovation Strategies for SAP ERP Customers
PDF
2025 Textile ERP Trends: SAP, Odoo & Oracle
PPTX
ai tools demonstartion for schools and inter college
PDF
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
PDF
Multi-factor Authentication (MFA) requirement for Microsoft 365 Admin Center_...
PDF
A REACT POMODORO TIMER WEB APPLICATION.pdf
PDF
How to Choose the Most Effective Social Media Agency in Bangalore.pdf
Convert Thunderbird to Outlook into bulk
AIRLINE PRICE API | FLIGHT API COST |
Benefits of DCCM for Genesys Contact Center
JAVA ppt tutorial basics to learn java programming
Become an Agentblazer Champion Challenge
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
Mastering-Cybersecurity-The-Crucial-Role-of-Antivirus-Support-Services.pptx
CRUISE TICKETING SYSTEM | CRUISE RESERVATION SOFTWARE
Jenkins: An open-source automation server powering CI/CD Automation
What to Capture When It Breaks: 16 Artifacts That Reveal Root Causes
System and Network Administration Chapter 2
Become an Agentblazer Champion Challenge Kickoff
IEEE-CS Tech Predictions, SWEBOK and Quantum Software: Towards Q-SWEBOK
Upgrade and Innovation Strategies for SAP ERP Customers
2025 Textile ERP Trends: SAP, Odoo & Oracle
ai tools demonstartion for schools and inter college
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
Multi-factor Authentication (MFA) requirement for Microsoft 365 Admin Center_...
A REACT POMODORO TIMER WEB APPLICATION.pdf
How to Choose the Most Effective Social Media Agency in Bangalore.pdf

Typescript ppt

  • 2. • What's Typescript? • Type Annotation • Functions • Class • Inheritance • Module • Interface • Generics • Declaration source files (*.d.ts) • New features Agenda
  • 3. • JavaScript is not originally designed for large complex applications (mostly a scripting language, with functional programming constructs), lacks structuring mechanisms like Class, Module, Interface. • Typescript is a typed superset of JavaScript that compiles to plain JavaScript. • Adds additional features like Static Type (optional), Class, Module etc. to JavaScript • Microsoft technology. • Open Source. • Versions. • First made public in October 2012. • Latest version - Typescript 1.7. What’s Typescript?
  • 4. • Any • Any Type is a super set of all types • var x : any; • var y; • Primitive • Number • Does not have separate integer and float/double type. • var num : number = 20; • var num = 20; • String • Both single quote or double quotes can be used. • var name : string = “hello”; • var name =’hello’; • Bool • var isOpen =true; Type Annotation
  • 5. • Void • Used as the return type of functions that don’t return any value • Object Types • class, interface, module. • Array • Array types can be written in: • var list: number[] = [1, 2, 3]; • var list: Array<number> = [1, 2, 3]; • var list:any[] = [1, true, "free"] • Enum • enum Color { Red, Green, Blue }; • var color = Color.Blue; Type Annotation
  • 6. • Tuple • Tuple types allow you to express an array where the type of a fixed number of elements is known. • var x: [string, number]; x = ['hello', 10]; Type Annotation
  • 7. • Design time feature. No additional code is emitted in the final JavaScript that TypeScript compiler produces. • If there’s a type mismatch TypeScript shows a warning. Type Annotation
  • 8. • Type Annotation for parameter and return type. • Optional and Default Parameter. • Function Overloads. • Fat Arrow functions. • Rest parameters. • denoted by ‘...argumentName’ for the last argument allow you to quickly accept multiple arguments in your function and get them as an array. Functions
  • 9. • Properties and fields to store data • Methods to define behavior Class
  • 10. • Typescript supports inheritance of class through extends keyword • super keyword. Inheritance
  • 11. • Modules can be defined using module keyword. • A module can contain sub module, class, interface or enum. • Class, Interfaces , functions can be exposed using export keyword. • Adding file references. - /// <reference path=“filename.ts" /> Module
  • 12. • Declared using interface keyword • TS compiler shows error when Interface signature and implementation does not match • Optional properties can be declared for an interface (using ?) Interface
  • 13. • Able to create a component that can work over a variety of types rather than a single one. function identity<T>(arg: T): T { return arg; } • type argument inference - we want the compiler to set the value of T for us automatically based on the type of the argument we pass in. Generics
  • 14. • The purpose of these files is to provide some typing information for JavaScript libraries. • These files do not compile to .js files, simply describe their JavaScript implementations, and act as their representative. • Contains typing info. • http://definitelytyped.org/ Declaration source files (*.d.ts)
  • 15. • await & async • for..of – iteration. • Exponentiation operators - ** and **= • Spread operator New features

Editor's Notes

  • #4: TypeScript compiler, named tsc, iswritten in TypeScript that can be compiled into regular JavaScript that can be executed in any JavaScript engine in any host. Typescript 0.9, released in 2013, added support for generics Typescript 1.0 was released at Build 2014
  • #5: All numbers in Typescript are floating point values. These floating point numbers get the type 'number'.
  • #7: automatic semicolon insertion
  • #9: -we can also pass functions in functions as arguments