TypeScript und Angular

Thin Web (klassische) Clients

Jede UI Aktion wird vom Server behandelt
Server liefert Daten und Darstellung
UIs werden i.d.R. mit jQuery & Co. "gepimped"

Typisch für:

Servlets-basierte Web Frameworks
PHP
...

Rich Web Clients

AngularJS

Module

Top Level Element

var mod = angular.module("myApp", ["dependencyA", "dependencyB"]);

Einstiegspunkt in die API

mod.controller("MyController", MyController);

function MyController() {
  ...
}

Controller erstellen

Best practice: Konstruktor-Funktion

function MyController() {
  this.name = "Max";

  this.sayHello = function () {
    alert("Hello " + this.name + "!");
  };
}

Controller verwenden

<body ng-controller="MyController as myController">
  <div>
    Namen eingeben:
    <input type="text" ng-model="myController.name">
  </div>

  <div>
    Ihr Name: <span>{{myController.name}}</span>
  </div>

  <button ng-click="myController.sayHello()">Hallo!</button>
</body>

Service erstellen

Variante 1: Konstruktor-Funktion

function MyService() {
  this.sayHello = function(name) {
    alert("Hello " + name + "!");
  }
}

mod.service("MyService", MyService);

Service erstellen

Variante 2: Factory

function MyService()  {
  var service = {};

  service.sayHello = function(name) {
    alert("Hello " + name + "!");
  };

  return service;
}

mod.factory("MyService", MyService);

Service verwenden

Dependency Injection...

mod.service("MyService", MyService);
mod.factory("MyService", MyService);

... im Controller

function MyController(MyService) {
  this.name = "Max";

  this.sayHello = function () {
    MyService.sayHello(this.name);
  };
}

Direktive Beispiele

<input type="text" ng-model="MODEL">

<button ng-click="FUNCTION()">Hallo!</button>

Direktive Beispiele

HTML

<person data="myController.personObj"/>

Controller

this.personObj = {firstname: "Max", lastname: "Mustermann"}

Direktive erstellen

function PersonDirective() {
  return {
    restrict: "E",
    scope: {
      data: "="
    },
    controller: function ($scope) {
      $scope.sayHello = function (person) {
        alert("Hello " + person.firstname + "!");
      }
    },
    template: "Hallo {{data.firstname}} {{data.lastname}}!" +
      "<button ng-click='sayHello(data)'>Hello</button>"
  }
}

mod.directive("person", PersonDirective);

Probleme

Module bieten keine Kapselung

angular.module("mod1").service("MyUtils", MyUtils);

angular.module("mod2").service("MyUtils", MyUtils);
angular.module("mod2").controller("MyController", MyController);

Probleme

Keine Struktur

function MyController() {
  this.help = function () {
    ...
  };

  this.name = "Max";

  var privateList = [];

  this.sayHello = function () {
    ...
  };

  this.unused = "";
}

Probleme

Dicts

return {
  restrict: ...,
  scope: ...,
  controller: ...,
  template: ...,
  priority: ...,
  templateUrl: ...,
  templateNamespace: ...,
  bindToController: ...,
  require: ...,
  compile: ...,
  link: ...
}

TypeScript

Hello TypeScript! JavaScript?

function hello(name) {
  alert("Hello " + name + "!");
}

Hello TypeScript!

function hello(name: any) {
  alert("Hello " + name + "!");
}

function hello(name: string) {
  alert("Hello " + name + "!");
}

Basic Types

var isDone: boolean = false;
var height: number = 6;
var name: string = "bob";
var list:number[] = [1, 2, 3];

enum Color {Red, Green, Blue}
var c: Color = Color.Green;

Type Inferencing

var b1: boolean = false;
var b2 = true;

b2 = b1;

Typisierung

var person = {
  firstname: "Max",
  lastname: "Mustermann"
};

interface Person {
  firstname: string;
  lastname: string;
}

var person: Person = {
  firstname: "Max",
  lastname: "Mustermann"
};

Typisierung

var person: Person = {
  firstname: "Max",
  lastname: "Mustermann"
};

function hello(person: Person) {
  alert("Hello " + person.firstname + "!");
}

Compiler Fehler!

interface Person {
  firstname: string;
  lastname: string;
}

var person: Person = {
  firstname: "Max",
  lastnme: "Mustermann" // TYPO
};

Klassen - structural type system

class Person {
  firstname: string;
  lastname: string;
}

var person: Person = {
  firstname: "Max",
  lastname: "Mustermann"
};

Klassen - structural type system

Fehler!

class Person {
  firstname: string;
  lastname: string;

  sayHello() {
    alert(this.firstname);
  }
}

var person: Person = {
  firstname: "Max",
  lastname: "Mustermann"
};

Klassen - structural type system

class Person {
  firstname: string;
  lastname: string;

  constructor(firstname: string, lastname: string) {
    this.firstname = firstname;
    this.lastname = lastname;
  }

  sayHello() {
    alert(this.firstname);
  }
}

var person: Person = new Person("Max", "Mustermann");
person.sayHello();

Klassen - structural type system

Besser:

class Person {

  constructor(public firstname: string, public lastname: string) {
  }

  sayHello() {
    alert(this.firstname);
  }
}

var person: Person = new Person("Max", "Mustermann");
person.sayHello();

http://www.typescriptlang.org/Playground

Integration mit JavaScript - Optional

interface Person {
  name: string;
  age?: number;
}

Gültig:

var p1: Person = { name: "Max", age: 40 };
var p1: Person = { name: "Max" };

Ungültig:

var p1: Person = { name: "Max", age: "40" };
var p1: Person = { name: "Max", city: "Bonn" };

Integration mit JavaScript - Syntax

// Array
var list = [1, 2, 3];
list.aProperty = "foo";
var i = list[1];

// Function
var myFunction = function () {
};
myFunction.aProperty = "bar";
var y = myFunction();

Integration mit JavaScript - Arrays

interface StringList {
  [index: number]: string;
  aProperty: number;
}

function myFunction(list: StringList) {
  var str = list[2];
  list.aProperty = "foo";
}

Integration mit JavaScript - Function Types

interface Alerter {
  (message: string): void;
  aProperty: number;
}

function myFunction(alerter: Alerter) {
  alerter("my message");
  alerter.aProperty = "bar";
}

Integration mit JavaScript - Union Types

interface Options {
  args: string|string[];
}

Gültig:

var o1: Options = { args: "a" };

var o2: Options = { args: ["a", "b", "c"] };

Ungültig:

var o3: Options = {
    args: 1
};

Integration mit JavaScript - Union Types / Type Guards

function useFirstArg(o: Options) {

  var a = o.args;

  if(typeof a === 'string') {
    return a.substring(5);
  } else {
    return a[0].substring(5);
  }

}

Module

Datei "utils.ts"

var counter = 0;

export class Utils {
    static message(message: string) {
        alert((counter++) + " " + message);
    }
}

Datei "service.ts"

import {Utils} from "./utils";

Utils.message("test");

AngularJS und TypeScript kombinieren

Klassen für Controller

class TsController {

  private counter = 0;
  name: string;

  constructor() {
    this.name = "Max";
  }

  sayHello() {
    alert((this.counter++) + " Hello from TS!");
  }
}

mod.controller("TsController", TsController);

Klassen für Services

class TsService {

  private counter = 0;

  sayHello() {
    alert((this.counter++) + " Hello from TsService!");
  }
}

mod.service("tsService", TsService);

"Entweder/Oder"

// Variante 1
angular.module("app").service("MyService", function (utils) {
  ...
});

// Variante 2
angular.module("app").service("MyService", ["utils", function (utils) {
  ...
}]);

function service(name: string, inj: Function|any[]) {
  // ...
}

API für Directives

return {
  restrict: "E",
  scope: {
    data: "="
  },
  controller: function ($rootScope, $scope) { /* ... */ },
  template: "..."
}

interface IDirective {
    controller?: any;
    restrict?: string;
    scope?: any;
    template?: any;
    // ...
}

Module

AngularJS Module bieten keine Kapselung
TypeScript Module unterstützen private/public, ...

export class MyService {
  // ...
}

Bringt leider nichts, Injector hat einen globalen Namensraum

appMod.service("MyService", MyService);

TypeScript type definitions

.d.ts Beispiel

interface JQueryStatic {
    (selector: string, context?: Element|JQuery): JQuery;
    (element: Element): JQuery;
    (html: string, ownerDocument?: Document): JQuery;
    // ...
}

declare var $: JQueryStatic;

Directiven API - JavaScript Style

function PersonDirective() {
  return {
    restrict: "E",
    scope: {
      data: "="
    },
    controller: function ($scope) {
      $scope.sayHello = function (person) {
        alert("Hello " + person.firstname + "!");
      }
    },
    template: "Hallo {{data.firstname}} {{data.lastname}}!" +
      "<button ng-click='sayHello(data)'>Hello</button>"
  }
}

mod.directive("person", PersonDirective);

Directiven API - TypeScript Style

interface TsDirectiveScope extends ng.IScope {
  data: Person
}

class TsDirective implements ng.IDirective {

  restrict = 'E';
  scope = { data: "=" };
  template = "...";

  controller($scope: TsDirectiveScope) {
    console.log("Firstname: " + $scope.data.firstname);
  }

}

mod.directive('tsDirective', () => new TsDirective());

DefinitelyTyped

http://definitelytyped.org/
1.129 Projekte (Stand: 20. August 2015)
Installation mit:

$ tsd install angularjs --save

AngularJS & TypeScript

Roman Roelofsen