Sie sind auf Seite 1von 61
@Sander_Mak TypeScript coding JavaScript without the pain Luminis Technologies

@Sander_Mak

TypeScript

coding JavaScript without the pain

Luminis Technologies

INTRO

INTRO @Sander_Mak : Senior Software Engineer at Author: Dutch Java Magazine blog @ branchandbound.net Speaker:

@Sander_Mak: Senior Software Engineer at

Author:

INTRO @Sander_Mak : Senior Software Engineer at Author: Dutch Java Magazine blog @ branchandbound.net Speaker:

Dutch

Java

Magazine

INTRO @Sander_Mak : Senior Software Engineer at Author: Dutch Java Magazine blog @ branchandbound.net Speaker:

blog @ branchandbound.net

Speaker:

INTRO @Sander_Mak : Senior Software Engineer at Author: Dutch Java Magazine blog @ branchandbound.net Speaker:
INTRO @Sander_Mak : Senior Software Engineer at Author: Dutch Java Magazine blog @ branchandbound.net Speaker:
INTRO @Sander_Mak : Senior Software Engineer at Author: Dutch Java Magazine blog @ branchandbound.net Speaker:

AGENDA

Why TypeScript?AGENDA Language introduction / live-coding TypeScript and Angular Comparison with TS alternatives Conclusion

Language introduction / live-codingAGENDA Why TypeScript? TypeScript and Angular Comparison with TS alternatives Conclusion

TypeScript and AngularAGENDA Why TypeScript? Language introduction / live-coding Comparison with TS alternatives Conclusion

Comparison with TS alternativesAGENDA Why TypeScript? Language introduction / live-coding TypeScript and Angular Conclusion

ConclusionAGENDA Why TypeScript? Language introduction / live-coding TypeScript and Angular Comparison with TS alternatives

Why TypeScript? Language introduction / live-coding TypeScript and Angular Comparison with TS alternatives Conclusion
Why TypeScript? Language introduction / live-coding TypeScript and Angular Comparison with TS alternatives Conclusion

WHAT'S WRONG WITH JAVASCRIPT?

Dynamic typingWHAT'S WRONG WITH JAVASCRIPT? Lack of modularity Verbose patterns (IIFE)

Lack of modularityWHAT'S WRONG WITH JAVASCRIPT? Dynamic typing Verbose patterns (IIFE)

Verbose patterns (IIFE)WHAT'S WRONG WITH JAVASCRIPT? Dynamic typing Lack of modularity

WHAT'S WRONG WITH JAVASCRIPT? Dynamic typing Lack of modularity Verbose patterns (IIFE)
WHAT'S WRONG WITH JAVASCRIPT? Dynamic typing Lack of modularity Verbose patterns (IIFE)

WHAT'S WRONG WITH JAVASCRIPT?

Dynamic typingWHAT'S WRONG WITH JAVASCRIPT? Lack of modularity Verbose patterns (IIFE) In short: JavaScript development scales badly

Lack of modularityWHAT'S WRONG WITH JAVASCRIPT? Dynamic typing Verbose patterns (IIFE) In short: JavaScript development scales badly

Verbose patterns (IIFE)WHAT'S WRONG WITH JAVASCRIPT? Dynamic typing Lack of modularity In short: JavaScript development scales badly

In short:

JavaScript development scales badly

WITH JAVASCRIPT? Dynamic typing Lack of modularity Verbose patterns (IIFE) In short: JavaScript development scales badly
WITH JAVASCRIPT? Dynamic typing Lack of modularity Verbose patterns (IIFE) In short: JavaScript development scales badly

WHAT'S GOOD ABOUT JAVASCRIPT?

It's everywhereWHAT'S GOOD ABOUT JAVASCRIPT? Huge amount of libraries Flexible

Huge amount of librariesWHAT'S GOOD ABOUT JAVASCRIPT? It's everywhere Flexible

FlexibleWHAT'S GOOD ABOUT JAVASCRIPT? It's everywhere Huge amount of libraries

WHAT'S GOOD ABOUT JAVASCRIPT? It's everywhere Huge amount of libraries Flexible
WHAT'S GOOD ABOUT JAVASCRIPT? It's everywhere Huge amount of libraries Flexible
WHAT'S GOOD ABOUT JAVASCRIPT? It's everywhere Huge amount of libraries Flexible
WISHLIST Scalable HTML5 clientside development Modular development Easily learnable for Java developers Non-invasive

WISHLIST

Scalable HTML5 clientside developmentWISHLIST Modular development Easily learnable for Java developers Non-invasive (existing libs, browser support) Long-term

Modular developmentWISHLIST Scalable HTML5 clientside development Easily learnable for Java developers Non-invasive (existing libs, browser

Easily learnable for Java developersScalable HTML5 clientside development Modular development Non-invasive (existing libs, browser support) Long-term

Non-invasive (existing libs, browser support)development Modular development Easily learnable for Java developers Long-term vision Clean JS output (exit strategy)

Long-term visionEasily learnable for Java developers Non-invasive (existing libs, browser support) Clean JS output (exit strategy)

Clean JS output (exit strategy)Modular development Easily learnable for Java developers Non-invasive (existing libs, browser support) Long-term vision

for Java developers Non-invasive (existing libs, browser support) Long-term vision Clean JS output (exit strategy)
for Java developers Non-invasive (existing libs, browser support) Long-term vision Clean JS output (exit strategy)
WISHLIST ✓ ✓ ✓ ✓ ✓ ✓ Scalable HTML5 clientside development Modular development Easily learnable

WISHLIST

WISHLIST ✓ ✓ ✓ ✓ ✓ ✓ Scalable HTML5 clientside development Modular development Easily learnable for

WISHLIST ✓ ✓ ✓ ✓ ✓ Scalable HTML5 clientside development Modular development Easily learnable for Java

WISHLIST ✓ ✓ ✓ ✓ ✓ ✓ Scalable HTML5 clientside development Modular development Easily learnable for

WISHLIST ✓ ✓ ✓ ✓ ✓ ✓ Scalable HTML5 clientside development Modular development Easily learnable for

WISHLIST ✓ ✓ ✓ ✓ ✓ ✓ Scalable HTML5 clientside development Modular development Easily learnable for

WISHLIST ✓ ✓ ✓ ✓ ✓ ✓ Scalable HTML5 clientside development Modular development Easily learnable for

Scalable HTML5 clientside development Modular development Easily learnable for Java developers Non-invasive (existing libs, browser support) Long-term vision Clean JS output (exit strategy)

for Java developers Non-invasive (existing libs, browser support) Long-term vision Clean JS output (exit strategy)
for Java developers Non-invasive (existing libs, browser support) Long-term vision Clean JS output (exit strategy)
2.0 licensed
2.0 licensed
2.0 licensed
2.0 licensed
2.0 licensed
2.0 licensed
2.0 licensed
2.0 licensed
2.0 licensed

TYPESCRIPT

Superset of JavaScriptTYPESCRIPT Optionally typed Compiles to ES3/ES5 No special runtime 1.0 in April 2014, future ES6 alignment

Optionally typedTYPESCRIPT Superset of JavaScript Compiles to ES3/ES5 No special runtime 1.0 in April 2014, future ES6

Compiles to ES3/ES5TYPESCRIPT Superset of JavaScript Optionally typed No special runtime 1.0 in April 2014, future ES6 alignment

No special runtimeTYPESCRIPT Superset of JavaScript Optionally typed Compiles to ES3/ES5 1.0 in April 2014, future ES6 alignment

1.0 in April 2014, future ES6 alignmentTYPESCRIPT Superset of JavaScript Optionally typed Compiles to ES3/ES5 No special runtime

Superset of JavaScript Optionally typed Compiles to ES3/ES5 No special runtime 1.0 in April 2014, future
Superset of JavaScript Optionally typed Compiles to ES3/ES5 No special runtime 1.0 in April 2014, future

TYPESCRIPT

Superset of JavaScriptTYPESCRIPT Optionally typed Compiles to ES3/ES5 No special runtime 1.0 in April 2014, future ES6 alignment

Optionally typedTYPESCRIPT Superset of JavaScript Compiles to ES3/ES5 No special runtime 1.0 in April 2014, future ES6

Compiles to ES3/ES5TYPESCRIPT Superset of JavaScript Optionally typed No special runtime 1.0 in April 2014, future ES6 alignment

No special runtimeSuperset of JavaScript Optionally typed Compiles to ES3/ES5 1.0 in April 2014, future ES6 alignment In

1.0 in April 2014, future ES6 alignmentSuperset of JavaScript Optionally typed Compiles to ES3/ES5 No special runtime In short: Lightweight productivity booster

In short:

Lightweight productivity booster

Compiles to ES3/ES5 No special runtime 1.0 in April 2014, future ES6 alignment In short: Lightweight
Compiles to ES3/ES5 No special runtime 1.0 in April 2014, future ES6 alignment In short: Lightweight

GETTING STARTED

$ npm install -g typescript $ mv mycode.js mycode.ts

$ tsc mycode.ts

GETTING STARTED $ npm install -g typescript $ mv mycode.js mycode.ts $ tsc mycode.ts
GETTING STARTED $ npm install -g typescript $ mv mycode.js mycode.ts $ tsc mycode.ts
GETTING STARTED $ npm install -g typescript $ mv mycode.js mycode.ts $ tsc mycode.ts

GETTING STARTED

$ npm install -g typescript $ mv mycode.js mycode.ts

$ tsc mycode.ts

STARTED $ npm install -g typescript $ mv mycode.js mycode.ts $ tsc mycode.ts May even find

May even find problems in existing JS!

STARTED $ npm install -g typescript $ mv mycode.js mycode.ts $ tsc mycode.ts May even find
STARTED $ npm install -g typescript $ mv mycode.js mycode.ts $ tsc mycode.ts May even find

OPTIONAL TYPES

Type annotations

> var a = 123 JS > a.trim() ! TypeError: undefined is not a function
> var a = 123
JS
> a.trim()
!
TypeError: undefined is
not a function
> var a: string = 123 TS > a.trim() ! Cannot convert 'number' to 'string'.
> var a: string = 123
TS
> a.trim()
!
Cannot convert 'number'
to 'string'.

runtime

compile-time

var a: string = 123 TS > a.trim() ! Cannot convert 'number' to 'string'. runtime compile-time
var a: string = 123 TS > a.trim() ! Cannot convert 'number' to 'string'. runtime compile-time

OPTIONAL TYPES

Type annotations

!

> var a = 123

> a.trim()

JS

TypeError: undefined is not a function

!

> var a: string = 123

> a.trim()

TS

Cannot convert 'number' to 'string'.

Type inference

> var a = 123

> a.trim()

!

The property 'trim' does not exist on value of type 'number'.

Types dissapear at runtime

a.trim() ! The property 'trim' does not exist on value of type 'number'. Types dissapear at
a.trim() ! The property 'trim' does not exist on value of type 'number'. Types dissapear at

OPTIONAL TYPES

Object void

OPTIONAL TYPES Object void void any b o o l e a n integer long short
OPTIONAL TYPES Object void void any b o o l e a n integer long short
OPTIONAL TYPES Object void void any b o o l e a n integer long short
OPTIONAL TYPES Object void void any b o o l e a n integer long short

void

any

boolean

OPTIONAL TYPES Object void void any b o o l e a n integer long short

integer

long

short

TYPES Object void void any b o o l e a n integer long short boolean

boolean number

String

char

TYPES Object void void any b o o l e a n integer long short boolean

string

Type[]

TYPES Object void void any b o o l e a n integer long short boolean

type[]

TYPES Object void void any b o o l e a n integer long short boolean
TYPES Object void void any b o o l e a n integer long short boolean

OPTIONAL TYPES

Types are structural rather than nominal

OPTIONAL TYPES Types are structural rather than nominal TypeScript has function types: var find: (elem: string,
OPTIONAL TYPES Types are structural rather than nominal TypeScript has function types: var find: (elem: string,

TypeScript has function types:

var find: (elem: string, elems: string[]) => string = function(elem, elems) {

}

TypeScript has function types: var find: (elem: string, elems: string[]) => string = function(elem, elems) {
TypeScript has function types: var find: (elem: string, elems: string[]) => string = function(elem, elems) {

OPTIONAL TYPES

Types are structural rather than nominal

OPTIONAL TYPES Types are structural rather than nominal TypeScript has function types: var find: (elem: string,
OPTIONAL TYPES Types are structural rather than nominal TypeScript has function types: var find: (elem: string,

TypeScript has function types:

var find:

(elem: string, elems: string[]) => string

=

function(elem, elems) {

}

has function types: var find: (elem: string, elems: string[]) => string = function(elem, elems) { }
has function types: var find: (elem: string, elems: string[]) => string = function(elem, elems) { }

DEMO: OPTIONAL TYPES

code

DEMO: OPTIONAL TYPES code Code : http://bit.ly/tscode

Code: http://bit.ly/tscode

DEMO: OPTIONAL TYPES code Code : http://bit.ly/tscode
DEMO: OPTIONAL TYPES code Code : http://bit.ly/tscode

INTERFACES

interface MyInterface { // Call signature (param: number): string

member: number optionalMember?: number

myMethod(param: string): void

}

!

var instance: MyInterface =

instance(1)

member: number optionalMember?: number myMethod(param: string): void } ! var instance: MyInterface = instance(1)
member: number optionalMember?: number myMethod(param: string): void } ! var instance: MyInterface = instance(1)

INTERFACES

Use them to describe data returned in REST calls

$.getJSON('user/123').then((user: User) => { showProfile(user.details)

}

data returned in REST calls $.getJSON('user/123').then((user: User) => { showProfile(user.details) }
data returned in REST calls $.getJSON('user/123').then((user: User) => { showProfile(user.details) }

INTERFACES

TS interfaces are open-ended:

interface JQuery {

}

appendTo(

):

jquery.d.ts

interface JQuery {

}

draggable(

):

jquery.ui.d.ts

interface JQuery { } appendTo( ): jquery.d.ts interface JQuery { } draggable( ): jquery.ui.d.ts
interface JQuery { } appendTo( ): jquery.d.ts interface JQuery { } draggable( ): jquery.ui.d.ts

OPTIONAL TYPES: ENUMS

enum Language { TypeScript, Java, JavaScript }

var lang = Language.TypeScript var ts = Language[0] ts === "TypeScript"

enum Language { TypeScript = 1, Java, JavaScript }

var ts = Language[1]

= Language[0] ts === "TypeScript" enum Language { TypeScript = 1, Java, JavaScript } var ts
= Language[0] ts === "TypeScript" enum Language { TypeScript = 1, Java, JavaScript } var ts

GOING ALL THE WAY

Force explicit typing with noImplicitAny

var ambiguousType;

!

ambiguousType = 1 ambiguousType = "text"

noimplicitany.ts

$ tsc --noImplicitAny noimplicitany.ts

= 1 ambiguousType = "text" n o i m p l i c i t a
= 1 ambiguousType = "text" n o i m p l i c i t a

GOING ALL THE WAY

Force explicit typing with noImplicitAny

var ambiguousType;

!

ambiguousType = 1 ambiguousType = "text"

noimplicitany.ts

$ tsc --noImplicitAny noimplicitany.ts

error TS7005: Variable 'ambiguousType' implicitly has an 'any' type.

tsc --noImplicitAny noimplicitany.ts error TS7005: Variable 'ambiguousType' implicitly has an 'any' type.
tsc --noImplicitAny noimplicitany.ts error TS7005: Variable 'ambiguousType' implicitly has an 'any' type.

TYPESCRIPT CLASSES

Can implement interfacesTYPESCRIPT CLASSES Inheritance Instance methods/members Static methods/members Single constructor Default/optional

InheritanceTYPESCRIPT CLASSES Can implement interfaces Instance methods/members Static methods/members Single constructor

Instance methods/membersTYPESCRIPT CLASSES Can implement interfaces Inheritance Static methods/members Single constructor Default/optional

Static methods/membersimplement interfaces Inheritance Instance methods/members Single constructor Default/optional parameters ES6 class

Single constructorInheritance Instance methods/members Static methods/members Default/optional parameters ES6 class syntax similar di f

Default/optional parametersInheritance Instance methods/members Static methods/members Single constructor ES6 class syntax similar di f erent

ES6 class syntaxInstance methods/members Static methods/members Single constructor Default/optional parameters similar di f erent

similar

methods/members Static methods/members Single constructor Default/optional parameters ES6 class syntax similar di f erent
methods/members Static methods/members Single constructor Default/optional parameters ES6 class syntax similar di f erent

di ferent

methods/members Static methods/members Single constructor Default/optional parameters ES6 class syntax similar di f erent
methods/members Static methods/members Single constructor Default/optional parameters ES6 class syntax similar di f erent

DEMO: TYPESCRIPT CLASSES

code

DEMO: TYPESCRIPT CLASSES code Code : http://bit.ly/tscode

Code: http://bit.ly/tscode

DEMO: TYPESCRIPT CLASSES code Code : http://bit.ly/tscode
DEMO: TYPESCRIPT CLASSES code Code : http://bit.ly/tscode

ARROW FUNCTIONS

Implicit returnARROW FUNCTIONS No braces for single expression Part of ES6

No braces for single expressionARROW FUNCTIONS Implicit return Part of ES6

Part of ES6ARROW FUNCTIONS Implicit return No braces for single expression

ARROW FUNCTIONS Implicit return No braces for single expression Part of ES6
ARROW FUNCTIONS Implicit return No braces for single expression Part of ES6
ARROW FUNCTIONS Implicit return No braces for single expression Part of ES6

ARROW FUNCTIONS

Implicit returnARROW FUNCTIONS No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase(); }

No braces for single expressionARROW FUNCTIONS Implicit return Part of ES6 function(arg1) { return arg1.toLowerCase(); }

Part of ES6ARROW FUNCTIONS Implicit return No braces for single expression function(arg1) { return arg1.toLowerCase(); }

ARROW FUNCTIONS Implicit return No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase();

function(arg1) { return arg1.toLowerCase();

}

ARROW FUNCTIONS Implicit return No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase();
ARROW FUNCTIONS Implicit return No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase();

ARROW FUNCTIONS

Implicit returnARROW FUNCTIONS No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase(); } (arg1)

No braces for single expressionARROW FUNCTIONS Implicit return Part of ES6 function(arg1) { return arg1.toLowerCase(); } (arg1) =>

Part of ES6FUNCTIONS Implicit return No braces for single expression function(arg1) { return arg1.toLowerCase(); } (arg1)

Implicit return No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase(); } (arg1)

function(arg1) { return arg1.toLowerCase();

}

(arg1) => arg1.toLowerCase();

braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase(); } (arg1) => arg1.toLowerCase();
braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase(); } (arg1) => arg1.toLowerCase();

ARROW FUNCTIONS

Implicit returnARROW FUNCTIONS No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase(); } (arg1)

No braces for single expressionARROW FUNCTIONS Implicit return Part of ES6 function(arg1) { return arg1.toLowerCase(); } (arg1) =>

Part of ES6FUNCTIONS Implicit return No braces for single expression function(arg1) { return arg1.toLowerCase(); } (arg1)

Implicit return No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase(); } (arg1)

function(arg1) { return arg1.toLowerCase();

}

(arg1) => arg1.toLowerCase();

Lexically-scoped this (no more 'var that = this')

arg1.toLowerCase(); } (arg1) => arg1.toLowerCase(); Lexically-scoped this (no more ' var that = this' )
arg1.toLowerCase(); } (arg1) => arg1.toLowerCase(); Lexically-scoped this (no more ' var that = this' )

DEMO: ARROW FUNCTIONS

code

DEMO: ARROW FUNCTIONS code Code : http://bit.ly/tscode

Code: http://bit.ly/tscode

DEMO: ARROW FUNCTIONS code Code : http://bit.ly/tscode
DEMO: ARROW FUNCTIONS code Code : http://bit.ly/tscode

TYPE DEFINITIONS How to integrate existing JS code?

Ambient declarationsTYPE DEFINITIONS How to integrate existing JS code? Any-type :( Type definitions lib.d.ts Separate compilation: tsc

Any-type :(How to integrate existing JS code? Ambient declarations Type definitions lib.d.ts Separate compilation: tsc

Type definitionsto integrate existing JS code? Ambient declarations Any-type :( lib.d.ts Separate compilation: tsc --declaration file.ts

lib.d.tsexisting JS code? Ambient declarations Any-type :( Type definitions Separate compilation: tsc --declaration file.ts

Separate compilation:How to integrate existing JS code? Ambient declarations Any-type :( Type definitions lib.d.ts tsc --declaration file.ts

tsc --declaration file.ts

JS code? Ambient declarations Any-type :( Type definitions lib.d.ts Separate compilation: tsc --declaration file.ts
JS code? Ambient declarations Any-type :( Type definitions lib.d.ts Separate compilation: tsc --declaration file.ts

TYPE DEFINITIONS How to integrate existing JS code?

DefinitelyTyped.org

Community provided .d.ts files for popular JS libs

Ambient declarationsCommunity provided .d.ts files for popular JS libs Any-type :( Type definitions lib.d.ts Separate compilation:

Any-type :(.d.ts files for popular JS libs Ambient declarations Type definitions lib.d.ts Separate compilation: tsc

Type definitions.d.ts files for popular JS libs Ambient declarations Any-type :( lib.d.ts Separate compilation: tsc --declaration file.ts

lib.d.tsfor popular JS libs Ambient declarations Any-type :( Type definitions Separate compilation: tsc --declaration file.ts

Separate compilation:.d.ts files for popular JS libs Ambient declarations Any-type :( Type definitions lib.d.ts tsc --declaration file.ts

JS libs Ambient declarations Any-type :( Type definitions lib.d.ts Separate compilation: tsc --declaration file.ts

tsc --declaration file.ts

JS libs Ambient declarations Any-type :( Type definitions lib.d.ts Separate compilation: tsc --declaration file.ts
JS libs Ambient declarations Any-type :( Type definitions lib.d.ts Separate compilation: tsc --declaration file.ts
JS libs Ambient declarations Any-type :( Type definitions lib.d.ts Separate compilation: tsc --declaration file.ts

INTERNAL MODULES

module StorageModule { export interface Storage { store(content: string): void } ! var privateKey =

module StorageModule { export interface Storage { store(content: string): void }

!

var privateKey = 'storageKey';

export class LocalStorage implements Storage { store(content: string): void { localStorage.setItem(privateKey, content);

!

}

}

export class DevNullStorage implements Storage { store(content: string): void { }

}

!

}

var storage: StorageModule.Storage = new StorageModule.LocalStorage(); storage.store('testing');

void { } } ! } var storage: StorageModule.Storage = new StorageModule.LocalStorage(); storage.store('testing');
{ } } ! } var storage: StorageModule.Storage = new StorageModule.LocalStorage(); storage.store('testing');
{ } } ! } var storage: StorageModule.Storage = new StorageModule.LocalStorage(); storage.store('testing');

INTERNAL MODULES

module StorageModule { export interface Storage { store(content: string): void } ! var privateKey =
module StorageModule {
export interface Storage { store(content: string): void }
!
var privateKey = 'storageKey';
export class LocalStorage implements Storage {
store(content: string): void {
localStorage.setItem(privateKey, content);
}
}
!
export class DevNullStorage implements Storage {
store(content: string): void { }
}
}
!
var storage: StorageModule.Storage = new StorageModule.LocalStorage();
storage.store('testing');

INTERNAL MODULES

module StorageModule { export interface Storage { store(content: string): void } ! var privateKey =
module StorageModule {
export interface Storage { store(content: string): void }
!
var privateKey = 'storageKey';
export class LocalStorage implements Storage {
store(content: string): void {
localStorage.setItem(privateKey, content);
}
}
!
export class DevNullStorage implements Storage {
store(content: string): void { }
}
}
!
var storage: StorageModule.Storage = new StorageModule.LocalStorage();
storage.store('testing');

INTERNAL MODULES

module StorageModule { export interface Storage { store(content: string): void } ! var privateKey =
module StorageModule {
export interface Storage { store(content: string): void }
!
var privateKey = 'storageKey';
export class LocalStorage implements Storage {
store(content: string): void {
localStorage.setItem(privateKey, content);
}
}
!
export class DevNullStorage implements Storage {
store(content: string): void { }
}
}
!
var storage: StorageModule.Storage = new StorageModule.LocalStorage();
storage.store('testing');

INTERNAL MODULES

TS internal modules are open-ended:

!

module Webshop { export class Cart {

}

}

cart.ts

/// <reference path="cart.ts" /> module Webshop { export class Catalog {

}

}

main.ts

} } cart.ts /// <reference path="cart.ts" /> module Webshop { export class Catalog { } }
} } cart.ts /// <reference path="cart.ts" /> module Webshop { export class Catalog { } }

INTERNAL MODULES

TS internal modules are open-ended:

!

module Webshop { export class Cart {

}

}

cart.ts

Can be hierarchical:

module Webshop.Cart.Backend {

}

/// <reference path="cart.ts" /> module Webshop { export class Catalog {

}

}

main.ts

{ } /// <reference path="cart.ts" /> module Webshop { export class Catalog { } } main.ts
{ } /// <reference path="cart.ts" /> module Webshop { export class Catalog { } } main.ts

INTERNAL MODULES

TS internal modules are open-ended:

!

module Webshop { export class Cart {

}

}

cart.ts

Can be hierarchical:

module Webshop.Cart.Backend {

}

/// <reference path="cart.ts" /> module Webshop { export class Catalog {

}

}

main.ts

Combine modules:

$ tsc --out main.js main.ts

/> module Webshop { export class Catalog { } } main.ts Combine modules: $ tsc --out
/> module Webshop { export class Catalog { } } main.ts Combine modules: $ tsc --out

DEMO: PUTTING IT ALL TOGETHER

code

DEMO: PUTTING IT ALL TOGETHER code Code : http://bit.ly/tscode

Code: http://bit.ly/tscode

DEMO: PUTTING IT ALL TOGETHER code Code : http://bit.ly/tscode
DEMO: PUTTING IT ALL TOGETHER code Code : http://bit.ly/tscode

EXTERNAL MODULES

CommonJS

Asynchronous

Module

Definitions

$ tsc --module common main.ts

$ tsc --module amd main.ts

Combine with module loader

Asynchronous Module Definitions $ tsc --module common main.ts $ tsc --module amd main.ts Combine with module
Asynchronous Module Definitions $ tsc --module common main.ts $ tsc --module amd main.ts Combine with module

EXTERNAL MODULES

'Standards-based', use existing external modulesEXTERNAL MODULES Automatic dependency management Lazy loading AMD verbose without TypeScript Currently not ES6-compatible

Automatic dependency management'Standards-based', use existing external modules Lazy loading AMD verbose without TypeScript Currently not

Lazy loadinguse existing external modules Automatic dependency management AMD verbose without TypeScript Currently not ES6-compatible

AMD verbose without TypeScriptuse existing external modules Automatic dependency management Lazy loading Currently not ES6-compatible

Currently not ES6-compatibleuse existing external modules Automatic dependency management Lazy loading AMD verbose without TypeScript

external modules Automatic dependency management Lazy loading AMD verbose without TypeScript Currently not ES6-compatible
external modules Automatic dependency management Lazy loading AMD verbose without TypeScript Currently not ES6-compatible

DEMO

DEMO + = +

+

DEMO + = +

=

+

DEMO + = +
DEMO + = +
DEMO + = +
DEMO + = +

DEMO: TYPESCRIPT AND ANGULAR

code

DEMO: TYPESCRIPT AND ANGULAR code Code : http://bit.ly/tscode

Code: http://bit.ly/tscode

DEMO: TYPESCRIPT AND ANGULAR code Code : http://bit.ly/tscode
DEMO: TYPESCRIPT AND ANGULAR code Code : http://bit.ly/tscode

BUILDING TYPESCRIPT

$ tsc -watch main.ts

BUILDING TYPESCRIPT $ tsc -watch main.ts gulp-type (incremental) gulp-tsc grunt-typescript grunt-ts

gulp-type (incremental)

gulp-tsc

BUILDING TYPESCRIPT $ tsc -watch main.ts gulp-type (incremental) gulp-tsc grunt-typescript grunt-ts

grunt-typescript

grunt-ts

BUILDING TYPESCRIPT $ tsc -watch main.ts gulp-type (incremental) gulp-tsc grunt-typescript grunt-ts
BUILDING TYPESCRIPT $ tsc -watch main.ts gulp-type (incremental) gulp-tsc grunt-typescript grunt-ts

TOOLING

IntelliJ IDEA WebStorm
IntelliJ IDEA
WebStorm
TOOLING IntelliJ IDEA WebStorm plugin

plugin

TOOLING IntelliJ IDEA WebStorm plugin
TOOLING IntelliJ IDEA WebStorm plugin
TOOLING IntelliJ IDEA WebStorm plugin
TOOLING IntelliJ IDEA WebStorm plugin

TYPESCRIPT vs ES6 HARMONY

TYPESCRIPT vs ES6 HARMONY Complete language + runtime overhaul More features: generators, comprehensions, object literals

Complete language + runtime overhaulTYPESCRIPT vs ES6 HARMONY More features: generators, comprehensions, object literals Will take years before widely

More features: generators, comprehensions, object literalsvs ES6 HARMONY Complete language + runtime overhaul Will take years before widely deployed No typing

Will take years before widely deployedComplete language + runtime overhaul More features: generators, comprehensions, object literals No typing (possible ES7)

No typing (possible ES7)+ runtime overhaul More features: generators, comprehensions, object literals Will take years before widely deployed

More features: generators, comprehensions, object literals Will take years before widely deployed No typing (possible ES7)
More features: generators, comprehensions, object literals Will take years before widely deployed No typing (possible ES7)

TYPESCRIPT vs COFFEESCRIPT

TYPESCRIPT vs COFFEESCRIPT Also a compile-to-JS language More syntactic sugar, still dynamically typed JS is not

Also a compile-to-JS languageTYPESCRIPT vs COFFEESCRIPT More syntactic sugar, still dynamically typed JS is not valid Co f eeScript

More syntactic sugar, still dynamically typedTYPESCRIPT vs COFFEESCRIPT Also a compile-to-JS language JS is not valid Co f eeScript No spec,

JS is not valid Co f eeScript feeScript

No spec, definitely no Anders HejlsbergMore syntactic sugar, still dynamically typed JS is not valid Co f eeScript Future: CS doesn't

Future: CS doesn't track ECMAScript 6More syntactic sugar, still dynamically typed JS is not valid Co f eeScript No spec, definitely

!

typed JS is not valid Co f eeScript No spec, definitely no Anders Hejlsberg Future: CS
typed JS is not valid Co f eeScript No spec, definitely no Anders Hejlsberg Future: CS

TYPESCRIPT vs DART

TYPESCRIPT vs DART Dart VM + stdlib (also compile-to-JS) Optionally typed Completely di f erent syntax

Dart VM + stdlib (also compile-to-JS)TYPESCRIPT vs DART Optionally typed Completely di f erent syntax & semantics than JS JS interop

Optionally typedTYPESCRIPT vs DART Dart VM + stdlib (also compile-to-JS) Completely di f erent syntax & semantics

Completely di f erent syntax & semantics than JS ferent syntax & semantics than JS

JS interop through dart:js libraryVM + stdlib (also compile-to-JS) Optionally typed Completely di f erent syntax & semantics than JS

ECMA Dart speccompile-to-JS) Optionally typed Completely di f erent syntax & semantics than JS JS interop through dart:js

Optionally typed Completely di f erent syntax & semantics than JS JS interop through dart:js library
Optionally typed Completely di f erent syntax & semantics than JS JS interop through dart:js library

TYPESCRIPT vs CLOSURE COMPILER

TYPESCRIPT vs CLOSURE COMPILER Google Closure Compiler Pure JS Types in JsDoc comments Less expressive Focus

Google Closure Compiler

Pure JSTYPESCRIPT vs CLOSURE COMPILER Google Closure Compiler Types in JsDoc comments Less expressive Focus on optimization,

Types in JsDoc commentsTYPESCRIPT vs CLOSURE COMPILER Google Closure Compiler Pure JS Less expressive Focus on optimization, dead-code removal

Less expressivevs CLOSURE COMPILER Google Closure Compiler Pure JS Types in JsDoc comments Focus on optimization, dead-code

Focus on optimization, dead-code removalTYPESCRIPT vs CLOSURE COMPILER Google Closure Compiler Pure JS Types in JsDoc comments Less expressive

COMPILER Google Closure Compiler Pure JS Types in JsDoc comments Less expressive Focus on optimization, dead-code
COMPILER Google Closure Compiler Pure JS Types in JsDoc comments Less expressive Focus on optimization, dead-code

WHO USES TYPESCRIPT?

WHO USES TYPESCRIPT? (duh)
WHO USES TYPESCRIPT? (duh)

(duh)

WHO USES TYPESCRIPT? (duh)
WHO USES TYPESCRIPT? (duh)
WHO USES TYPESCRIPT? (duh)
WHO USES TYPESCRIPT? (duh)
WHO USES TYPESCRIPT? (duh)
WHO USES TYPESCRIPT? (duh)

CONCLUSION

Internal modules Classes/Interfaces Some typing

External modules Type defs More typing

Generics Type defs -noImplicitAny

modules Classes/Interfaces Some typing External modules Type defs More typing Generics Type defs -noImplicitAny
modules Classes/Interfaces Some typing External modules Type defs More typing Generics Type defs -noImplicitAny

CONCLUSION

TypeScript allows for gradual adoption

Internal modules Classes/Interfaces Some typing

External modules Type defs More typing

Generics Type defs -noImplicitAny

modules Classes/Interfaces Some typing External modules Type defs More typing Generics Type defs -noImplicitAny
modules Classes/Interfaces Some typing External modules Type defs More typing Generics Type defs -noImplicitAny

CONCLUSION

Some downsides:

Still need to know some JS quirksCONCLUSION Some downsides: Current compiler slowish (faster one in the works) External module syntax not ES6-compatible

Current compiler slowish (faster one in the works)CONCLUSION Some downsides: Still need to know some JS quirks External module syntax not ES6-compatible (yet)

External module syntax not ES6-compatible (yet)Still need to know some JS quirks Current compiler slowish (faster one in the works) Non-MS

Non-MS tooling lagging a bitto know some JS quirks Current compiler slowish (faster one in the works) External module syntax

compiler slowish (faster one in the works) External module syntax not ES6-compatible (yet) Non-MS tooling lagging
compiler slowish (faster one in the works) External module syntax not ES6-compatible (yet) Non-MS tooling lagging
compiler slowish (faster one in the works) External module syntax not ES6-compatible (yet) Non-MS tooling lagging

CONCLUSION

High value, low cost improvement over JavaScriptCONCLUSION Safer and more modular Solid path to ES6

Safer and more modularCONCLUSION High value, low cost improvement over JavaScript Solid path to ES6

Solid path to ES6CONCLUSION High value, low cost improvement over JavaScript Safer and more modular

CONCLUSION High value, low cost improvement over JavaScript Safer and more modular Solid path to ES6
CONCLUSION High value, low cost improvement over JavaScript Safer and more modular Solid path to ES6
CONCLUSION High value, low cost improvement over JavaScript Safer and more modular Solid path to ES6

MORE TALKS

TypeScript:

Wednesday, 11:30 AM, same room

Akka ! & Event-sourcing Wednesday, 8:30 AM, same room

@Sander_Mak Luminis Technologies

11:30 AM, same room Akka ! & Event-sourcing Wednesday, 8:30 AM, same room @Sander_Mak Luminis Technologies
11:30 AM, same room Akka ! & Event-sourcing Wednesday, 8:30 AM, same room @Sander_Mak Luminis Technologies

RESOURCES

Code: http://bit.ly/tscode

!

Learn: www.typescriptlang.org/Handbook

@Sander_Mak Luminis Technologies

RESOURCES Code : http://bit.ly/tscode ! Learn : www.typescriptlang.org/Handbook @Sander_Mak Luminis Technologies
RESOURCES Code : http://bit.ly/tscode ! Learn : www.typescriptlang.org/Handbook @Sander_Mak Luminis Technologies