introduction about type script
TRANSCRIPT
Introduction about
Presenter: BinhQD@binhqd
Contents
1.What is TypeScripts?
2.Why using it?
3.Cons
4.Demo
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
What is TypeScript?Example 01:
What is TypeScript?Example 02:
What is TypeScript?Example 03:
TypeScript similars
Why using it?
❖ Javascript is not designed for Large-Scale applications
Why using it?
❖ Javascript is not designed for Large-Scale applications
❖ OOP programming
Why using it?
❖ Javascript is not designed for Large-Scale applications
❖ OOP programming
❖ TypeScript = ES6 + Optional Typing
Why using it?
❖ Javascript is not designed for Large-Scale applications
❖ OOP programming
❖ TypeScript = ES6 + Optional Typing
➢ …
➢ For … of
➢ Spread operator
➢ Promise
➢ Proxy
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
➢ React
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
➢ React
❖ Type checking when typing
Why using it?
❖ Prevent Javascript common mistake (Non-blocking issue)
Why using it?
❖ Prevent Javascript common mistake (Non-blocking issue)
❖ Output for ES5, ES6, ES7 and future Javascript
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
CommonJS
SystemJS
AMD (Asynchronous Module Definition)
UMD (Universal Module Definition)
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.
CoffeeScript
Dart
TypeScript
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
Cons
❖ Write more type definitions
❖ Need to setup Typescript compiler
❖ Remove some free style
Demo❖ Installation
$ sudo npm install -g typescript
❖ Tools➢ Visual Studio, Visual Studio Code, Web Maxtrix➢ Eclipse, Netbean➢ Vim➢ Atom➢ Sublime➢ Grunt, Gulp
Demo - Supported types
❖ boolean
❖ number
❖ string
❖ enum
❖ any
❖ void
❖ array
Demo - ES6 features
❖ let
❖ arrow function
❖ const
❖ template string
Demo - OOP
❖ Interface
❖ Supporting ES6 for class-based OOP
❖ Inheritance
❖ public, protected and private members
❖ Modules
❖ Functions
❖ Mixins
Demo - Output
❖ ES5
❖ ES6
❖ CommonJS
❖ System
❖ AMD
❖ UMD
Demo - Migrate from existing application
❖ DefinitelyTyped
➢ https://github.com/DefinitelyTyped/DefinitelyTyped
❖ Tools:
➢ $ sudo npm install -g typings
Thanks