2018 09-03 aOS Aachen - Empower your javascript with typescript - Felix Billon
0 likes46 views
This document discusses TypeScript and its benefits. It introduces TypeScript as a typed superset of JavaScript that provides transpilation and static typings. It describes how TypeScript compiles to JavaScript and can catch errors. It highlights features like static typing, definition files, and architectural benefits. Overall, it argues that TypeScript brings more robustness, scalability, and a smooth learning curve to front-end development.
![aOS Aachen
September 3rd 2018
Basic (1/2)
• Basic Types : boolean, number, string, array, object, void …
• Example :
function foo(bar: string): void { ... }
let list: number[] = [1,2,3];](https://image.slidesharecdn.com/2018-09-03aosaachen-empoweryourjavascriptwithtypescript-felixbillon-190110164715/85/2018-09-03-aOS-Aachen-Empower-your-javascript-with-typescript-Felix-Billon-16-320.jpg)
2018 09-03 aOS Aachen - Empower your javascript with typescript - Felix Billon
- 1. aOS Aachen September 3rd 2018 Empower your JavaScript with TypeScript @felix_billon
- 2. aOS Aachen September 3rd 2018 Félix Billon Web developper Co-lead Organisateur @felix_billon felixbillon http://shakedatcode.com Member
- 3. aOS Aachen September 3rd 2018 Raise of TypeScript
- 4. aOS Aachen September 3rd 2018 Raise of TypeScript • Top 20, RedMonk Programming Language Rankings (June 2018) • Fourth most loved Programming Language in Stack Overflow 2018 Developer Survey • TypeScript at Slack (2017) • Why we chose Typescript (reddit) (2017) • Typescript is an official language used at Google (April 2017) • TSConf at Seattle (2018) • …
- 5. aOS Aachen September 3rd 2018 Integration in IDE
- 6. aOS Aachen September 3rd 2018 TypeScript ? • Typed superset of Javascript. • Made in Microsoft. • Open source on github. • Main features : transpilation and static typings.
- 7. aOS Aachen September 3rd 2018 Transpilation @felix_billon
- 8. aOS Aachen September 3rd 2018 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 …
- 9. aOS Aachen September 3rd 2018 ECMAScript : historical ES5 ES6 ES2ES1 ES3 ES4 ES7 ES8 1997 1998 1999 2008 2009 2015 2016 2017 ES9 2018 • Classes • Arrow function • Promise • Destructuring • Constants • Modules • Template Literals • Map/Set • Iterators • Generators • Symbol type • … • Array.prototype.includes • Exponentation Operator • Improve regex • Try/catch • Format number • String padding • Object.value/Object.entries • Async/await • Improve trailing comma • Shared memory and atomics • Asynchronous Iteration • Rest/Spread properties • Improve Regex • Promise.prototype.finally • Template Literal Revision • Strict mode • Getters/Setters • ….
- 10. aOS Aachen September 3rd 2018 Implementation rate of ES6 -> Browser
- 11. aOS Aachen September 3rd 2018 Implementation rate of ES6 -> NodeJS
- 12. aOS Aachen September 3rd 2018 Compiling vs Transpiling Compiling : “Compiling is the general term for taking source code written in one language and transforming into another” Transpiling : “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”
- 13. aOS Aachen September 3rd 2018 Transpilation : exemple
- 14. aOS Aachen September 3rd 2018 Static typings @felix_billon
- 15. aOS Aachen September 3rd 2018 What's the purpose • Spottings common error. • Improve readbility of code. • Enhance IDE features : code navigation, autocompletion, refactoring, …
- 16. aOS Aachen September 3rd 2018 Basic (1/2) • Basic Types : boolean, number, string, array, object, void … • Example : function foo(bar: string): void { ... } let list: number[] = [1,2,3];
- 17. aOS Aachen September 3rd 2018 Basic (2/2) • Type inference : typescript’s compiler can infer types. • Be careful with special type that is not type safe : any • Typings are used only during compilation.
- 18. aOS Aachen September 3rd 2018 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)
- 19. aOS Aachen September 3rd 2018 Tips 1 : option strict • Improve type checking. • Master option that activate sub-options : • noImplicitAny • noImplicitThis • alwaysStrict • strictNullChecks • strictFunctionTypes • strictPropertyInitialization • Use it directly on new project and incrementally on legacy project.
- 20. aOS Aachen September 3rd 2018 Tips 2 : Nominal typings • TypeScript use structural typings also called duck typings. • Several technic exist to force nominal typings
- 21. aOS Aachen September 3rd 2018 Tips 3 : Architecture
- 22. aOS Aachen September 3rd 2018 Conclusion @felix_billon
- 23. aOS Aachen September 3rd 2018 Conclusion • Brings more robustness and scalability on your codebase. • Smooth learning curve and well integrated in front-end environment. • Big active community.
- 24. aOS Aachen September 3rd 2018 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
- 25. aOS Aachen September 3rd 2018 Thanks to our sponsors! Platinum Organizer Diamond