In der heutigen schnelllebigen Welt der Anwendungsentwicklung umfassen Projekte häufig mehrere Entwickler und sind von Dutzenden von Bibliotheken abhängig. Wenn Sie mit JavaScript auf der Fastly Compute-Plattform entwickeln, werden Sie möglicherweise TypeScript und die damit verbundene Robustheit für Ihren Entwicklungsprozess zu schätzen wissen – und damit sind Sie sicherlich nicht allein. Tatsächlich ist die Unterstützung von TypeScript eine häufig gestellte Frage von Entwicklern. Glücklicherweise ist die Arbeit mit TypeScript in Fastly Compute unkompliziert.

Warum TypeScript?

Für diejenigen, die TypeScript noch nicht kennen: Es handelt sich um eine Obermenge von JavaScript, die statische Typisierung hinzufügt. Es unterstützt die frühzeitige Erkennung von Fehlern und verbessert die Wartbarkeit des Codes, was es zu einer beliebten Wahl für groß angelegte Anwendungen macht. TypeScript erfreut sich großer Beliebtheit unter Entwicklern, möglicherweise aufgrund der verbesserten Entwicklererfahrung, die es in Form von Code-Vervollständigung und Typprüfung in Ihrer bevorzugten IDE bietet.

Tatsächlich verfügt das JavaScript SDK von Fastly über einen vollständigen Satz von TypeScript-Typisierungen, sodass die Arbeit damit in Umgebungen wie VS Code und IntelliJ IDEA ein Kinderspiel ist, selbst wenn Sie mit einfachem JavaScript schreiben:

Codevervollständigung in JavaScript in IntelliJ IDEA, dank der von @fastly/js-compute exportierten TypeScript-Typisierungen 

Durch die Verwendung von TypeScript zum Schreiben Ihrer Anwendung wird Ihr Code robuster, da Sie Typen in Ihrer Anwendung definieren und erweitern können und sicherstellen, dass die Werte, Variablen und Funktionen ihren Verwendungszwecken entsprechen. Auf diese Weise können Sie viele Fehler früher erkennen – während der Build-Zeit und dank der Syntaxhervorhebung sogar schon vorher –, anstatt darauf zu warten, dass sie zur Laufzeit auftreten.

TypeScript ist so konzipiert, dass es einfach hinzugefügt werden kann. Tatsächlich ist die Sprache TypeScript als Obermenge von JavaScript positioniert. Wenn Sie also bereits mit JavaScript vertraut sind, müssen Sie für die Verwendung lediglich einige Regeln und Keywords erlernen. Sehen Sie sich das TypeScript-Handbuch an, um mit der Sprache zu beginnen.

Erste Schritte mit TypeScript auf Fastly Compute

Wenn es an der Zeit ist, Ihren Code auszuführen, wird der in TypeScript geschriebene Quellcode zunächst in äquivalenten JavaScript-Code übersetzt und dann in einer JavaScript-Umgebung ausgeführt. Mit anderen Worten: TypeScript fungiert als Compilerschritt in einem JavaScript-Projekt, was bedeutet, dass es auch für Fastly Compute einfach einzurichten ist.

Wenn Sie ein neues Projekt von Grund auf beginnen, stellt Fastly ein offizielles TypeScript-Starterkit bereit, um Ihnen den Einstieg zu erleichtern. Der einfachste Einstieg ist die Verwendung des Befehls npm init @fastly /compute in einem neuen Verzeichnis:

mkdir new-project && cd new-project
npm init @fastly/compute@latest

Ich habe npm init @fastly/compute in einem früheren Blogbeitrag ausführlicher behandelt. Schauen Sie sich das also unbedingt an, wenn Sie neu in der JavaScript-Entwicklung mit Fastly Compute sind.

Dieser Befehl führt Sie durch die Einrichtung eines neuen Compute-Projekts. Bei der entsprechenden Aufforderung können Sie TypeScript als Ihre Sprache auswählen. Dadurch wird ein Projekt mit unserem TypeScript-Starterkit generiert, das alles enthält, was Sie für eine schnelle Inbetriebnahme benötigen, komplett mit allen vorkonfigurierten Build-Schritten und einer index.ts-Datei, die den Request Handler enthält.

Mit TypeScript erkennt die IDE in den meisten Fällen die Typen von Variablen und Parametern

TypeScript fängt ganze Fehlerklassen bereits in der Build-Phase ab, wodurch die Entwicklung effizienter und Ihr Code zuverlässiger wird

Hinzufügen von TypeScript zu einer bestehenden Compute-Anwendung

Wenn Sie bereits eine JavaScript-basierte Fastly Compute-Anwendung haben und auf TypeScript migrieren möchten, können Sie dies in nur wenigen Schritten tun.

HINWEIS: Die folgenden Anweisungen gehen davon aus, dass Ihre Compute-Anwendung keinen Bundler wie Webpack, esbuild oder rollup verwendet. Wenn Ihr Projekt einen Bundler verwendet, fügen Sie TypeScript gemäß den Anweisungen für Ihren Bundler hinzu (Webpack, esbuild, rollup).

1. Installieren Sie TypeScript als Entwicklungsabhängigkeit:

npm install --save-dev typescript

2. Erstellen Sie eine tsconfig.json-Datei in Ihrem Projektstammverzeichnis. Eine empfohlene Konfiguration für Fastly Compute ist:

{
  "compilerOptions": {
    "strict": true,
    "rootDir": "src",
    "outDir": "build",
    "allowJs": true,
    "module": "ES2022",
    "lib": [ "ES2022" ],
    "moduleResolution": "bundler",
    "customConditions": [ "fastly" ],
    "esModuleInterop": true
  }
}

Weitere Informationen zu den Eigenschaften, die in dieser Datei festgelegt werden können, finden Sie in der tsconfig.json-Dokumentation.

3. Die obige Konfiguration speichert die zwischengespeicherten „kompilierten” JavaScript-Dateien im Verzeichnis build/, also fügen Sie dieses Verzeichnis zu Ihrer .gitignore-Datei hinzu.

/build

4. Fügen Sie tsc (TypeScript-Compiler) als „Prebuild“-Skript Ihrer Anwendung hinzu. Zusätzlich muss der „Build“-Schritt die Eingabedatei im Zwischenverzeichnis finden. Aktualisieren Sie Ihre Skripte in package.json wie folgt:

{
  "scripts": {
    "prebuild": "tsc",
    "build": "js-compute-runtime build/index.js bin/main.wasm"
  }
}

5. Benennen Sie Ihre .js-Dateien in .ts um und fügen Sie bei Bedarf Typanmerkungen hinzu. Fügen Sie zum Beispiel den FetchEvent-Typ zum Ereignisobjekt in Ihrem Handler hinzu:

async function handler(event: FetchEvent) {
  // ...
}

Jetzt können Sie die TypeScript-Anwendung erstellen und ausführen!

Diese Schritte werden im Abschnitt „TypeScript“ unserer JavaScript-Dokumentation ausführlicher behandelt. Sehen Sie sich diesen Abschnitt also unbedingt an, wenn Sie weitere Unterstützung benötigen.

So funktioniert’s

Nachdem Sie die oben genannten Schritte ausgeführt haben, werden beim Erstellen der Anwendung die folgenden Schritte ausgeführt:

1. Die Datei fastly.toml wird nach ihrem Wert scripts.build durchsucht, der npm run build lautet. Dies weist npm an, das im package.json aufgeführte Build-Skript auszuführen. 

2. Da package.json ein prebuild-Skript definiert, führt npm es zuerst aus: tsc verarbeitet die TypeScript-Quelldateien in src/ und gibt sie in bin/ aus.

3. npm führt das build-Skript aus: Das CLI-Tool js-compute-runtime erstellt die JavaScript-Laufzeit und das Programm in einer Wasm-Binärdatei unter bin/main.wasm und packt es für die Bereitstellung in Compute.

Mit diesem Verständnis können Sie bei Bedarf weitere Anpassungen für das Build-Setup Ihrer Anwendung vornehmen.

Beteiligen Sie sich an der Diskussion

Wir sind gespannt, was Sie mit TypeScript auf Fastly Compute erstellen! Wenn Sie es noch nicht getan haben, holen Sie sich Ihren kostenlosen Fastly-Entwickler-Account und besuchen Sie uns im Fastly-Community-Forum. Wir würden uns freuen, zu erfahren, was Sie entwickelt haben!

Viel Spaß beim Programmieren!