1. Typed JavaScript
with TypeScript
Oliver Zeigermann

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. TypeScript
http://www.typescriptlang.org
|
zeigermann.eu

4. Types
|
zeigermann.eu

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. Reliable IDE support for
• Code Analysis
• Refactoring
• Code Completion
• Type Hierarchies
• Quick Fixes
• Outline
|
zeigermann.eu

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. Optional Declared Types: Basics
var name = "Olli";
function doIt(p1, p2, p3) {
…
}
doIt(name);
|
zeigermann.eu

9. Optional Declared Types: Basics
var name: string = "Olli";
function doIt(p1: number, p2: boolean, p3: string): void {
…
}
doIt(name);
|
zeigermann.eu

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. Syntactic
Sugar
|
zeigermann.eu

12. JavaScript can express all this
• classes
• modules
• interfaces
• optional and default
parameters
• inheritance
• and more…
|
zeigermann.eu

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. 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. TypeScript for Inheritance
class Horse extends Animal {
constructor(name: string) { super(name); }
move(): void {
alert("Galloping...");
super.move(45);
}
}
|
zeigermann.eu

16. Compare
|
zeigermann.eu

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. 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. 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. 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. 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. Thanks for the attention!
Questions / Discussion!
!
!
Follow @DJCordhose
oliver@zeigermann.de
zeigermann.eu