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,273 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,273
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×