SlideShare a Scribd company logo
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

More Related Content

What's hot

Why TypeScript?
Why TypeScript?Why TypeScript?
Why TypeScript?
FITC
 
TypeScript Best Practices
TypeScript Best PracticesTypeScript Best Practices
TypeScript Best Practices
felixbillon
 
Getting started with typescript
Getting started with typescriptGetting started with typescript
Getting started with typescript
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
Typescript ppt
Typescript pptTypescript ppt
Typescript ppt
akhilsreyas
 
TypeScript
TypeScriptTypeScript
TypeScript
Saray Chak
 
ES6 presentation
ES6 presentationES6 presentation
ES6 presentation
ritika1
 
TypeScript VS JavaScript.pptx
TypeScript VS JavaScript.pptxTypeScript VS JavaScript.pptx
TypeScript VS JavaScript.pptx
Albiorix Technology
 
Learning typescript
Learning typescriptLearning typescript
Learning typescript
Alexandre Marreiros
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 
ES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern JavascriptES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern Javascript
Wojciech Dzikowski
 
TypeScript intro
TypeScript introTypeScript intro
TypeScript intro
Ats Uiboupin
 
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
WebStackAcademy
 
React JS
React JSReact JS
Nodejs functions & modules
Nodejs functions & modulesNodejs functions & modules
Nodejs functions & modules
monikadeshmane
 
Type script - advanced usage and practices
Type script  - advanced usage and practicesType script  - advanced usage and practices
Type script - advanced usage and practices
Iwan van der Kleijn
 
Introduction to Swagger
Introduction to SwaggerIntroduction to Swagger
Introduction to Swagger
Knoldus Inc.
 
Swagger
SwaggerSwagger
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
Samundra khatri
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project
Jadson Santos
 
Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2
Knoldus Inc.
 

What's hot (20)

Why TypeScript?
Why TypeScript?Why TypeScript?
Why TypeScript?
 
TypeScript Best Practices
TypeScript Best PracticesTypeScript Best Practices
TypeScript Best Practices
 
Getting started with typescript
Getting started with typescriptGetting started with typescript
Getting started with typescript
 
Typescript ppt
Typescript pptTypescript ppt
Typescript ppt
 
TypeScript
TypeScriptTypeScript
TypeScript
 
ES6 presentation
ES6 presentationES6 presentation
ES6 presentation
 
TypeScript VS JavaScript.pptx
TypeScript VS JavaScript.pptxTypeScript VS JavaScript.pptx
TypeScript VS JavaScript.pptx
 
Learning typescript
Learning typescriptLearning typescript
Learning typescript
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
ES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern JavascriptES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern Javascript
 
TypeScript intro
TypeScript introTypeScript intro
TypeScript intro
 
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
 
React JS
React JSReact JS
React JS
 
Nodejs functions & modules
Nodejs functions & modulesNodejs functions & modules
Nodejs functions & modules
 
Type script - advanced usage and practices
Type script  - advanced usage and practicesType script  - advanced usage and practices
Type script - advanced usage and practices
 
Introduction to Swagger
Introduction to SwaggerIntroduction to Swagger
Introduction to Swagger
 
Swagger
SwaggerSwagger
Swagger
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project
 
Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2
 

Viewers also liked

Typescript + Graphql = <3
Typescript + Graphql = <3Typescript + Graphql = <3
Typescript + Graphql = <3
felixbillon
 
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)
Ontico
 
Typescript tips & tricks
Typescript tips & tricksTypescript tips & tricks
Typescript tips & tricks
Ori Calvo
 
Power Leveling your TypeScript
Power Leveling your TypeScriptPower Leveling your TypeScript
Power Leveling your TypeScript
Offirmo
 
TypeScript Seminar
TypeScript SeminarTypeScript Seminar
TypeScript Seminar
Haim Michael
 
TypeScript
TypeScriptTypeScript
TypeScript
GetDev.NET
 
Angular 2 - Typescript
Angular 2  - TypescriptAngular 2  - Typescript
Angular 2 - Typescript
Nathan 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 tristes
Micael Gallego
 
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in actionАлександр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
MoscowJS
 
TypeScript for Java Developers
TypeScript for Java DevelopersTypeScript for Java Developers
TypeScript for Java Developers
Yakov Fain
 
Typescript
TypescriptTypescript
Typescript
Nikhil Thomas
 
002. Introducere in type script
002. Introducere in type script002. Introducere in type script
002. Introducere in type script
Dmitrii Stoian
 
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
«Typescript: кому нужна строгая типизация?», Григорий Петров, MoscowJS 21
MoscowJS
 
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
Rutenis Turcinas
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
Laurent Duveau
 
TypeScriptで快適javascript
TypeScriptで快適javascriptTypeScriptで快適javascript
TypeScriptで快適javascript
AfiruPain NaokiSoga
 

Viewers also liked (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
 

Similar to TypeScript: coding JavaScript without the pain

TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
Laurent Duveau
 
AngularConf2015
AngularConf2015AngularConf2015
AngularConf2015
Alessandro Giorgetti
 
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.pptx
Stefan 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
 
Type script
Type scriptType script
Type script
srinivaskapa1
 
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.pptx
Malla Reddy University
 
TypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation GuideTypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation Guide
Nascenia IT
 
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
Knoldus Inc.
 
Typescript language extension of java script
Typescript language extension of java scriptTypescript language extension of java script
Typescript language extension of java script
michaelaaron25322
 
[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 Dive
Axway 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 TypeScript
EPAM 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
 
XAML/C# to HTML/JS
XAML/C# to HTML/JSXAML/C# to HTML/JS
XAML/C# to HTML/JS
Michael Haberman
 

Similar to 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
 
AngularConf2015
AngularConf2015AngularConf2015
AngularConf2015
 
The advantage of developing with TypeScript
The advantage of developing with TypeScript The advantage of developing with TypeScript
The advantage of developing with TypeScript
 
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
 
TypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation GuideTypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation Guide
 
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
 

More from Sander Mak (@Sander_Mak)

Scalable Application Development @ Picnic
Scalable Application Development @ PicnicScalable Application Development @ Picnic
Scalable Application Development @ Picnic
Sander Mak (@Sander_Mak)
 
Coding Your Way to Java 13
Coding Your Way to Java 13Coding Your Way to Java 13
Coding Your Way to Java 13
Sander Mak (@Sander_Mak)
 
Coding Your Way to Java 12
Coding Your Way to Java 12Coding Your Way to Java 12
Coding Your Way to Java 12
Sander Mak (@Sander_Mak)
 
Java Modularity: the Year After
Java Modularity: the Year AfterJava Modularity: the Year After
Java Modularity: the Year After
Sander Mak (@Sander_Mak)
 
Desiging for Modularity with Java 9
Desiging for Modularity with Java 9Desiging for Modularity with Java 9
Desiging for Modularity with Java 9
Sander Mak (@Sander_Mak)
 
Modules or microservices?
Modules or microservices?Modules or microservices?
Modules or microservices?
Sander Mak (@Sander_Mak)
 
Migrating to Java 9 Modules
Migrating to Java 9 ModulesMigrating to Java 9 Modules
Migrating to Java 9 Modules
Sander Mak (@Sander_Mak)
 
Java 9 Modularity in Action
Java 9 Modularity in ActionJava 9 Modularity in Action
Java 9 Modularity in Action
Sander Mak (@Sander_Mak)
 
Java modularity: life after Java 9
Java modularity: life after Java 9Java modularity: life after Java 9
Java modularity: life after Java 9
Sander Mak (@Sander_Mak)
 
Provisioning the IoT
Provisioning the IoTProvisioning the IoT
Provisioning the IoT
Sander Mak (@Sander_Mak)
 
Event-sourced architectures with Akka
Event-sourced architectures with AkkaEvent-sourced architectures with Akka
Event-sourced architectures with Akka
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)
 
Modular JavaScript
Modular JavaScriptModular JavaScript
Modular JavaScript
Sander Mak (@Sander_Mak)
 
Modularity in the Cloud
Modularity in the CloudModularity in the Cloud
Modularity in the Cloud
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)
 
Scala & Lift (JEEConf 2012)
Scala & Lift (JEEConf 2012)Scala & Lift (JEEConf 2012)
Scala & Lift (JEEConf 2012)
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)
 
Akka (BeJUG)
Akka (BeJUG)Akka (BeJUG)
Fork Join (BeJUG 2012)
Fork Join (BeJUG 2012)Fork Join (BeJUG 2012)
Fork Join (BeJUG 2012)
Sander Mak (@Sander_Mak)
 
Fork/Join for Fun and Profit!
Fork/Join for Fun and Profit!Fork/Join for Fun and Profit!
Fork/Join for Fun and Profit!
Sander Mak (@Sander_Mak)
 

More from 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!
 

Recently uploaded

WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
Luigi Fugaro
 
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
dhavalvaghelanectarb
 
Transforming Product Development using OnePlan To Boost Efficiency and Innova...
Transforming Product Development using OnePlan To Boost Efficiency and Innova...Transforming Product Development using OnePlan To Boost Efficiency and Innova...
Transforming Product Development using OnePlan To Boost Efficiency and Innova...
OnePlan Solutions
 
42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert
vaishalijagtap12
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
Paul Brebner
 
Going AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applicationsGoing AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applications
Alina Yurenko
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
ICS
 
The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024
Yara Milbes
 
Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.
KrishnaveniMohan1
 
Beginner's Guide to Observability@Devoxx PL 2024
Beginner's  Guide to Observability@Devoxx PL 2024Beginner's  Guide to Observability@Devoxx PL 2024
Beginner's Guide to Observability@Devoxx PL 2024
michniczscribd
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
Tier1 app
 
Boost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management AppsBoost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management Apps
Jhone kinadey
 
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
kalichargn70th171
 
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in NashikUpturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies
 
Orca: Nocode Graphical Editor for Container Orchestration
Orca: Nocode Graphical Editor for Container OrchestrationOrca: Nocode Graphical Editor for Container Orchestration
Orca: Nocode Graphical Editor for Container Orchestration
Pedro J. Molina
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
dakas1
 
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
kalichargn70th171
 
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
kgyxske
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid
 
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data PlatformAlluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio, Inc.
 

Recently uploaded (20)

WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
 
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
 
Transforming Product Development using OnePlan To Boost Efficiency and Innova...
Transforming Product Development using OnePlan To Boost Efficiency and Innova...Transforming Product Development using OnePlan To Boost Efficiency and Innova...
Transforming Product Development using OnePlan To Boost Efficiency and Innova...
 
42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
 
Going AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applicationsGoing AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applications
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
 
The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024
 
Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.
 
Beginner's Guide to Observability@Devoxx PL 2024
Beginner's  Guide to Observability@Devoxx PL 2024Beginner's  Guide to Observability@Devoxx PL 2024
Beginner's Guide to Observability@Devoxx PL 2024
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
 
Boost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management AppsBoost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management Apps
 
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
 
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in NashikUpturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in Nashik
 
Orca: Nocode Graphical Editor for Container Orchestration
Orca: Nocode Graphical Editor for Container OrchestrationOrca: Nocode Graphical Editor for Container Orchestration
Orca: Nocode Graphical Editor for Container Orchestration
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
 
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
 
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
 
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data PlatformAlluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
 

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