jazoon2013 type script
TRANSCRIPT
Typed JavaScript with TypeScript Oliver Zeigermann
| zeigermann.eu
What is TypeScript? • Programming Language
• Compiles to JavaScript
• Every valid JavaScript
program also is a valid
TypeScript program
• Superset of JavaScript
• Adds Declared Types
• Reduces boiler plate code
• Developed by Microsoft
• Head: Anders Hejlsberg
| zeigermann.eu
TypeScript
http://www.typescriptlang.org
| zeigermann.eu
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
Declared static types
| zeigermann.eu
Reliable IDE support for • Code Analysis
• Code Completion
• Quick Fixes
• Refactoring
• Type Hierarchies
• Outline
not reliable!
• Ever had a non-reliable Internet Connection?
• Remember how that felt?
• You want refactoring and code analysis to be reliable
| zeigermann.eu
JavaScript IDEs offer that
without declared types, but…
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 {
…
}
doIt(name);
| zeigermann.eu
Optional Declared Types: Basics
• 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
IDE Support
| zeigermann.eu
Syntactic Sugar
| zeigermann.eu
JavaScript can express all this • classes
• interfaces
• inheritance
• modules
• optional and default
parameters
• and more…
__extends(Horse, Animal);
function Horse(name) {
Animal.call(this, name);
}
Horse.prototype.move = function () {
alert("Galloping...");
Animal.prototype.move.call(this, 45);
};
| zeigermann.eu
JavaScript for Inheritance
• TypeScript offers syntactic sugar for those patterns
• No other modifications to language
• Compiler spits out best practice code
| zeigermann.eu
Boiler Plate Code sucks
class Horse extends Animal {
constructor(name: string) { super(name); }
move(): void {
alert("Galloping...");
super.move(45);
}
}
| zeigermann.eu
TypeScript for Inheritance
| zeigermann.eu
Compare
| zeigermann.eu
Comparing to CoffeeScript CoffeeScript has in
common
• Compiles to JavaScript
• Classes and inheritance
as syntactic sugar
CoffeeScript differs
• Semantics (a little) different
from JavaScript
• No static type information
• Fixes lexical scoping
| zeigermann.eu
Comparing to Dart Dart has in common
• Optional static typing
including Generics
• Runs on Client and Server
• Compiles to JavaScript
Dart differs
• Semantics different from
JavaScript
• Can also be executed
natively in dedicated VM
• 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
Wrap-Up
• 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
Where to apply?
| zeigermann.eu
And there is more! • Mapping files
• External module
declarations for AMD /
CommonJS
• Enums
• Generics
• Casts
• All the ES 6 goodness
• Declaration files for
JavaScript libraries
Thanks for the attention! Questions / Discussion!
!!
Follow @DJCordhose [email protected]
zeigermann.eu