Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 
Con...
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 developme...
WHAT'S GOOD ABOUT JAVASCRIPT? 
It's everywhere 
Huge amount of libraries 
Flexible
WISHLIST 
Scalable HTML5 clientside development 
Modular development 
Easily learnable for Java developers 
Non-invasive (...
WISHLIST 
Scalable HTML5 clientside development 
Modular development 
Easily learnable for Java developers 
Non-invasive (...
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 E...
TYPESCRIPT 
Superset of JavaScript 
Optionally typed 
Compiles to ES3/ES5 
No special runtime 
1.0 in April 2014, future E...
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 existin...
OPTIONAL TYPES 
Type annotations 
> var a = 123 
> a.trim() 
! 
TypeError: undefined is 
not a function 
JS 
> var a: stri...
OPTIONAL TYPES 
Type annotations 
> var a = 123 
> a.trim() 
! 
TypeError: undefined is 
not a function 
JS 
> var a: stri...
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: ...
OPTIONAL TYPES 
Types are structural rather than nominal 
TypeScript has function types: 
var find: (elem: string, elems: ...
DEMO: OPTIONAL TYPES 
code 
Code: http://bit.ly/tscode
INTERFACES 
interface MyInterface { 
// Call signature 
(param: number): string 
member: number 
optionalMember?: number 
...
INTERFACES 
Use them to describe data returned in REST calls 
$.getJSON('user/123').then((user: User) => { 
showProfile(us...
INTERFACES 
TS interfaces are open-ended: 
interface JQuery { 
appendTo(..): .. 
.. 
} 
interface JQuery { 
draggable(..):...
OPTIONAL TYPES: ENUMS 
enum Language { TypeScript, Java, JavaScript } 
! 
var lang = Language.TypeScript 
var ts = Languag...
GOING ALL THE WAY 
Force explicit typing with noImplicitAny 
var ambiguousType; 
! 
ambiguousType = 1 
ambiguousType = "te...
GOING ALL THE WAY 
Force explicit typing with noImplicitAny 
var ambiguousType; 
! 
ambiguousType = 1 
ambiguousType = "te...
TYPESCRIPT CLASSES 
Can implement interfaces 
Inheritance 
Instance methods/members 
Static methods/members 
Single constr...
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(...
ARROW FUNCTIONS 
Implicit return 
No braces for single expression 
Part of ES6 
function(arg1) { 
return arg1.toLowerCase(...
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 
Sepa...
TYPE DEFINITIONS 
DefinitelyTyped.org 
Community provided .d.ts 
files for popular JS libs 
How to integrate 
existing JS ...
INTERNAL MODULES 
module StorageModule { 
export interface Storage { store(content: string): void } 
! 
var privateKey = '...
INTERNAL MODULES 
module StorageModule { 
export interface Storage { store(content: string): void } 
! 
var privateKey = '...
INTERNAL MODULES 
module StorageModule { 
export interface Storage { store(content: string): void } 
! 
var privateKey = '...
INTERNAL MODULES 
module StorageModule { 
export interface Storage { store(content: string): void } 
! 
var privateKey = '...
INTERNAL MODULES 
TS internal modules are open-ended: 
! 
module Webshop { 
export class Cart { .. } 
} 
/// <reference pa...
INTERNAL MODULES 
TS internal modules are open-ended: 
! 
module Webshop { 
export class Cart { .. } 
} 
/// <reference pa...
INTERNAL MODULES 
TS internal modules are open-ended: 
! 
module Webshop { 
export class Cart { .. } 
} 
/// <reference pa...
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 
...
EXTERNAL MODULES 
'Standards-based', use existing external modules 
Automatic dependency management 
Lazy loading 
AMD ver...
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 litera...
TYPESCRIPT vs COFFEESCRIPT 
Also a compile-to-JS language 
More syntactic sugar, still dynamically typed 
JS is not valid ...
TYPESCRIPT vs DART 
Dart VM + stdlib (also compile-to-JS) 
Optionally typed 
Completely different syntax & semantics than ...
TYPESCRIPT vs CLOSURE COMPILER 
Google Closure Compiler 
Pure JS 
Types in JsDoc comments 
Less expressive 
Focus on optim...
WHO USES TYPESCRIPT? 
(duh)
CONCLUSION 
Internal modules 
Classes/Interfaces 
Some typing 
External modules 
Type defs 
More typing 
Generics 
Type de...
CONCLUSION 
TypeScript allows for gradual adoption 
Internal modules 
Classes/Interfaces 
Some typing 
External modules 
T...
CONCLUSION 
Some downsides: 
Still need to know some JS quirks 
Current compiler slowish (faster one in the works) 
Extern...
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_Ma...
RESOURCES 
Code: http://bit.ly/tscode 
! 
Learn: www.typescriptlang.org/Handbook 
@Sander_Mak 
Luminis Technologies
TypeScript: coding JavaScript without the pain
Nächste SlideShare
Wird geladen in …5
×

TypeScript: coding JavaScript without the pain

14.227 Aufrufe

Veröffentlicht am

Slides accompanying the JavaOne 2014 presentation on TypeScript

Veröffentlicht in: Software
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

TypeScript: coding JavaScript without the pain

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

×