TypeScript is a superset of JavaScript that adds optional static types, classes, and interfaces to JavaScript to improve developer productivity and code quality. It compiles to plain JavaScript and is compatible with any JavaScript runtime, but also enables features like type checking, code completion, and quick fixes in IDEs. While similar to languages like Dart and CoffeeScript, TypeScript is designed to be a seamless superset of JavaScript rather than a new language.

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
•Classes and inheritance as
•No static type information
syntactic sugar
•Fixes lexical scoping
|
zeigermann.eu

18. Comparing to Dart
Dart has in common
Dart differs
•Optional static typing
•Semantics different from
including Generics
JavaScript
•Runs on Client and Server
•Can also be executed natively
•Compiles to JavaScript
in dedicated VM
|
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