Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Typed JavaScript
with TypeScript
Oliver Zeigermann
What is TypeScript?
•  Programming Language

•  Superset of JavaScript

•  Compiles to JavaScript

•  Adds Declared Types
...
TypeScript

http://www.typescriptlang.org
|

zeigermann.eu
Types
|

zeigermann.eu
Declared static types
•  TypeScript offers optional static typing
•  Type Inference can infer types even when you
do not d...
Reliable IDE support for
•  Code Analysis

•  Refactoring

•  Code Completion

•  Type Hierarchies

•  Quick Fixes

•  Out...
JavaScript IDEs offer that
without declared types, but…
not reliable!
•  Ever had a non-reliable Internet Connection?
•  R...
Optional Declared Types: Basics
var name = "Olli";

function doIt(p1, p2, p3) {
…
}
doIt(name);

|

zeigermann.eu
Optional Declared Types: Basics
var name: string = "Olli";

function doIt(p1: number, p2: boolean, p3: string): void {
…
}...
IDE Support
•  Best IDEs
•  WebStorm / IntelliJ IDEA Ultimate
•  Visual Studio (Express only with limited support)

•  Ful...
Syntactic
Sugar
|

zeigermann.eu
JavaScript can express all this
•  classes

•  modules

•  interfaces

•  optional and default
parameters

•  inheritance
...
JavaScript for Inheritance
__extends(Horse, Animal);
function Horse(name) {
Animal.call(this, name);
}
Horse.prototype.mov...
Boiler Plate Code sucks
•  TypeScript offers syntactic sugar for those patterns
•  No other modifications to language
•  C...
TypeScript for Inheritance
class Horse extends Animal {
constructor(name: string) { super(name); }
move(): void {
alert("G...
Compare
|

zeigermann.eu
Comparing to CoffeeScript
CoffeeScript has in

CoffeeScript differs

common

•  Semantics (a little) different

•  Compile...
Comparing to Dart
Dart has in common

Dart differs

•  Optional static typing

•  Semantics different from
JavaScript

inc...
Wrap-Up
•  Optional Declared Types enable premium IDE support
•  Syntactic sugar reduces boiler plate code
•  Still totall...
Where to apply?
•  Business Logic: totally
•  UI Logic only partially benefits from types
when accessed from template
•  M...
And there is more!
•  Mapping files

•  Generics

•  External module

•  Casts

declarations for AMD /

•  All the ES 6 go...
Thanks for the attention!
Questions / Discussion!
!
!
Follow @DJCordhose
oliver@zeigermann.de
zeigermann.eu
Upcoming SlideShare
Loading in …5
×

Jazoon2013 type script

1,335 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Jazoon2013 type script

  1. 1. Typed JavaScript with TypeScript Oliver Zeigermann
  2. 2. What is TypeScript? •  Programming Language •  Superset of JavaScript •  Compiles to JavaScript •  Adds Declared Types •  Every valid JavaScript •  Reduces boiler plate code program also is a valid •  Developed by Microsoft TypeScript program •  Head: Anders Hejlsberg | zeigermann.eu
  3. 3. TypeScript http://www.typescriptlang.org | zeigermann.eu
  4. 4. Types | zeigermann.eu
  5. 5. Declared static types •  TypeScript offers optional static typing •  Type Inference can infer types even when you do not declare them •  Declared Types enable reliable IDE support | zeigermann.eu
  6. 6. Reliable IDE support for •  Code Analysis •  Refactoring •  Code Completion •  Type Hierarchies •  Quick Fixes •  Outline | zeigermann.eu
  7. 7. JavaScript IDEs offer that without declared types, but… not reliable! •  Ever had a non-reliable Internet Connection? •  Remember how that felt? •  You want refactoring and code analysis to be reliable | zeigermann.eu
  8. 8. Optional Declared Types: Basics var name = "Olli"; function doIt(p1, p2, p3) { … } doIt(name); | zeigermann.eu
  9. 9. Optional Declared Types: Basics var name: string = "Olli"; function doIt(p1: number, p2: boolean, p3: string): void { … } doIt(name); | zeigermann.eu
  10. 10. IDE Support •  Best IDEs •  WebStorm / IntelliJ IDEA Ultimate •  Visual Studio (Express only with limited support) •  Full refactoring / Code completion etc. •  Not quite at the level of Java-IDEs, yet | zeigermann.eu
  11. 11. Syntactic Sugar | zeigermann.eu
  12. 12. JavaScript can express all this •  classes •  modules •  interfaces •  optional and default parameters •  inheritance •  and more… | zeigermann.eu
  13. 13. JavaScript for Inheritance __extends(Horse, Animal); function Horse(name) { Animal.call(this, name); } Horse.prototype.move = function () { alert("Galloping..."); Animal.prototype.move.call(this, 45); }; | zeigermann.eu
  14. 14. Boiler Plate Code sucks •  TypeScript offers syntactic sugar for those patterns •  No other modifications to language •  Compiler spits out best practice code | zeigermann.eu
  15. 15. TypeScript for Inheritance class Horse extends Animal { constructor(name: string) { super(name); } move(): void { alert("Galloping..."); super.move(45); } } | zeigermann.eu
  16. 16. Compare | zeigermann.eu
  17. 17. Comparing to CoffeeScript CoffeeScript has in CoffeeScript differs common •  Semantics (a little) different •  Compiles to JavaScript from JavaScript •  No static type information •  Classes and inheritance as syntactic sugar •  Fixes lexical scoping | zeigermann.eu
  18. 18. Comparing to Dart Dart has in common Dart differs •  Optional static typing •  Semantics different from JavaScript including Generics •  Runs on Client and Server •  Can also be executed natively in dedicated VM •  Compiles to JavaScript | zeigermann.eu
  19. 19. Wrap-Up •  Optional Declared Types enable premium IDE support •  Syntactic sugar reduces boiler plate code •  Still totally compatible with JavaScript •  Added features aligned with ECMAScript Harmony •  Dart and CoffeeScript both differ in Philosophy | zeigermann.eu
  20. 20. Where to apply? •  Business Logic: totally •  UI Logic only partially benefits from types when accessed from template •  Mixture of typed and untyped not an issue •  Backend and frontend both cool | zeigermann.eu
  21. 21. And there is more! •  Mapping files •  Generics •  External module •  Casts declarations for AMD / •  All the ES 6 goodness CommonJS •  Declaration files for •  Enums JavaScript libraries | zeigermann.eu
  22. 22. Thanks for the attention! Questions / Discussion! ! ! Follow @DJCordhose oliver@zeigermann.de zeigermann.eu

×