SlideShare une entreprise Scribd logo
1  sur  61
Télécharger pour lire hors ligne
TypeScript 
coding JavaScript 
without the pain 
@Sander_Mak Luminis Technologies
INTRO 
@Sander_Mak: Senior Software Engineer at 
Author: 
Dutch 
Java 
Magazine 
blog @ branchandbound.net 
Speaker:
AGENDA 
Why TypeScript? 
Language introduction / live-coding 
TypeScript and Angular 
Comparison with TS alternatives 
Conclusion
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) 
In short: JavaScript development scales badly
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 (existing libs, browser support) 
Long-term vision 
Clean JS output (exit strategy)
WISHLIST 
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) 
✓✓✓✓✓✓
2.0 licensed
2.0 licensed
TYPESCRIPT 
Superset of JavaScript 
Optionally typed 
Compiles to ES3/ES5 
No special runtime 
1.0 in April 2014, future ES6 alignment
TYPESCRIPT 
Superset of JavaScript 
Optionally typed 
Compiles to ES3/ES5 
No special runtime 
1.0 in April 2014, future ES6 alignment 
In short: Lightweight productivity booster
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 
May even find problems in existing JS!
OPTIONAL TYPES 
Type annotations 
> var a = 123 
> a.trim() 
! 
TypeError: undefined is 
not a function 
JS 
> var a: string = 123 
> a.trim() 
! 
Cannot convert 'number' 
to 'string'. 
TS 
runtime 
compile-time
OPTIONAL TYPES 
Type annotations 
> var a = 123 
> a.trim() 
! 
TypeError: undefined is 
not a function 
JS 
> var a: string = 123 
> a.trim() 
! 
Cannot convert 'number' 
to 'string'. 
TS 
Type inference 
> var a = 123 
> a.trim() 
! 
The property 'trim' does 
not exist on value of 
type 'number'. 
Types dissapear at runtime
OPTIONAL TYPES 
Object void boolean integer 
long 
short 
... 
String 
char 
Type[] 
any void boolean number string type[]
OPTIONAL TYPES 
Types are structural rather than nominal 
TypeScript has function types: 
var find: (elem: string, elems: string[]) => string = 
function(elem, elems) { 
.. 
}
OPTIONAL TYPES 
Types are structural rather than nominal 
TypeScript has function types: 
var find: (elem: string, elems: string[]) => string = 
function(elem, elems) { 
.. 
}
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)
INTERFACES 
Use them to describe data returned in REST calls 
$.getJSON('user/123').then((user: User) => { 
showProfile(user.details) 
}
INTERFACES 
TS interfaces are open-ended: 
interface JQuery { 
appendTo(..): .. 
.. 
} 
interface JQuery { 
draggable(..): .. 
.. 
jquery.d.ts } 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]
GOING ALL THE WAY 
Force explicit typing with noImplicitAny 
var ambiguousType; 
! 
ambiguousType = 1 
ambiguousType = "text" noimplicitany.ts 
$ tsc --noImplicitAny noimplicitany.ts
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.
TYPESCRIPT CLASSES 
Can implement interfaces 
Inheritance 
Instance methods/members 
Static methods/members 
Single constructor 
Default/optional parameters 
ES6 class syntax 
similar 
different
DEMO: TYPESCRIPT CLASSES 
code 
Code: http://bit.ly/tscode
ARROW FUNCTIONS 
Implicit return 
No braces for single expression 
Part of ES6
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(); 
} 
(arg1) => arg1.toLowerCase();
ARROW FUNCTIONS 
Implicit return 
No braces for single expression 
Part of ES6 
function(arg1) { 
return arg1.toLowerCase(); 
} 
(arg1) => arg1.toLowerCase(); 
Lexically-scoped this (no more 'var that = this')
DEMO: ARROW FUNCTIONS 
code 
Code: http://bit.ly/tscode
TYPE DEFINITIONS 
How to integrate 
existing JS code? 
Ambient declarations 
Any-type :( 
Type definitions 
lib.d.ts 
Separate compilation: 
tsc --declaration file.ts
TYPE DEFINITIONS 
DefinitelyTyped.org 
Community provided .d.ts 
files for popular JS libs 
How to integrate 
existing JS code? 
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 = '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 = '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 = '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 = '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 { .. } 
} 
/// <reference path="cart.ts" /> 
module Webshop { 
export class Catalog { .. } 
cart.ts } main.ts
INTERNAL MODULES 
TS internal modules are open-ended: 
! 
module Webshop { 
export class Cart { .. } 
} 
/// <reference path="cart.ts" /> 
module Webshop { 
export class Catalog { .. } 
cart.ts } main.ts 
Can be hierarchical: 
module Webshop.Cart.Backend { 
... 
}
INTERNAL MODULES 
TS internal modules are open-ended: 
! 
module Webshop { 
export class Cart { .. } 
} 
/// <reference path="cart.ts" /> 
module Webshop { 
export class Catalog { .. } 
cart.ts } main.ts 
Can be hierarchical: 
module Webshop.Cart.Backend { 
... 
} 
Combine modules: 
$ tsc --out main.js main.ts
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
EXTERNAL MODULES 
'Standards-based', use existing external modules 
Automatic dependency management 
Lazy loading 
AMD verbose without TypeScript 
Currently not ES6-compatible
DEMO 
+ + 
=
DEMO: TYPESCRIPT AND ANGULAR 
code 
Code: http://bit.ly/tscode
BUILDING TYPESCRIPT 
$ tsc -watch main.ts 
grunt-typescript 
grunt-ts 
gulp-type (incremental) 
gulp-tsc
TOOLING 
IntelliJ IDEA 
WebStorm 
plugin
TYPESCRIPT vs ES6 HARMONY 
Complete language + runtime overhaul 
More features: generators, comprehensions, 
object literals 
Will take years before widely deployed 
No typing (possible ES7)
TYPESCRIPT vs COFFEESCRIPT 
Also a compile-to-JS language 
More syntactic sugar, still dynamically typed 
JS is not valid CoffeeScript 
No spec, definitely no Anders Hejlsberg... 
Future: CS doesn't track ECMAScript 6 
!
TYPESCRIPT vs DART 
Dart VM + stdlib (also compile-to-JS) 
Optionally typed 
Completely different syntax & semantics than JS 
JS interop through dart:js library 
ECMA Dart spec
TYPESCRIPT vs CLOSURE COMPILER 
Google Closure Compiler 
Pure JS 
Types in JsDoc comments 
Less expressive 
Focus on optimization, dead-code removal
WHO USES TYPESCRIPT? 
(duh)
CONCLUSION 
Internal 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
CONCLUSION 
Some downsides: 
Still need to know some JS quirks 
Current compiler slowish (faster one in the works) 
External module syntax not ES6-compatible (yet) 
Non-MS tooling lagging a bit
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
RESOURCES 
Code: http://bit.ly/tscode 
! 
Learn: www.typescriptlang.org/Handbook 
@Sander_Mak 
Luminis Technologies

Contenu connexe

Tendances

Typescript in 30mins
Typescript in 30mins Typescript in 30mins
Typescript in 30mins Udaya Kumar
 
Type script - advanced usage and practices
Type script  - advanced usage and practicesType script  - advanced usage and practices
Type script - advanced usage and practicesIwan van der Kleijn
 
TypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation GuideTypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation GuideNascenia IT
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous JavascriptGarrett Welson
 
Typescript overview
Typescript overviewTypescript overview
Typescript overviewThanvilahari
 
ES6 presentation
ES6 presentationES6 presentation
ES6 presentationritika1
 
Asynchronous JavaScript Programming
Asynchronous JavaScript ProgrammingAsynchronous JavaScript Programming
Asynchronous JavaScript ProgrammingHaim Michael
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming WebStackAcademy
 

Tendances (20)

TypeScript Presentation
TypeScript PresentationTypeScript Presentation
TypeScript Presentation
 
TypeScript VS JavaScript.pptx
TypeScript VS JavaScript.pptxTypeScript VS JavaScript.pptx
TypeScript VS JavaScript.pptx
 
Typescript in 30mins
Typescript in 30mins Typescript in 30mins
Typescript in 30mins
 
Type script - advanced usage and practices
Type script  - advanced usage and practicesType script  - advanced usage and practices
Type script - advanced usage and practices
 
Typescript ppt
Typescript pptTypescript ppt
Typescript ppt
 
TypeScript
TypeScriptTypeScript
TypeScript
 
TypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation GuideTypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation Guide
 
TypeScript
TypeScriptTypeScript
TypeScript
 
TypeScript intro
TypeScript introTypeScript intro
TypeScript intro
 
TypeScript
TypeScriptTypeScript
TypeScript
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous Javascript
 
7.data types in c#
7.data types in c#7.data types in c#
7.data types in c#
 
React-JS.pptx
React-JS.pptxReact-JS.pptx
React-JS.pptx
 
Typescript overview
Typescript overviewTypescript overview
Typescript overview
 
Ngrx slides
Ngrx slidesNgrx slides
Ngrx slides
 
ES6 presentation
ES6 presentationES6 presentation
ES6 presentation
 
Asynchronous JavaScript Programming
Asynchronous JavaScript ProgrammingAsynchronous JavaScript Programming
Asynchronous JavaScript Programming
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 

En vedette

Typescript + Graphql = <3
Typescript + Graphql = <3Typescript + Graphql = <3
Typescript + Graphql = <3felixbillon
 
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)Ontico
 
Typescript tips & tricks
Typescript tips & tricksTypescript tips & tricks
Typescript tips & tricksOri Calvo
 
Power Leveling your TypeScript
Power Leveling your TypeScriptPower Leveling your TypeScript
Power Leveling your TypeScriptOffirmo
 
TypeScript Seminar
TypeScript SeminarTypeScript Seminar
TypeScript SeminarHaim Michael
 
Angular 2 - Typescript
Angular 2  - TypescriptAngular 2  - Typescript
Angular 2 - TypescriptNathan Krasney
 
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristesTypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristesMicael Gallego
 
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in actionАлександр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in actionMoscowJS
 
TypeScript for Java Developers
TypeScript for Java DevelopersTypeScript for Java Developers
TypeScript for Java DevelopersYakov Fain
 
002. Introducere in type script
002. Introducere in type script002. Introducere in type script
002. Introducere in type scriptDmitrii Stoian
 
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21MoscowJS
 
TypeScript - Silver Bullet for the Full-stack Developers
TypeScript - Silver Bullet for the Full-stack DevelopersTypeScript - Silver Bullet for the Full-stack Developers
TypeScript - Silver Bullet for the Full-stack DevelopersRutenis Turcinas
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponLaurent Duveau
 

En vedette (16)

Typescript + Graphql = <3
Typescript + Graphql = <3Typescript + Graphql = <3
Typescript + Graphql = <3
 
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
 
Typescript tips & tricks
Typescript tips & tricksTypescript tips & tricks
Typescript tips & tricks
 
Power Leveling your TypeScript
Power Leveling your TypeScriptPower Leveling your TypeScript
Power Leveling your TypeScript
 
TypeScript Seminar
TypeScript SeminarTypeScript Seminar
TypeScript Seminar
 
TypeScript
TypeScriptTypeScript
TypeScript
 
Angular 2 - Typescript
Angular 2  - TypescriptAngular 2  - Typescript
Angular 2 - Typescript
 
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristesTypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
 
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in actionАлександр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
 
TypeScript for Java Developers
TypeScript for Java DevelopersTypeScript for Java Developers
TypeScript for Java Developers
 
Typescript
TypescriptTypescript
Typescript
 
002. Introducere in type script
002. Introducere in type script002. Introducere in type script
002. Introducere in type script
 
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
 
TypeScript - Silver Bullet for the Full-stack Developers
TypeScript - Silver Bullet for the Full-stack DevelopersTypeScript - Silver Bullet for the Full-stack Developers
TypeScript - Silver Bullet for the Full-stack Developers
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
TypeScriptで快適javascript
TypeScriptで快適javascriptTypeScriptで快適javascript
TypeScriptで快適javascript
 

Similaire à TypeScript coding JavaScript without the pain

TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponLaurent Duveau
 
The advantage of developing with TypeScript
The advantage of developing with TypeScript The advantage of developing with TypeScript
The advantage of developing with TypeScript Corley S.r.l.
 
Web technologies-course 07.pptx
Web technologies-course 07.pptxWeb technologies-course 07.pptx
Web technologies-course 07.pptxStefan Oprea
 
TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!Alessandro Giorgetti
 
Crystal internals (part 1)
Crystal internals (part 1)Crystal internals (part 1)
Crystal internals (part 1)Ary Borenszweig
 
Crystal internals (part 1)
Crystal internals (part 1)Crystal internals (part 1)
Crystal internals (part 1)Ary Borenszweig
 
Crystal internals (part 1)
Crystal internals (part 1)Crystal internals (part 1)
Crystal internals (part 1)Crystal Language
 
Milot Shala - C++ (OSCAL2014)
Milot Shala - C++ (OSCAL2014)Milot Shala - C++ (OSCAL2014)
Milot Shala - C++ (OSCAL2014)Open Labs Albania
 
What's coming to c# (Tel-Aviv, 2018)
What's coming to c# (Tel-Aviv, 2018)What's coming to c# (Tel-Aviv, 2018)
What's coming to c# (Tel-Aviv, 2018)Moaid Hathot
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxMalla Reddy University
 
Getting started with typescript and angular 2
Getting started with typescript  and angular 2Getting started with typescript  and angular 2
Getting started with typescript and angular 2Knoldus Inc.
 
Typescript language extension of java script
Typescript language extension of java scriptTypescript language extension of java script
Typescript language extension of java scriptmichaelaaron25322
 
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...Sang Don Kim
 
Ingo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep DiveIngo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep DiveAxway Appcelerator
 
Complete Notes on Angular 2 and TypeScript
Complete Notes on Angular 2 and TypeScriptComplete Notes on Angular 2 and TypeScript
Complete Notes on Angular 2 and TypeScriptEPAM Systems
 
MongoDB World 2019: BSON Transpilers: Transpiling from Any Language to Any La...
MongoDB World 2019: BSON Transpilers: Transpiling from Any Language to Any La...MongoDB World 2019: BSON Transpilers: Transpiling from Any Language to Any La...
MongoDB World 2019: BSON Transpilers: Transpiling from Any Language to Any La...MongoDB
 

Similaire à TypeScript coding JavaScript without the pain (20)

TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
The advantage of developing with TypeScript
The advantage of developing with TypeScript The advantage of developing with TypeScript
The advantage of developing with TypeScript
 
AngularConf2015
AngularConf2015AngularConf2015
AngularConf2015
 
Web technologies-course 07.pptx
Web technologies-course 07.pptxWeb technologies-course 07.pptx
Web technologies-course 07.pptx
 
TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!
 
Crystal internals (part 1)
Crystal internals (part 1)Crystal internals (part 1)
Crystal internals (part 1)
 
Crystal internals (part 1)
Crystal internals (part 1)Crystal internals (part 1)
Crystal internals (part 1)
 
Crystal internals (part 1)
Crystal internals (part 1)Crystal internals (part 1)
Crystal internals (part 1)
 
Type script
Type scriptType script
Type script
 
Milot Shala - C++ (OSCAL2014)
Milot Shala - C++ (OSCAL2014)Milot Shala - C++ (OSCAL2014)
Milot Shala - C++ (OSCAL2014)
 
What's coming to c# (Tel-Aviv, 2018)
What's coming to c# (Tel-Aviv, 2018)What's coming to c# (Tel-Aviv, 2018)
What's coming to c# (Tel-Aviv, 2018)
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
 
Getting started with typescript and angular 2
Getting started with typescript  and angular 2Getting started with typescript  and angular 2
Getting started with typescript and angular 2
 
Typescript language extension of java script
Typescript language extension of java scriptTypescript language extension of java script
Typescript language extension of java script
 
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
 
Ingo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep DiveIngo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep Dive
 
Complete Notes on Angular 2 and TypeScript
Complete Notes on Angular 2 and TypeScriptComplete Notes on Angular 2 and TypeScript
Complete Notes on Angular 2 and TypeScript
 
MongoDB World 2019: BSON Transpilers: Transpiling from Any Language to Any La...
MongoDB World 2019: BSON Transpilers: Transpiling from Any Language to Any La...MongoDB World 2019: BSON Transpilers: Transpiling from Any Language to Any La...
MongoDB World 2019: BSON Transpilers: Transpiling from Any Language to Any La...
 
XAML/C# to HTML/JS
XAML/C# to HTML/JSXAML/C# to HTML/JS
XAML/C# to HTML/JS
 
Csharp_mahesh
Csharp_maheshCsharp_mahesh
Csharp_mahesh
 

Plus de Sander Mak (@Sander_Mak)

The Ultimate Dependency Manager Shootout (QCon NY 2014)
The Ultimate Dependency Manager Shootout (QCon NY 2014)The Ultimate Dependency Manager Shootout (QCon NY 2014)
The Ultimate Dependency Manager Shootout (QCon NY 2014)Sander Mak (@Sander_Mak)
 
Cross-Build Injection attacks: how safe is your Java build?
Cross-Build Injection attacks: how safe is your Java build?Cross-Build Injection attacks: how safe is your Java build?
Cross-Build Injection attacks: how safe is your Java build?Sander Mak (@Sander_Mak)
 
Hibernate Performance Tuning (JEEConf 2012)
Hibernate Performance Tuning (JEEConf 2012)Hibernate Performance Tuning (JEEConf 2012)
Hibernate Performance Tuning (JEEConf 2012)Sander Mak (@Sander_Mak)
 

Plus de Sander Mak (@Sander_Mak) (20)

Scalable Application Development @ Picnic
Scalable Application Development @ PicnicScalable Application Development @ Picnic
Scalable Application Development @ Picnic
 
Coding Your Way to Java 13
Coding Your Way to Java 13Coding Your Way to Java 13
Coding Your Way to Java 13
 
Coding Your Way to Java 12
Coding Your Way to Java 12Coding Your Way to Java 12
Coding Your Way to Java 12
 
Java Modularity: the Year After
Java Modularity: the Year AfterJava Modularity: the Year After
Java Modularity: the Year After
 
Desiging for Modularity with Java 9
Desiging for Modularity with Java 9Desiging for Modularity with Java 9
Desiging for Modularity with Java 9
 
Modules or microservices?
Modules or microservices?Modules or microservices?
Modules or microservices?
 
Migrating to Java 9 Modules
Migrating to Java 9 ModulesMigrating to Java 9 Modules
Migrating to Java 9 Modules
 
Java 9 Modularity in Action
Java 9 Modularity in ActionJava 9 Modularity in Action
Java 9 Modularity in Action
 
Java modularity: life after Java 9
Java modularity: life after Java 9Java modularity: life after Java 9
Java modularity: life after Java 9
 
Provisioning the IoT
Provisioning the IoTProvisioning the IoT
Provisioning the IoT
 
Event-sourced architectures with Akka
Event-sourced architectures with AkkaEvent-sourced architectures with Akka
Event-sourced architectures with Akka
 
The Ultimate Dependency Manager Shootout (QCon NY 2014)
The Ultimate Dependency Manager Shootout (QCon NY 2014)The Ultimate Dependency Manager Shootout (QCon NY 2014)
The Ultimate Dependency Manager Shootout (QCon NY 2014)
 
Modular JavaScript
Modular JavaScriptModular JavaScript
Modular JavaScript
 
Modularity in the Cloud
Modularity in the CloudModularity in the Cloud
Modularity in the Cloud
 
Cross-Build Injection attacks: how safe is your Java build?
Cross-Build Injection attacks: how safe is your Java build?Cross-Build Injection attacks: how safe is your Java build?
Cross-Build Injection attacks: how safe is your Java build?
 
Scala & Lift (JEEConf 2012)
Scala & Lift (JEEConf 2012)Scala & Lift (JEEConf 2012)
Scala & Lift (JEEConf 2012)
 
Hibernate Performance Tuning (JEEConf 2012)
Hibernate Performance Tuning (JEEConf 2012)Hibernate Performance Tuning (JEEConf 2012)
Hibernate Performance Tuning (JEEConf 2012)
 
Akka (BeJUG)
Akka (BeJUG)Akka (BeJUG)
Akka (BeJUG)
 
Fork Join (BeJUG 2012)
Fork Join (BeJUG 2012)Fork Join (BeJUG 2012)
Fork Join (BeJUG 2012)
 
Fork/Join for Fun and Profit!
Fork/Join for Fun and Profit!Fork/Join for Fun and Profit!
Fork/Join for Fun and Profit!
 

Dernier

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...ICS
 
why an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdfwhy an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdfjoe51371421
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionSolGuruz
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsArshad QA
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...OnePlan Solutions
 
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AISyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AIABDERRAOUF MEHENNI
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software DevelopersVinodh Ram
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...MyIntelliSource, Inc.
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfkalichargn70th171
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...kellynguyen01
 
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️anilsa9823
 
Test Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendTest Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendArshad QA
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️Delhi Call girls
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxbodapatigopi8531
 
Clustering techniques data mining book ....
Clustering techniques data mining book ....Clustering techniques data mining book ....
Clustering techniques data mining book ....ShaimaaMohamedGalal
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Modelsaagamshah0812
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdfWave PLM
 

Dernier (20)

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
why an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdfwhy an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdf
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
 
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS LiveVip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
 
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
 
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AISyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software Developers
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
 
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
 
Test Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendTest Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and Backend
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
 
Clustering techniques data mining book ....
Clustering techniques data mining book ....Clustering techniques data mining book ....
Clustering techniques data mining book ....
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 

TypeScript coding JavaScript without the pain

  • 1. TypeScript coding JavaScript without the pain @Sander_Mak Luminis Technologies
  • 2. INTRO @Sander_Mak: Senior Software Engineer at Author: Dutch Java Magazine blog @ branchandbound.net Speaker:
  • 3. AGENDA Why TypeScript? Language introduction / live-coding TypeScript and Angular Comparison with TS alternatives Conclusion
  • 4. WHAT'S WRONG WITH JAVASCRIPT? Dynamic typing Lack of modularity Verbose patterns (IIFE)
  • 5. WHAT'S WRONG WITH JAVASCRIPT? Dynamic typing Lack of modularity Verbose patterns (IIFE) In short: JavaScript development scales badly
  • 6. WHAT'S GOOD ABOUT JAVASCRIPT? It's everywhere Huge amount of libraries Flexible
  • 7. WISHLIST 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)
  • 8. WISHLIST 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) ✓✓✓✓✓✓
  • 9.
  • 12. TYPESCRIPT Superset of JavaScript Optionally typed Compiles to ES3/ES5 No special runtime 1.0 in April 2014, future ES6 alignment
  • 13. TYPESCRIPT Superset of JavaScript Optionally typed Compiles to ES3/ES5 No special runtime 1.0 in April 2014, future ES6 alignment In short: Lightweight productivity booster
  • 14. GETTING STARTED $ npm install -g typescript $ mv mycode.js mycode.ts $ tsc mycode.ts
  • 15. GETTING STARTED $ npm install -g typescript $ mv mycode.js mycode.ts $ tsc mycode.ts May even find problems in existing JS!
  • 16. OPTIONAL TYPES Type annotations > var a = 123 > a.trim() ! TypeError: undefined is not a function JS > var a: string = 123 > a.trim() ! Cannot convert 'number' to 'string'. TS runtime compile-time
  • 17. OPTIONAL TYPES Type annotations > var a = 123 > a.trim() ! TypeError: undefined is not a function JS > var a: string = 123 > a.trim() ! Cannot convert 'number' to 'string'. TS Type inference > var a = 123 > a.trim() ! The property 'trim' does not exist on value of type 'number'. Types dissapear at runtime
  • 18. OPTIONAL TYPES Object void boolean integer long short ... String char Type[] any void boolean number string type[]
  • 19. OPTIONAL TYPES Types are structural rather than nominal TypeScript has function types: var find: (elem: string, elems: string[]) => string = function(elem, elems) { .. }
  • 20. OPTIONAL TYPES Types are structural rather than nominal TypeScript has function types: var find: (elem: string, elems: string[]) => string = function(elem, elems) { .. }
  • 21. DEMO: OPTIONAL TYPES code Code: http://bit.ly/tscode
  • 22. INTERFACES interface MyInterface { // Call signature (param: number): string member: number optionalMember?: number myMethod(param: string): void } ! var instance: MyInterface = ... instance(1)
  • 23. INTERFACES Use them to describe data returned in REST calls $.getJSON('user/123').then((user: User) => { showProfile(user.details) }
  • 24. INTERFACES TS interfaces are open-ended: interface JQuery { appendTo(..): .. .. } interface JQuery { draggable(..): .. .. jquery.d.ts } jquery.ui.d.ts
  • 25. 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]
  • 26. GOING ALL THE WAY Force explicit typing with noImplicitAny var ambiguousType; ! ambiguousType = 1 ambiguousType = "text" noimplicitany.ts $ tsc --noImplicitAny noimplicitany.ts
  • 27. 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.
  • 28. TYPESCRIPT CLASSES Can implement interfaces Inheritance Instance methods/members Static methods/members Single constructor Default/optional parameters ES6 class syntax similar different
  • 29. DEMO: TYPESCRIPT CLASSES code Code: http://bit.ly/tscode
  • 30. ARROW FUNCTIONS Implicit return No braces for single expression Part of ES6
  • 31. ARROW FUNCTIONS Implicit return No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase(); }
  • 32. ARROW FUNCTIONS Implicit return No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase(); } (arg1) => arg1.toLowerCase();
  • 33. ARROW FUNCTIONS Implicit return No braces for single expression Part of ES6 function(arg1) { return arg1.toLowerCase(); } (arg1) => arg1.toLowerCase(); Lexically-scoped this (no more 'var that = this')
  • 34. DEMO: ARROW FUNCTIONS code Code: http://bit.ly/tscode
  • 35. TYPE DEFINITIONS How to integrate existing JS code? Ambient declarations Any-type :( Type definitions lib.d.ts Separate compilation: tsc --declaration file.ts
  • 36. TYPE DEFINITIONS DefinitelyTyped.org Community provided .d.ts files for popular JS libs How to integrate existing JS code? Ambient declarations Any-type :( Type definitions lib.d.ts Separate compilation: tsc --declaration file.ts
  • 37. INTERNAL MODULES 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');
  • 38. INTERNAL MODULES 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');
  • 39. INTERNAL MODULES 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');
  • 40. INTERNAL MODULES 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');
  • 41. INTERNAL MODULES TS internal modules are open-ended: ! module Webshop { export class Cart { .. } } /// <reference path="cart.ts" /> module Webshop { export class Catalog { .. } cart.ts } main.ts
  • 42. INTERNAL MODULES TS internal modules are open-ended: ! module Webshop { export class Cart { .. } } /// <reference path="cart.ts" /> module Webshop { export class Catalog { .. } cart.ts } main.ts Can be hierarchical: module Webshop.Cart.Backend { ... }
  • 43. INTERNAL MODULES TS internal modules are open-ended: ! module Webshop { export class Cart { .. } } /// <reference path="cart.ts" /> module Webshop { export class Catalog { .. } cart.ts } main.ts Can be hierarchical: module Webshop.Cart.Backend { ... } Combine modules: $ tsc --out main.js main.ts
  • 44. DEMO: PUTTING IT ALL TOGETHER code Code: http://bit.ly/tscode
  • 45. EXTERNAL MODULES CommonJS Asynchronous Module Definitions $ tsc --module common main.ts $ tsc --module amd main.ts Combine with module loader
  • 46. EXTERNAL MODULES 'Standards-based', use existing external modules Automatic dependency management Lazy loading AMD verbose without TypeScript Currently not ES6-compatible
  • 47. DEMO + + =
  • 48. DEMO: TYPESCRIPT AND ANGULAR code Code: http://bit.ly/tscode
  • 49. BUILDING TYPESCRIPT $ tsc -watch main.ts grunt-typescript grunt-ts gulp-type (incremental) gulp-tsc
  • 50. TOOLING IntelliJ IDEA WebStorm plugin
  • 51. TYPESCRIPT vs ES6 HARMONY Complete language + runtime overhaul More features: generators, comprehensions, object literals Will take years before widely deployed No typing (possible ES7)
  • 52. TYPESCRIPT vs COFFEESCRIPT Also a compile-to-JS language More syntactic sugar, still dynamically typed JS is not valid CoffeeScript No spec, definitely no Anders Hejlsberg... Future: CS doesn't track ECMAScript 6 !
  • 53. TYPESCRIPT vs DART Dart VM + stdlib (also compile-to-JS) Optionally typed Completely different syntax & semantics than JS JS interop through dart:js library ECMA Dart spec
  • 54. TYPESCRIPT vs CLOSURE COMPILER Google Closure Compiler Pure JS Types in JsDoc comments Less expressive Focus on optimization, dead-code removal
  • 56. CONCLUSION Internal modules Classes/Interfaces Some typing External modules Type defs More typing Generics Type defs -noImplicitAny
  • 57. CONCLUSION TypeScript allows for gradual adoption Internal modules Classes/Interfaces Some typing External modules Type defs More typing Generics Type defs -noImplicitAny
  • 58. CONCLUSION Some downsides: Still need to know some JS quirks Current compiler slowish (faster one in the works) External module syntax not ES6-compatible (yet) Non-MS tooling lagging a bit
  • 59. CONCLUSION High value, low cost improvement over JavaScript Safer and more modular Solid path to ES6
  • 60. MORE TALKS TypeScript: Wednesday, 11:30 AM, same room !Akka & Event-sourcing Wednesday, 8:30 AM, same room @Sander_Mak Luminis Technologies
  • 61. RESOURCES Code: http://bit.ly/tscode ! Learn: www.typescriptlang.org/Handbook @Sander_Mak Luminis Technologies