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

1. Introduction about
Presenter: BinhQD
@binhqd

2. Contents
1. What is TypeScripts?
2. Why using it?
3. Cons
4. Demo

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. What is TypeScript?
Example 01:

5. What is TypeScript?
Example 02:

6. What is TypeScript?
Example 03:

7. TypeScript similars

8. Why using it?
❖ Javascript is not designed for Large-Scale applications

9. Why using it?
❖ Javascript is not designed for Large-Scale applications
❖ OOP programming

11. Why using it?
❖ Javascript is not designed for Large-Scale applications
❖ OOP programming
❖ TypeScript = ES6 + Optional Typing

13. Why using it?
❖ Javascript is not designed for Large-Scale applications
❖ OOP programming
❖ TypeScript = ES6 + Optional Typing
➢ …
➢ For … of
➢ Spread operator
➢ Promise

14. 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

15. 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

18. Why using it?
❖ Prevent Javascript common mistake (Non-blocking issue)

21. Why using it?
❖ Prevent Javascript common mistake (Non-blocking issue)
❖ Output for ES5, ES6, ES7 and future Javascript

22. 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

23. CommonJS

24. SystemJS

25. AMD (Asynchronous Module Definition)

26. UMD (Universal Module Definition)

27. 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.

28. CoffeeScript

29. Dart

30. TypeScript

31. 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

32. Cons
❖ Write more type definitions
❖ Need to setup Typescript compiler
❖ Remove some free style

33. Demo
❖ Installation
$ sudo npm install -g typescript
❖ Tools
➢ Visual Studio, Visual Studio Code, Web Maxtrix
➢ Eclipse, Netbean
➢ Vim
➢ Atom
➢ Sublime
➢ Grunt, Gulp

34. Demo - Supported types
❖ boolean
❖ number
❖ string
❖ enum
❖ any
❖ void
❖ array

35. Demo - ES6 features
❖ let
❖ arrow function
❖ const
❖ template string

36. Demo - OOP
❖ Interface
❖ Supporting ES6 for class-based OOP
❖ Inheritance
❖ public, protected and private members
❖ Modules
❖ Functions
❖ Mixins

37. Demo - Output
❖ ES5
❖ ES6
❖ CommonJS
❖ System
❖ AMD
❖ UMD

38. Demo - Migrate from existing application
❖ DefinitelyTyped
➢ https://github.com/DefinitelyTyped/DefinitelyTyped
❖ Tools:
➢ $ sudo npm install -g typings

39. Thanks