Typed JavaScript with TypeScriptOliver 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 CoffeeScriptCoffeeScript 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 DartDart 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 @DJCordhoseoliver@zeigermann.de

zeigermann.eu