Download - Jazoon2013 type script
![Page 1: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/1.jpg)
Typed JavaScript with TypeScript Oliver Zeigermann
![Page 2: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/2.jpg)
| 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
![Page 3: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/3.jpg)
| zeigermann.eu
TypeScript
http://www.typescriptlang.org
![Page 4: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/4.jpg)
| zeigermann.eu
Types
![Page 5: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/5.jpg)
• 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
![Page 6: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/6.jpg)
| zeigermann.eu
Reliable IDE support for • Code Analysis
• Code Completion
• Quick Fixes
• Refactoring
• Type Hierarchies
• Outline
![Page 7: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/7.jpg)
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…
![Page 8: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/8.jpg)
var name = "Olli";
function doIt(p1, p2, p3) {
…
}
doIt(name);
| zeigermann.eu
Optional Declared Types: Basics
![Page 9: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/9.jpg)
var name: string = "Olli";
function doIt(p1: number, p2: boolean, p3: string): void {
…
}
doIt(name);
| zeigermann.eu
Optional Declared Types: Basics
![Page 10: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/10.jpg)
• 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
![Page 11: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/11.jpg)
| zeigermann.eu
Syntactic Sugar
![Page 12: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/12.jpg)
| zeigermann.eu
JavaScript can express all this • classes
• interfaces
• inheritance
• modules
• optional and default
parameters
• and more…
![Page 13: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/13.jpg)
__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
![Page 14: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/14.jpg)
• TypeScript offers syntactic sugar for those patterns
• No other modifications to language
• Compiler spits out best practice code
| zeigermann.eu
Boiler Plate Code sucks
![Page 15: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/15.jpg)
class Horse extends Animal {
constructor(name: string) { super(name); }
move(): void {
alert("Galloping...");
super.move(45);
}
}
| zeigermann.eu
TypeScript for Inheritance
![Page 16: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/16.jpg)
| zeigermann.eu
Compare
![Page 17: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/17.jpg)
| 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
![Page 18: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/18.jpg)
| 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
![Page 19: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/19.jpg)
• 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
![Page 20: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/20.jpg)
• 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?
![Page 21: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/21.jpg)
| 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
![Page 22: Jazoon2013 type script](https://reader033.vdocuments.net/reader033/viewer/2022060107/554cc255b4c905aa608b57f7/html5/thumbnails/22.jpg)
Thanks for the attention! Questions / Discussion!
!!
Follow @DJCordhose [email protected]
zeigermann.eu