introduction about type script

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