TypeScript

a short introduction to an amazing preprocessor for JS

David Lorenz

web enthusiast

What is it?

Beautiful typed code

Best practice JS

Superset of JavaScript (unlike CoffeeScript)

Why TypeScript?

• Its totally downwards compatible to JS
• Typed data -> obvious variable distinction -> less documentation required
• TypeScript is made to be partitioned (work at the same module in different files)
  --> merged to one file
• Because it tells you that you are doing shit before you run tests or do browser testing
• It allows to force developers to write nice and maintainable code while not dictating to do so

Nah. I am a JS Guru, I write nice code.

JS is not nice - per nature

function doSomething () {
  var _this = this;
  var callback = function() {
    _this.hello();
    
    var _anotherContext = this;
    var innerCallback = function() {
        _anotherContext.helloAgain();
    };
  };
}

Nah. I am a JS Guru, I write nice code.

var Namespace1;
(function (Namespace1) {
    (function (Namespace2) {
        (function (Example) {
            var Test = (function () {
                function Test(name) {
                }
                return Test;
            })();
        })(Namespace2.Example || (Namespace2.Example = {}));
        var Example = Namespace2.Example;
    })(Namespace1.Namespace2 || (Namespace1.Namespace2 = {}));
    var Namespace2 = Namespace1.Namespace2;
})(Namespace1 || (Namespace1 = {}));

Tell me more about how well you know your code.

partnerAutocompleteServer: function(atElement, options) {
  //...
}

Probably DOM or JQ-Object

(good documentation resolves this)

Well... options and stuff.

Like writing essays of documentation?

How to use TypeScript

npm install -g typescript

tsc input.ts
tsc --out input.js input.ts

install

compile

Still missing in TS

No unreferenced function calls

public class Test {
  private void blubb(){
   System.out.println("blubb!");
  }

  public void blubbCaller() {
   System.out.println("Starting to call...");
   blubb();
  }
}

public class TypeScriptTest {
  private blubb(): void{
   console.log("blubb!");
  }

  public blubbCaller(): void {
   console.log("Starting to call...");
   blubb();
  }
}

Java (code example does work)

TypeScript (code example does not work)

Still missing in TS

No real polymorphic functions

public class Test {
  public void foo() {
    System.out.println("Called without arguments");
  }

  public void foo(String[] args) {
    System.out.println("Called with array of strings");
  }

  public void foo(int bar) {
    System.out.println("Called with a number");
  }
}

Java (code example does work)

public class Test {
  public foo(): void {
    console.log("Called without arguments");
  }

  public void foo(int bar): void {
    console.log("Called with a number");
  }
}

TypeScript (meh, does not work)

TypeScript Documentation

TSDoc

Typescript Docs

JSDoc-Style: http://blogs.msdn.com/b/typescript/archive/2013/01/21/announcing-typescript-0-8-2.aspx

/**
Cool namespace
@module
*/
module MyNamespace {
  /**
  A class for dogeeees
  @class 
  */
  class DogeClass {
    /**
    Wow, such doge! Many call.
    @param {String} name - The name of doge
    */
    public callDoge(dogeName: string): void {
      alert(dogeName);
    }
  }
}

TypeScript Livecoding

http://stevehanov.ca/comics/comic_20040326.png