SlideShare a Scribd company logo
1 of 30
Download to read offline
TypeScript = JavaScript (almost)
done right
Maurice de Beijer
Who am I

 Maurice de Beijer
 The Problem Solver
 Microsoft MVP since 2005
 DevelopMentor instructor
 Twitter:   @mauricedb
 Blog:      http://msmvps.com/blogs/theproblemsolver/
 Web:       http://www.HTML5Support.nl
 E-mail:    Maurice.de.Beijer@gmail.com
Agenda

 What is TypeScript?
 Why do we need TypeScript?
 What is wrong with JavaScript?
 TypeScript features
     Type annotations
     Type inference
     Modules
     Classes
What is TypeScript?

 An open source programming language developed at Microsoft
     By Anders Hejlsberg, lead architect of C#
 A super set of JavaScript
     All JavaScript is valid TypeScript
     Adds optional type checking, classes, interfaces and more
 Compiles to “normal” JavaScript
     Either ECMAScript 5 or ECMAScipt 3
Why do we need TypeScript?

 JavaScript was designed for small scripts
 These days JavaScript applications get bigger and more complex
     Gmail is reported to have 443,000 lines of JavaScript in 2010
 This trend will continue
     Single Page Applications in the browser
     Node.js on the server
What is wrong with JavaScript?
Douglas Crockford on TypeScript


  Microsoft's TypeScript may be the best of the many JavaScript front ends. It seems to
    generate the most attractive code. And I think it should take pressure off of the
  ECMAScript Standard for new features like type declarations and classes. Anders has
shown that these can be provided nicely by a preprocessor, so there is no need to change
                               the underlying language.


I think that JavaScript's loose typing is one of its best features and that type checking is
way overrated. TypeScript adds sweetness, but at a price. It is not a price I am willing to
                                            pay.
Things TypeScript adds to JavaScript

 Type annotations
 Type inference
 Modules
 Classes
 Interfaces


 Based on the ECMAScript 6 proposed standard
Type annotations
Type inference
Type annotations/arrays
Type annotations/param arrays
Arrow functions
Type annotations/casts
TypeScript type definitions

 The DOM and standard JavaScript types are provided
DefinitelyTyped
Modules
Interfaces
Interfaces
Interfaces & function overloading
Interfaces & type definitions
Classes
Classes & constructors
Classes & constructors
Classes & properties
Arrow functions revisited
Arrow functions revisited
Classes & inheritance
TypeScript is still JavaScript

 Not all JavaScript problems are solved by TypeScript
     Some older browsers support ECMAScript 3 (December 1999)
 Some older browsers have non standard DOM/CSS implementations
     jQuery remains an extremely useful library
Conclusion

 TypeScript is not perfect
     But it helps a lot
 You are not forced to use a new language
     Leverage existing JavaScript skills en libraries


 Consider it for your next “large“ JavaScript project
     After all the risk is small

More Related Content

What's hot

Frameworks in JavaScript
Frameworks in JavaScriptFrameworks in JavaScript
Frameworks in JavaScriptHaim Michael
 
Web topic 21 pass info via javascript
Web topic 21  pass info via javascriptWeb topic 21  pass info via javascript
Web topic 21 pass info via javascriptCK Yang
 
JavaScript Jump Start
JavaScript Jump StartJavaScript Jump Start
JavaScript Jump StartHaim Michael
 
There is something about JavaScript - Choose Forum 2014
There is something about JavaScript - Choose Forum 2014There is something about JavaScript - Choose Forum 2014
There is something about JavaScript - Choose Forum 2014jbandi
 
Front-end Testing (manual, automated, you name it) - Erich Jagomägis - Develo...
Front-end Testing (manual, automated, you name it) - Erich Jagomägis - Develo...Front-end Testing (manual, automated, you name it) - Erich Jagomägis - Develo...
Front-end Testing (manual, automated, you name it) - Erich Jagomägis - Develo...MobileMonday Estonia
 
Css,javascript,php,mysql
Css,javascript,php,mysqlCss,javascript,php,mysql
Css,javascript,php,mysqlvurimi prasad
 
WordPress Jump Start
WordPress Jump StartWordPress Jump Start
WordPress Jump StartHaim Michael
 

What's hot (14)

TypeScript
TypeScriptTypeScript
TypeScript
 
Frameworks in JavaScript
Frameworks in JavaScriptFrameworks in JavaScript
Frameworks in JavaScript
 
AngularJS
AngularJS AngularJS
AngularJS
 
Web topic 21 pass info via javascript
Web topic 21  pass info via javascriptWeb topic 21  pass info via javascript
Web topic 21 pass info via javascript
 
JavaScript Jump Start
JavaScript Jump StartJavaScript Jump Start
JavaScript Jump Start
 
Html & css
Html & cssHtml & css
Html & css
 
There is something about JavaScript - Choose Forum 2014
There is something about JavaScript - Choose Forum 2014There is something about JavaScript - Choose Forum 2014
There is something about JavaScript - Choose Forum 2014
 
Javascript
JavascriptJavascript
Javascript
 
Java script
Java scriptJava script
Java script
 
Node js crash course session 1
Node js crash course   session 1Node js crash course   session 1
Node js crash course session 1
 
Front-end Testing (manual, automated, you name it) - Erich Jagomägis - Develo...
Front-end Testing (manual, automated, you name it) - Erich Jagomägis - Develo...Front-end Testing (manual, automated, you name it) - Erich Jagomägis - Develo...
Front-end Testing (manual, automated, you name it) - Erich Jagomägis - Develo...
 
Css,javascript,php,mysql
Css,javascript,php,mysqlCss,javascript,php,mysql
Css,javascript,php,mysql
 
HTML5 Jump Start
HTML5 Jump StartHTML5 Jump Start
HTML5 Jump Start
 
WordPress Jump Start
WordPress Jump StartWordPress Jump Start
WordPress Jump Start
 

Similar to Type script = javascript (alomst) done right

Type script vs javascript come face to face in battleground
Type script vs javascript come face to face in battlegroundType script vs javascript come face to face in battleground
Type script vs javascript come face to face in battlegroundKaty Slemon
 
An Introduction to TypeScript: Definition, History, and Key Features
An Introduction to TypeScript: Definition, History, and Key FeaturesAn Introduction to TypeScript: Definition, History, and Key Features
An Introduction to TypeScript: Definition, History, and Key FeaturesMichael Coplin
 
What is TypeScript? It's Definition, History And Features
What is TypeScript? It's Definition, History And FeaturesWhat is TypeScript? It's Definition, History And Features
What is TypeScript? It's Definition, History And FeaturesHarryParker32
 
Typescript for the programmers who like javascript
Typescript for the programmers who like javascriptTypescript for the programmers who like javascript
Typescript for the programmers who like javascriptAndrei Sebastian Cîmpean
 
Typescript overview
Typescript overviewTypescript overview
Typescript overviewThanvilahari
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponLaurent Duveau
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxMalla Reddy University
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponLaurent Duveau
 
11_typescript.pptx for north south university course cse425
11_typescript.pptx for north south university course cse42511_typescript.pptx for north south university course cse425
11_typescript.pptx for north south university course cse425AnikSahaToni19126196
 
An Introduction to TypeScript
An Introduction to TypeScriptAn Introduction to TypeScript
An Introduction to TypeScriptWrapPixel
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Powerful tools for building web solutions
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutionsAndrea Tino
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersLaurent Duveau
 

Similar to Type script = javascript (alomst) done right (20)

Type script
Type scriptType script
Type script
 
Type script vs javascript come face to face in battleground
Type script vs javascript come face to face in battlegroundType script vs javascript come face to face in battleground
Type script vs javascript come face to face in battleground
 
TypeScript VS JavaScript.pptx
TypeScript VS JavaScript.pptxTypeScript VS JavaScript.pptx
TypeScript VS JavaScript.pptx
 
Introducing TypeScript
Introducing TypeScriptIntroducing TypeScript
Introducing TypeScript
 
An Introduction to TypeScript: Definition, History, and Key Features
An Introduction to TypeScript: Definition, History, and Key FeaturesAn Introduction to TypeScript: Definition, History, and Key Features
An Introduction to TypeScript: Definition, History, and Key Features
 
What is TypeScript? It's Definition, History And Features
What is TypeScript? It's Definition, History And FeaturesWhat is TypeScript? It's Definition, History And Features
What is TypeScript? It's Definition, History And Features
 
Typescript for the programmers who like javascript
Typescript for the programmers who like javascriptTypescript for the programmers who like javascript
Typescript for the programmers who like javascript
 
Type script
Type scriptType script
Type script
 
Typescript overview
Typescript overviewTypescript overview
Typescript overview
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Jscript part1
Jscript part1Jscript part1
Jscript part1
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
11_typescript.pptx for north south university course cse425
11_typescript.pptx for north south university course cse42511_typescript.pptx for north south university course cse425
11_typescript.pptx for north south university course cse425
 
An Introduction to TypeScript
An Introduction to TypeScriptAn Introduction to TypeScript
An Introduction to TypeScript
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Type script
Type scriptType script
Type script
 
TypeScript
TypeScriptTypeScript
TypeScript
 
Powerful tools for building web solutions
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutions
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
 

More from Maurice De Beijer [MVP]

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppMaurice De Beijer [MVP]
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectMaurice De Beijer [MVP]
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressMaurice De Beijer [MVP]
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressMaurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Maurice De Beijer [MVP]
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureMaurice De Beijer [MVP]
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactMaurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]
 
Building reliable web applications using Cypress
Building reliable web applications using CypressBuilding reliable web applications using Cypress
Building reliable web applications using CypressMaurice De Beijer [MVP]
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingMaurice De Beijer [MVP]
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockMaurice De Beijer [MVP]
 
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptFrom zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptMaurice De Beijer [MVP]
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptMaurice De Beijer [MVP]
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisMaurice De Beijer [MVP]
 

More from Maurice De Beijer [MVP] (20)

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
Building reliable web applications using Cypress
Building reliable web applications using CypressBuilding reliable web applications using Cypress
Building reliable web applications using Cypress
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
 
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptFrom zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScript
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
The new React
The new React The new React
The new React
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
I am hooked on React
I am hooked on ReactI am hooked on React
I am hooked on React
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
 

Recently uploaded

Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...itnewsafrica
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialJoão Esperancinha
 

Recently uploaded (20)

Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorial
 

Type script = javascript (alomst) done right

  • 1. TypeScript = JavaScript (almost) done right Maurice de Beijer
  • 2. Who am I  Maurice de Beijer  The Problem Solver  Microsoft MVP since 2005  DevelopMentor instructor  Twitter: @mauricedb  Blog: http://msmvps.com/blogs/theproblemsolver/  Web: http://www.HTML5Support.nl  E-mail: Maurice.de.Beijer@gmail.com
  • 3. Agenda  What is TypeScript?  Why do we need TypeScript?  What is wrong with JavaScript?  TypeScript features  Type annotations  Type inference  Modules  Classes
  • 4. What is TypeScript?  An open source programming language developed at Microsoft  By Anders Hejlsberg, lead architect of C#  A super set of JavaScript  All JavaScript is valid TypeScript  Adds optional type checking, classes, interfaces and more  Compiles to “normal” JavaScript  Either ECMAScript 5 or ECMAScipt 3
  • 5. Why do we need TypeScript?  JavaScript was designed for small scripts  These days JavaScript applications get bigger and more complex  Gmail is reported to have 443,000 lines of JavaScript in 2010  This trend will continue  Single Page Applications in the browser  Node.js on the server
  • 6. What is wrong with JavaScript?
  • 7. Douglas Crockford on TypeScript Microsoft's TypeScript may be the best of the many JavaScript front ends. It seems to generate the most attractive code. And I think it should take pressure off of the ECMAScript Standard for new features like type declarations and classes. Anders has shown that these can be provided nicely by a preprocessor, so there is no need to change the underlying language. I think that JavaScript's loose typing is one of its best features and that type checking is way overrated. TypeScript adds sweetness, but at a price. It is not a price I am willing to pay.
  • 8. Things TypeScript adds to JavaScript  Type annotations  Type inference  Modules  Classes  Interfaces  Based on the ECMAScript 6 proposed standard
  • 15. TypeScript type definitions  The DOM and standard JavaScript types are provided
  • 20. Interfaces & function overloading
  • 21. Interfaces & type definitions
  • 29. TypeScript is still JavaScript  Not all JavaScript problems are solved by TypeScript  Some older browsers support ECMAScript 3 (December 1999)  Some older browsers have non standard DOM/CSS implementations  jQuery remains an extremely useful library
  • 30. Conclusion  TypeScript is not perfect  But it helps a lot  You are not forced to use a new language  Leverage existing JavaScript skills en libraries  Consider it for your next “large“ JavaScript project  After all the risk is small