SlideShare a Scribd company logo
1 of 24
aOS Aachen
December 1st 2017
Enhance your Javascript with Typescript
@felix_billon
aOS Aachen
December 1st 2017
Félix Billon
Web developper Co-lead Organisateur
@felix_billon
felixbillon
http://shakedatcode.com
Member
aOS Aachen
December 1st 2017
Raise of TypeScript
aOS Aachen
December 1st 2017
Raise of TypeScript in 2017
• Top 20, RedMonk Q117 Programming Language Rankings
• Third most loved Programming Language in Stack Overflow 2017 Developer Survey
• TypeScript at Slack
• Why we chose Typescript (reddit)
• Typescript is now an official language used at Google
• …
aOS Aachen
December 1st 2017
TypeScript ?
• Typed superset of Javascript.
• Made in Microsoft.
• Open source on github.
• Main features : transpilation and
static typings.
aOS Aachen
December 1st 2017
Transpilation
@felix_billon
aOS Aachen
December 1st 2017
ECMAScript
• ECMAScript is a standard for a scripting languages.
• Well-known implementations of the ECMAScript standard :
javascript, actionscript, …
Browser
JS EngineEcmaScript
implements
Edge : Chakra
Chrome : V8
Firefox : SpiderMonkey
…
aOS Aachen
December 1st 2017
ECMAScript : version history
ES5
ES6
ES2ES1 ES3
ES4
ES7 ES8
1997 1998 1999
2008
2009
2015
2016 2017
ES9
2018
aOS Aachen
December 1st 2017
Technical Committee 39
aOS Aachen
December 1st 2017
Implementation rate of ES6 -> Browser
aOS Aachen
December 1st 2017
Implementation rate of ES6 -> NodeJS
aOS Aachen
December 1st 2017
Transpilation : exemple
aOS Aachen
December 1st 2017
Static typings
@felix_billon
aOS Aachen
December 1st 2017
What's the purpose
• Spottings common error.
• Improve readbility of code.
• Enhance IDE features : code navigation, autocompletion, refactoring,
…
aOS Aachen
December 1st 2017
Basic
• Basic Types : boolean, number, string, array, object, void …
• Example :
• Type inference.
• Be careful : any.
• Typings are used only during compilation.
function foo(bar: string): void { ... }
let list: number[] = [1,2,3];
aOS Aachen
December 1st 2017
TypeScript Definition File
• File wich have .d.ts extention, describe and type javascript code.
• Use external NPM’s package in my TypeScript Project :
1. Write in TS -> nothing to do
2. Write in JS but it shipped with its .d.ts -> nothing to do
3. Write in JS without its .d.ts -> fetch it on NPM @types (to search TypeSearch)
aOS Aachen
December 1st 2017
Framework compatible
aOS Aachen
December 1st 2017
Architecture and integration
@felix_billon
aOS Aachen
December 1st 2017
Architecture
aOS Aachen
December 1st 2017
Integration in IDE
aOS Aachen
December 1st 2017
Integration in JS Tooling
aOS Aachen
December 1st 2017
Conclusion
• Brings more robustness and scalability on your codebase.
• Smooth learning curve and well integrated in front-end environment.
• Big active community.
aOS Aachen
December 1st 2017
Usefull link
ESNext :
• Free Ebook :
http://exploringjs.com/es6.html et
http://exploringjs.com/es2016-
es2017/index.html
• Free Ebook :
https://leanpub.com/understandin
ges6/read
Typescript :
• Official website :
www.typescriptlang.org
• Free Ebook :
https://github.com/basarat/type
script-book
aOS Aachen
December 1st 2017
Thanks to our sponsors!
Platinum
Diamond

More Related Content

What's hot

The business and end user guide into the new and modern SharePoint
The business and end user guide into the new and modern SharePointThe business and end user guide into the new and modern SharePoint
The business and end user guide into the new and modern SharePoint
BIWUG
 
Microsoft Graph with ASP.NET MVC
Microsoft Graph with ASP.NET MVCMicrosoft Graph with ASP.NET MVC
Microsoft Graph with ASP.NET MVC
BIWUG
 
Let's do PowerBi - Together
Let's do PowerBi - TogetherLet's do PowerBi - Together
Let's do PowerBi - Together
BIWUG
 
Extend your development skills set using MS Graph
Extend your development skills set using MS GraphExtend your development skills set using MS Graph
Extend your development skills set using MS Graph
BIWUG
 
PowerApps and Flow, one year later
PowerApps and Flow, one year laterPowerApps and Flow, one year later
PowerApps and Flow, one year later
BIWUG
 
Introduction to Microsoft Flow and Azure Functions
Introduction to Microsoft Flow and Azure FunctionsIntroduction to Microsoft Flow and Azure Functions
Introduction to Microsoft Flow and Azure Functions
BIWUG
 
Building the Perfect Office 365 Tenant
Building the Perfect Office 365 TenantBuilding the Perfect Office 365 Tenant
Building the Perfect Office 365 Tenant
BIWUG
 
Rethinking Document Management in Office 365
Rethinking Document Management in Office 365Rethinking Document Management in Office 365
Rethinking Document Management in Office 365
BIWUG
 

What's hot (20)

The business and end user guide into the new and modern SharePoint
The business and end user guide into the new and modern SharePointThe business and end user guide into the new and modern SharePoint
The business and end user guide into the new and modern SharePoint
 
Microsoft Graph with ASP.NET MVC
Microsoft Graph with ASP.NET MVCMicrosoft Graph with ASP.NET MVC
Microsoft Graph with ASP.NET MVC
 
Use PowerShell superpower to tame your Office 365
Use PowerShell superpower to tame your Office 365Use PowerShell superpower to tame your Office 365
Use PowerShell superpower to tame your Office 365
 
Microsoft Flow Advanced : tips, pitfalls, problems to be known before staring...
Microsoft Flow Advanced : tips, pitfalls, problems to be known before staring...Microsoft Flow Advanced : tips, pitfalls, problems to be known before staring...
Microsoft Flow Advanced : tips, pitfalls, problems to be known before staring...
 
Let's do PowerBi - Together
Let's do PowerBi - TogetherLet's do PowerBi - Together
Let's do PowerBi - Together
 
Extend your development skills set using MS Graph
Extend your development skills set using MS GraphExtend your development skills set using MS Graph
Extend your development skills set using MS Graph
 
PowerApps and Flow, one year later
PowerApps and Flow, one year laterPowerApps and Flow, one year later
PowerApps and Flow, one year later
 
Simplifying SQL Server & SharePoint Migrations using PowerShell
Simplifying SQL Server & SharePoint Migrations using PowerShellSimplifying SQL Server & SharePoint Migrations using PowerShell
Simplifying SQL Server & SharePoint Migrations using PowerShell
 
Introduction to Microsoft Flow and Azure Functions
Introduction to Microsoft Flow and Azure FunctionsIntroduction to Microsoft Flow and Azure Functions
Introduction to Microsoft Flow and Azure Functions
 
Microsoft Teams Deep Dive
Microsoft Teams Deep DiveMicrosoft Teams Deep Dive
Microsoft Teams Deep Dive
 
Building the Perfect Office 365 Tenant
Building the Perfect Office 365 TenantBuilding the Perfect Office 365 Tenant
Building the Perfect Office 365 Tenant
 
Rethinking Document Management in Office 365
Rethinking Document Management in Office 365Rethinking Document Management in Office 365
Rethinking Document Management in Office 365
 
SharePoint Branding - Kevin Riahi & Preetee HURCHAND-BEEFEYA
SharePoint Branding - Kevin Riahi & Preetee HURCHAND-BEEFEYA SharePoint Branding - Kevin Riahi & Preetee HURCHAND-BEEFEYA
SharePoint Branding - Kevin Riahi & Preetee HURCHAND-BEEFEYA
 
2017 05-05-a os-luxembourg-tout sur les documents dans office 365
2017 05-05-a os-luxembourg-tout sur les documents dans office 3652017 05-05-a os-luxembourg-tout sur les documents dans office 365
2017 05-05-a os-luxembourg-tout sur les documents dans office 365
 
When Windows Apps meet SharePoint
When Windows Apps meet SharePointWhen Windows Apps meet SharePoint
When Windows Apps meet SharePoint
 
aOS mauritius 24 October 2017
aOS mauritius 24 October 2017aOS mauritius 24 October 2017
aOS mauritius 24 October 2017
 
aOS Dublin - All about documents in O365 03/2017
aOS Dublin - All about documents in O365 03/2017aOS Dublin - All about documents in O365 03/2017
aOS Dublin - All about documents in O365 03/2017
 
All about documents in o365 - aOS Brussels 2016/12/05
All about documents in o365 - aOS Brussels 2016/12/05All about documents in o365 - aOS Brussels 2016/12/05
All about documents in o365 - aOS Brussels 2016/12/05
 
O365Engage17 - Working With OneDrive for Business
O365Engage17 - Working With OneDrive for BusinessO365Engage17 - Working With OneDrive for Business
O365Engage17 - Working With OneDrive for Business
 
SharePoint Saturday Oslo 2017 - The Intranet is dead long live the Modern Wor...
SharePoint Saturday Oslo 2017 - The Intranet is dead long live the Modern Wor...SharePoint Saturday Oslo 2017 - The Intranet is dead long live the Modern Wor...
SharePoint Saturday Oslo 2017 - The Intranet is dead long live the Modern Wor...
 

Similar to Enhance your Javascript with Typescript - Félix Billon

W1-Presentation-Introduction to Computing and Programming.pdf
W1-Presentation-Introduction to Computing and Programming.pdfW1-Presentation-Introduction to Computing and Programming.pdf
W1-Presentation-Introduction to Computing and Programming.pdf
JarellScott
 
Knowledge_Based_Systems_Siemens
Knowledge_Based_Systems_SiemensKnowledge_Based_Systems_Siemens
Knowledge_Based_Systems_Siemens
Vinay Bhat
 

Similar to Enhance your Javascript with Typescript - Félix Billon (20)

2018 09-03 aOS Aachen - Empower your javascript with typescript - Felix Billon
2018 09-03 aOS Aachen - Empower your javascript with typescript - Felix Billon2018 09-03 aOS Aachen - Empower your javascript with typescript - Felix Billon
2018 09-03 aOS Aachen - Empower your javascript with typescript - Felix Billon
 
Angular 2 On Production (IT Talk in Dnipro)
Angular 2 On Production (IT Talk in Dnipro)Angular 2 On Production (IT Talk in Dnipro)
Angular 2 On Production (IT Talk in Dnipro)
 
Machine Learning Standards
Machine Learning StandardsMachine Learning Standards
Machine Learning Standards
 
Introduction to TypeScript
Introduction to TypeScriptIntroduction to TypeScript
Introduction to TypeScript
 
GDG Helwan Introduction to python
GDG Helwan Introduction to pythonGDG Helwan Introduction to python
GDG Helwan Introduction to python
 
Type script
Type scriptType script
Type script
 
SharePoint and javascript – modern development
SharePoint and javascript – modern developmentSharePoint and javascript – modern development
SharePoint and javascript – modern development
 
TypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San Jose
TypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San JoseTypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San Jose
TypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San Jose
 
TypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation GuideTypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation Guide
 
W1-Presentation-Introduction to Computing and Programming.pdf
W1-Presentation-Introduction to Computing and Programming.pdfW1-Presentation-Introduction to Computing and Programming.pdf
W1-Presentation-Introduction to Computing and Programming.pdf
 
Intro to Python
Intro to PythonIntro to Python
Intro to Python
 
SharePoint Saturday Johannesburg 2017
SharePoint Saturday Johannesburg 2017SharePoint Saturday Johannesburg 2017
SharePoint Saturday Johannesburg 2017
 
P1 2017 python
P1 2017 pythonP1 2017 python
P1 2017 python
 
Always bet on JS - Finjs.io NYC 2016
Always bet on JS - Finjs.io NYC 2016Always bet on JS - Finjs.io NYC 2016
Always bet on JS - Finjs.io NYC 2016
 
Knowledge_Based_Systems_Siemens
Knowledge_Based_Systems_SiemensKnowledge_Based_Systems_Siemens
Knowledge_Based_Systems_Siemens
 
Universal Design Tokens
Universal Design TokensUniversal Design Tokens
Universal Design Tokens
 
TypeScript-SPS-melb.pptx
TypeScript-SPS-melb.pptxTypeScript-SPS-melb.pptx
TypeScript-SPS-melb.pptx
 
.NET per la Data Science e oltre
.NET per la Data Science e oltre.NET per la Data Science e oltre
.NET per la Data Science e oltre
 
Lecture for Bootstrap and flask in Python
Lecture for Bootstrap and flask in PythonLecture for Bootstrap and flask in Python
Lecture for Bootstrap and flask in Python
 
Professional UI Design with APEX 5.1
Professional UI Design with APEX 5.1Professional UI Design with APEX 5.1
Professional UI Design with APEX 5.1
 

More from aOS Community

More from aOS Community (20)

Commencer le IaaS sur Azure - aOS Tahiti 03-03-2020
Commencer le IaaS sur Azure - aOS Tahiti 03-03-2020Commencer le IaaS sur Azure - aOS Tahiti 03-03-2020
Commencer le IaaS sur Azure - aOS Tahiti 03-03-2020
 
Migrer vers O365. Quelles stragtégies? - aOS Tahiti 03-03-2020
Migrer vers O365. Quelles stragtégies? - aOS Tahiti 03-03-2020Migrer vers O365. Quelles stragtégies? - aOS Tahiti 03-03-2020
Migrer vers O365. Quelles stragtégies? - aOS Tahiti 03-03-2020
 
Passer des macro Excel à la power plateform - aOS Tahiti 03-03-2020
Passer des macro Excel à la power plateform - aOS Tahiti 03-03-2020Passer des macro Excel à la power plateform - aOS Tahiti 03-03-2020
Passer des macro Excel à la power plateform - aOS Tahiti 03-03-2020
 
Serverless avec azure functions - aOS Tahiti 03-03-2020
Serverless avec azure functions - aOS Tahiti 03-03-2020Serverless avec azure functions - aOS Tahiti 03-03-2020
Serverless avec azure functions - aOS Tahiti 03-03-2020
 
Passer des macro Excel à la power plateform - aOS Nouméa 28-02-2020
Passer des macro Excel à la power plateform - aOS Nouméa 28-02-2020 Passer des macro Excel à la power plateform - aOS Nouméa 28-02-2020
Passer des macro Excel à la power plateform - aOS Nouméa 28-02-2020
 
MS ignite : les nouveautés autour des content services et projet cortex - aOS...
MS ignite : les nouveautés autour des content services et projet cortex - aOS...MS ignite : les nouveautés autour des content services et projet cortex - aOS...
MS ignite : les nouveautés autour des content services et projet cortex - aOS...
 
Cybersecurité dans M365 - aOS Noumea 28-02-2020
Cybersecurité dans M365 - aOS Noumea 28-02-2020Cybersecurité dans M365 - aOS Noumea 28-02-2020
Cybersecurité dans M365 - aOS Noumea 28-02-2020
 
Introduction a Power Automate - aOS Nouméa 28-02-2020
Introduction a Power Automate  - aOS Nouméa 28-02-2020 Introduction a Power Automate  - aOS Nouméa 28-02-2020
Introduction a Power Automate - aOS Nouméa 28-02-2020
 
aOS Monaco 2019 - S3 - Présentation Varonis - Cloud Data Protection - Benjami...
aOS Monaco 2019 - S3 - Présentation Varonis - Cloud Data Protection - Benjami...aOS Monaco 2019 - S3 - Présentation Varonis - Cloud Data Protection - Benjami...
aOS Monaco 2019 - S3 - Présentation Varonis - Cloud Data Protection - Benjami...
 
aOS Monaco 2019 - S2 - Présentation ARKADIN - TEAMS Adoption - Laurent Pilo
aOS Monaco 2019 - S2 - Présentation ARKADIN - TEAMS Adoption - Laurent PiloaOS Monaco 2019 - S2 - Présentation ARKADIN - TEAMS Adoption - Laurent Pilo
aOS Monaco 2019 - S2 - Présentation ARKADIN - TEAMS Adoption - Laurent Pilo
 
aOS Monaco 2019 - C1 - Sécuriser sa messagerie sur Office 365 - Hakim Taoussi...
aOS Monaco 2019 - C1 - Sécuriser sa messagerie sur Office 365 - Hakim Taoussi...aOS Monaco 2019 - C1 - Sécuriser sa messagerie sur Office 365 - Hakim Taoussi...
aOS Monaco 2019 - C1 - Sécuriser sa messagerie sur Office 365 - Hakim Taoussi...
 
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how t...
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how t...aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how t...
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how t...
 
aOS Monaco 2019 - B6 - Mister Governance and Doctor Teams - Jean-François Ber...
aOS Monaco 2019 - B6 - Mister Governance and Doctor Teams - Jean-François Ber...aOS Monaco 2019 - B6 - Mister Governance and Doctor Teams - Jean-François Ber...
aOS Monaco 2019 - B6 - Mister Governance and Doctor Teams - Jean-François Ber...
 
aOS Monaco 2019 - B5 - The good, the bad and the unexpected - a BOT story - K...
aOS Monaco 2019 - B5 - The good, the bad and the unexpected - a BOT story - K...aOS Monaco 2019 - B5 - The good, the bad and the unexpected - a BOT story - K...
aOS Monaco 2019 - B5 - The good, the bad and the unexpected - a BOT story - K...
 
aOS Monaco 2019 - B4 - Three must have workflows with Microsoft Flow - Vlad C...
aOS Monaco 2019 - B4 - Three must have workflows with Microsoft Flow - Vlad C...aOS Monaco 2019 - B4 - Three must have workflows with Microsoft Flow - Vlad C...
aOS Monaco 2019 - B4 - Three must have workflows with Microsoft Flow - Vlad C...
 
aOS Monaco 2019 - B3 - Create purchase request in PowerApps - Robi Voncina
aOS Monaco 2019 - B3 - Create purchase request in PowerApps - Robi VoncinaaOS Monaco 2019 - B3 - Create purchase request in PowerApps - Robi Voncina
aOS Monaco 2019 - B3 - Create purchase request in PowerApps - Robi Voncina
 
aOS Monaco 2019 - B2 - Intégrer la Power Platform avec SharePoint - Patrick G...
aOS Monaco 2019 - B2 - Intégrer la Power Platform avec SharePoint - Patrick G...aOS Monaco 2019 - B2 - Intégrer la Power Platform avec SharePoint - Patrick G...
aOS Monaco 2019 - B2 - Intégrer la Power Platform avec SharePoint - Patrick G...
 
aOS Monaco 2019 - B1 - Construire son infrastructure sur Azure un jeu d'enfan...
aOS Monaco 2019 - B1 - Construire son infrastructure sur Azure un jeu d'enfan...aOS Monaco 2019 - B1 - Construire son infrastructure sur Azure un jeu d'enfan...
aOS Monaco 2019 - B1 - Construire son infrastructure sur Azure un jeu d'enfan...
 
aOS Monaco 2019 - A7 - Sécurisez votre SI et vos services Office 365 partie 2...
aOS Monaco 2019 - A7 - Sécurisez votre SI et vos services Office 365 partie 2...aOS Monaco 2019 - A7 - Sécurisez votre SI et vos services Office 365 partie 2...
aOS Monaco 2019 - A7 - Sécurisez votre SI et vos services Office 365 partie 2...
 
aOS Monaco 2019 - A6 - Sécurisez votre SI et vos services Office 365 partie 1...
aOS Monaco 2019 - A6 - Sécurisez votre SI et vos services Office 365 partie 1...aOS Monaco 2019 - A6 - Sécurisez votre SI et vos services Office 365 partie 1...
aOS Monaco 2019 - A6 - Sécurisez votre SI et vos services Office 365 partie 1...
 

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 

Enhance your Javascript with Typescript - Félix Billon

  • 1. aOS Aachen December 1st 2017 Enhance your Javascript with Typescript @felix_billon
  • 2. aOS Aachen December 1st 2017 Félix Billon Web developper Co-lead Organisateur @felix_billon felixbillon http://shakedatcode.com Member
  • 3. aOS Aachen December 1st 2017 Raise of TypeScript
  • 4. aOS Aachen December 1st 2017 Raise of TypeScript in 2017 • Top 20, RedMonk Q117 Programming Language Rankings • Third most loved Programming Language in Stack Overflow 2017 Developer Survey • TypeScript at Slack • Why we chose Typescript (reddit) • Typescript is now an official language used at Google • …
  • 5. aOS Aachen December 1st 2017 TypeScript ? • Typed superset of Javascript. • Made in Microsoft. • Open source on github. • Main features : transpilation and static typings.
  • 6. aOS Aachen December 1st 2017 Transpilation @felix_billon
  • 7. aOS Aachen December 1st 2017 ECMAScript • ECMAScript is a standard for a scripting languages. • Well-known implementations of the ECMAScript standard : javascript, actionscript, … Browser JS EngineEcmaScript implements Edge : Chakra Chrome : V8 Firefox : SpiderMonkey …
  • 8. aOS Aachen December 1st 2017 ECMAScript : version history ES5 ES6 ES2ES1 ES3 ES4 ES7 ES8 1997 1998 1999 2008 2009 2015 2016 2017 ES9 2018
  • 9. aOS Aachen December 1st 2017 Technical Committee 39
  • 10. aOS Aachen December 1st 2017 Implementation rate of ES6 -> Browser
  • 11. aOS Aachen December 1st 2017 Implementation rate of ES6 -> NodeJS
  • 12. aOS Aachen December 1st 2017 Transpilation : exemple
  • 13. aOS Aachen December 1st 2017 Static typings @felix_billon
  • 14. aOS Aachen December 1st 2017 What's the purpose • Spottings common error. • Improve readbility of code. • Enhance IDE features : code navigation, autocompletion, refactoring, …
  • 15. aOS Aachen December 1st 2017 Basic • Basic Types : boolean, number, string, array, object, void … • Example : • Type inference. • Be careful : any. • Typings are used only during compilation. function foo(bar: string): void { ... } let list: number[] = [1,2,3];
  • 16. aOS Aachen December 1st 2017 TypeScript Definition File • File wich have .d.ts extention, describe and type javascript code. • Use external NPM’s package in my TypeScript Project : 1. Write in TS -> nothing to do 2. Write in JS but it shipped with its .d.ts -> nothing to do 3. Write in JS without its .d.ts -> fetch it on NPM @types (to search TypeSearch)
  • 17. aOS Aachen December 1st 2017 Framework compatible
  • 18. aOS Aachen December 1st 2017 Architecture and integration @felix_billon
  • 19. aOS Aachen December 1st 2017 Architecture
  • 20. aOS Aachen December 1st 2017 Integration in IDE
  • 21. aOS Aachen December 1st 2017 Integration in JS Tooling
  • 22. aOS Aachen December 1st 2017 Conclusion • Brings more robustness and scalability on your codebase. • Smooth learning curve and well integrated in front-end environment. • Big active community.
  • 23. aOS Aachen December 1st 2017 Usefull link ESNext : • Free Ebook : http://exploringjs.com/es6.html et http://exploringjs.com/es2016- es2017/index.html • Free Ebook : https://leanpub.com/understandin ges6/read Typescript : • Official website : www.typescriptlang.org • Free Ebook : https://github.com/basarat/type script-book
  • 24. aOS Aachen December 1st 2017 Thanks to our sponsors! Platinum Diamond

Editor's Notes

  1. report surge in popularity RedMonk popularity stackoverflow (Tags) et github (pull request), 17ème alors que 31 en 2016 janvier TypeScript 9th most popular and Slack : communication tools Reddit : American social news aggregation, web content rating, and discussion website TypeScript chez google officiel depuis mars 2017 : utilisé pour google analytics, Firebase et Google cloud plateform and internal tools such as bug tracking, remployee reviews, …
  2. Plage lagon Boucan Canot
  3. ECMA = W3C (css, html and web api) Js is interpret language = new version of ES is out -> update browser and JS engine embed in it
  4. Version history : 2.0 succinte (MAJ syntaxe), 3.0 quelques ajouts (try/catch, regex,…), 4.0 aborted, 5.0 (getter,setter, …), 6.0 juin 2015 et 7.0 juin 2016 2008 small Javascript community, language wasn’t so popular… 2015 huge active community, high expectation. ES6 : arrow function, class, Map et Set, desctructuration, promise ES7 : operateur exponentiel et propriété tableau include ES8 : async/await, padding string ES9 : champs privé, déclaration des champs
  5. Ecma-262 = ecmascript Spec environ 600 page Disponible en ligne Tc39 groupe
  6. Drop support of IE 11 et version antérieur de chrome et firefox …
  7. From 6.4.0
  8. - Compiling is the general term for taking source code written in one language and transforming into another - Transpiling is a specific term for taking source code written in one language and transforming into another language that has a similar level of abstraction DEMO 1 : tsconfig, transpilation -> target et module
  9. Add type annotation. Onboard a new developper.
  10. NPM package manager like nuget for C#, composer PHP or gem for ruby.
  11. Core compiler, a partir d’un contexte (config + fichier) : AST -> token -> … emiter (transpilation) et checker (static type check) Standalone TS compiler (cli) Language service (fournit des services comme l’autocompletion, find all reference, …). Depuis la 2.3 possibilité de brancher des plugins pour avoir ces features autres par que dans typescript (template angular2, vueJs, graphQL …) Tsserver : executable node, wrap services et core compiler et les expose à travers un protocl JSON