SlideShare une entreprise Scribd logo
1  sur  15
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

Contenu connexe

Tendances

Tendances (20)

Typescript Fundamentals
Typescript FundamentalsTypescript Fundamentals
Typescript Fundamentals
 
Angular components
Angular componentsAngular components
Angular components
 
TypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation GuideTypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation Guide
 
Why TypeScript?
Why TypeScript?Why TypeScript?
Why TypeScript?
 
Type script - advanced usage and practices
Type script  - advanced usage and practicesType script  - advanced usage and practices
Type script - advanced usage and practices
 
TypeScript Best Practices
TypeScript Best PracticesTypeScript Best Practices
TypeScript Best Practices
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
Javascript best practices
Javascript best practicesJavascript best practices
Javascript best practices
 
TypeScript intro
TypeScript introTypeScript intro
TypeScript intro
 
Angularjs PPT
Angularjs PPTAngularjs PPT
Angularjs PPT
 
Angular
AngularAngular
Angular
 
Angular 8
Angular 8 Angular 8
Angular 8
 
NestJS
NestJSNestJS
NestJS
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
Javascript
JavascriptJavascript
Javascript
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 
React Hooks
React HooksReact Hooks
React Hooks
 

En vedette

En vedette (17)

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

Similaire à Typescript ppt

Open travel 2-0_introduction_jan_2014_slideshare
Open travel 2-0_introduction_jan_2014_slideshareOpen travel 2-0_introduction_jan_2014_slideshare
Open travel 2-0_introduction_jan_2014_slideshare
OpenTravel Alliance
 

Similaire à Typescript ppt (20)

TypeScript 101
TypeScript 101TypeScript 101
TypeScript 101
 
Getting Started with the TypeScript Language
Getting Started with the TypeScript LanguageGetting Started with the TypeScript Language
Getting Started with the TypeScript Language
 
Typescript: Beginner to Advanced
Typescript: Beginner to AdvancedTypescript: Beginner to Advanced
Typescript: Beginner to Advanced
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!
 
Learning typescript
Learning typescriptLearning typescript
Learning typescript
 
End to-end apps with type script
End to-end apps with type scriptEnd to-end apps with type script
End to-end apps with type script
 
c++ Unit III - PPT.pptx
c++ Unit III - PPT.pptxc++ Unit III - PPT.pptx
c++ Unit III - PPT.pptx
 
Scala Days NYC 2016
Scala Days NYC 2016Scala Days NYC 2016
Scala Days NYC 2016
 
The advantage of developing with TypeScript
The advantage of developing with TypeScript The advantage of developing with TypeScript
The advantage of developing with TypeScript
 
AngularConf2015
AngularConf2015AngularConf2015
AngularConf2015
 
Angular2
Angular2Angular2
Angular2
 
One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type script
 
Type script
Type scriptType script
Type script
 
Java-Intro.pptx
Java-Intro.pptxJava-Intro.pptx
Java-Intro.pptx
 
Web technologies-course 07.pptx
Web technologies-course 07.pptxWeb technologies-course 07.pptx
Web technologies-course 07.pptx
 
Getting started with CATIA V5 Macros
Getting started with CATIA V5 MacrosGetting started with CATIA V5 Macros
Getting started with CATIA V5 Macros
 
TypeScript and Angular2 (Love at first sight)
TypeScript and Angular2 (Love at first sight)TypeScript and Angular2 (Love at first sight)
TypeScript and Angular2 (Love at first sight)
 
Open travel 2-0_introduction_jan_2014_slideshare
Open travel 2-0_introduction_jan_2014_slideshareOpen travel 2-0_introduction_jan_2014_slideshare
Open travel 2-0_introduction_jan_2014_slideshare
 

Dernier

+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Health
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
masabamasaba
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
masabamasaba
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 

Dernier (20)

The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 
%in Harare+277-882-255-28 abortion pills for sale in Harare
%in Harare+277-882-255-28 abortion pills for sale in Harare%in Harare+277-882-255-28 abortion pills for sale in Harare
%in Harare+277-882-255-28 abortion pills for sale in Harare
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
 
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park %in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
 
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) SolutionIntroducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfPayment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
 
Generic or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisionsGeneric or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisions
 
%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdfThe Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
 
Exploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdfExploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdf
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 

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

Notes de l'éditeur

  1. 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
  2. All numbers in Typescript are floating point values. These floating point numbers get the type 'number'.
  3. automatic semicolon insertion
  4. -we can also pass functions in functions as arguments