Typed JavaScript with
TypeScript
Oliver Zeigermann
What is TypeScript?
• Programming Language

• Superset of JavaScript

• Compiles to JavaScript

• Adds Declared Types

• E...
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 dec...
Reliable IDE support for
• Code Analysis

• Refactoring

• Code Completion

• Type Hierarchies

• Quick Fixes

• Outline

...
JavaScript IDEs offer that
without declared types, but…
not reliable!
•Ever had a non-reliable Internet Connection?
•Remem...
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)

• Full...
Syntactic
Sugar
|

zeigermann.eu
JavaScript can express all this
• classes

• modules

• interfaces

• optional and default
parameters

• inheritance

• an...
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
• Comp...
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

•Compiles to...
Comparing to Dart
Dart has in common

Dart differs

•Optional static typing

•Semantics different from

including Generics...
Wrap-Up
• Optional Declared Types enable premium IDE support
• Syntactic sugar reduces boiler plate code
• Still totally c...
Where to apply?
• Business Logic: totally
• UI Logic only partially benefits from types
when accessed from template
• Mixt...
And there is more!
• Mapping files

• Generics

• External module

• Casts

declarations for AMD /

• All the ES 6 goodnes...
Thanks for the attention!
Questions / Discussion
Follow @DJCordhose
oliver@zeigermann.de
zeigermann.eu
Upcoming SlideShare
Loading in …5
×

JAZOON'13 - Oliver Zeigermann - Typed JavaScript with TypeScript

950 views
839 views

Published on

http://guide13.jazoon.com/#/submissions/61

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
950
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Ich:
    - JavaScript- und Java-Entwickler
    Vorbereitung:
    - TypeScript-Playground öffnen
  • Hier die TypeScript-Seite aufmachen und kurz im Playground zeigen (5 Minuten Max)
    Generiertes JavaScript ist lesbar für Menschen
    Obermenge von JavaScript, keine Semantische Lücke wie bei GWT oder TypeScript
    Anders Hejlsberg erwähnen
  • Erwähnen, dass auch zusätzliche Checks hilfreich sind
  • Erwähnen, dass auch zusätzliche Checks hilfreich sind
  • Erwähnen, dass auch zusätzliche Checks hilfreich sind
  • Evtl. überspringen
  • Erwähnen, dass auch zusätzliche Checks hilfreich sind
  • Erwähnen, dass auch zusätzliche Checks hilfreich sind
  • JAZOON'13 - Oliver Zeigermann - Typed JavaScript with TypeScript

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

    ×