Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction about type script

402 views

Published on

A short introduction about TypeScript including:
- What is TypeScript
- Why using it
- Some cons

Published in: Software
  • Be the first to comment

Introduction about type script

  1. 1. Introduction about Presenter: BinhQD @binhqd
  2. 2. Contents 1. What is TypeScripts? 2. Why using it? 3. Cons 4. Demo
  3. 3. What is TypeScript? ❖ TypeScript is designed for large-scale application ❖ Can be compiled to plain Javascript for any browser,any OS and it’s Open Source ❖ Developed and maintained by Microsoft ❖ First appeared: October 1st, 2012, first release July 2014 Current version: 1.8 on January 2016
  4. 4. What is TypeScript? Example 01:
  5. 5. What is TypeScript? Example 02:
  6. 6. What is TypeScript? Example 03:
  7. 7. TypeScript similars
  8. 8. Why using it? ❖ Javascript is not designed for Large-Scale applications
  9. 9. Why using it? ❖ Javascript is not designed for Large-Scale applications ❖ OOP programming
  10. 10. Why using it? ❖ Javascript is not designed for Large-Scale applications ❖ OOP programming ❖ TypeScript = ES6 + Optional Typing
  11. 11. Why using it? ❖ Javascript is not designed for Large-Scale applications ❖ OOP programming ❖ TypeScript = ES6 + Optional Typing ➢ … ➢ For … of ➢ Spread operator ➢ Promise
  12. 12. Why using it? ❖ Javascript is not designed for Large-Scale applications ❖ OOP programming ❖ TypeScript = ES6 + Optional Typing ❖ TypeScript is using in common JS Frameworks: ➢ Angular2 ➢ Ionic ➢ Meteor
  13. 13. Why using it? ❖ Javascript is not designed for Large-Scale applications ❖ OOP programming ❖ TypeScript = ES6 + Optional Typing ❖ TypeScript is using in common JS Frameworks: ➢ Angular2 ➢ Ionic ➢ Meteor
  14. 14. Why using it? ❖ Prevent Javascript common mistake (Non-blocking issue)
  15. 15. Why using it? ❖ Prevent Javascript common mistake (Non-blocking issue) ❖ Output for ES5, ES6, ES7 and future Javascript
  16. 16. Why using it? ❖ Prevent Javascript common mistake (Non-blocking issue) ❖ Output for ES5, ES6, ES7 and future Javascript ❖ Output to CommonJS/System/AMD/UMD format
  17. 17. CommonJS
  18. 18. SystemJS
  19. 19. AMD (Asynchronous Module Definition)
  20. 20. UMD (Universal Module Definition)
  21. 21. Why using it? ❖ Prevent Javascript common mistake (Non-blocking issue) ❖ Output for ES5, ES6, ES7 and future Javascript ❖ Output to CommonJS/AMD format ❖ Unlike CoffeeScript, Dart. Learning TS it is not about learning new language.
  22. 22. CoffeeScript
  23. 23. Dart
  24. 24. TypeScript
  25. 25. Why using it? ❖ Prevent Javascript common mistake (Non-blocking issue) ❖ Output for ES5, ES6, ES7 and future Javascript ❖ Output to CommonJS/AMD format ❖ Unlike CoffeeScript, Dart. Learning TS it is not about learning new language. ❖ Easy to discontinue
  26. 26. Cons ❖ Write more type definitions ❖ Need to setup Typescript compiler ❖ Remove some free style
  27. 27. Demo ❖ Installation $ sudo npm install -g typescript ❖ Tools ➢ Visual Studio, Visual Studio Code, Web Maxtrix ➢ Eclipse, Netbean ➢ Vim ➢ Atom ➢ Sublime ➢ Grunt, Gulp
  28. 28. Demo - Supported types ❖ boolean ❖ number ❖ string ❖ enum ❖ any ❖ void ❖ array
  29. 29. Demo - ES6 features ❖ let ❖ arrow function ❖ const ❖ template string
  30. 30. Demo - OOP ❖ Interface ❖ Supporting ES6 for class-based OOP ❖ Inheritance ❖ public, protected and private members ❖ Modules ❖ Functions ❖ Mixins
  31. 31. Demo - Output ❖ ES5 ❖ ES6 ❖ CommonJS ❖ System ❖ AMD ❖ UMD
  32. 32. Demo - Migrate from existing application ❖ DefinitelyTyped ➢ https://github.com/DefinitelyTyped/DefinitelyTyped ❖ Tools: ➢ $ sudo npm install -g typings
  33. 33. Thanks

×