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.
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
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)
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
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, …
Plage lagon Boucan Canot
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
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
Ecma-262 = ecmascript
Spec environ 600 page
Disponible en ligne
Tc39 groupe
Drop support of IE 11 et version antérieur de chrome et firefox …
From 6.4.0
- 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
Add type annotation.
Onboard a new developper.
NPM package manager like nuget for C#, composer PHP or gem for ruby.
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