Backbone.js-Anwendung in TypeScript mit require.js

Gespeichert von Erik Wegner am/um
Aufmacherbild

In einem neuen GitHub-Repository habe ich das Backbone-Tutorial in TypeScript nachgebaut.

TypeScript ist eine Erweiterung von JavaScript, die Klassen, Module, Sichtbarkeiten und Typisierung ermöglicht.

Die Bibliothek Backbone.js hilft im Browser z. B. bei der Verwaltung von Elementen in Ansichten. Sie stellt alle notwendigen Bestandteile bereit, um Single-Page-Apps zu entwickeln.

Dabei waren einige Herausforderungen zu lösen:

  1. Backbone.js verwendet die Methode extend, um ein Vererbungskonzept umzusetzen. Gleichzeitig stellt der TypeScript-Compiler eine eigene extend-Funktion bereit. Die verwendeten Definitions-Dateien fordern auf, die Backbone-extend-Funktionsaufrufe nicht zu verwenden. Dafür soll die TypeScript-Klassenvererbung genutzt werden. Als Konsequenz müssen verschiedene Constructor- und Initialize-Funktionen überarbeitet werden. Auch das Anmelden der Events erfolgt auf abweichende Weise.
  2. Das Aufteilen der Bestandteile (Modell, Sammlung, Ansicht) auf verschiedene Dateien und das Laden mit Hilfe von require.js. Aus jeder TypeScript-Datei entsteht eine JavaScript-Datei. Um untereinander auf Klassen und Funktionen zuzugreifen, werden Module definiert. Der Compiler erzeugt Module wahlweise als CommonJS (node.js) oder AMD (require.js). Die Quellen enthalten einfach import-Anweisungen, das Ergebnis enthält das entsprechende Konstrukt des require-Aufrufs. Damit können a) die TypeScript-Dateien klein gehalten werden und b) werden Dateien erst geladen, wenn sie benötigt werden.