3 Vergleich zwischen TypeScript und JavaScript

3.1 Einführung

JavaScript ist eine der grundlegenden Technologien des World Wide Webs und wird von den meisten modernen Webbrowsern unterstützt. Es handelt sich um eine dynamisch typisierte, interpretierte Sprache, die sich ideal für das Entwickeln von interaktiven Webseiten eignet.

TypeScript hingegen ist eine Übermenge von JavaScript, entwickelt von Microsoft, die statische Typisierung hinzufügt. Es bietet außerdem zusätzliche Features, die nicht in JavaScript enthalten sind.

3.2 Ähnlichkeiten zwischen TypeScript und JavaScript

Da TypeScript eine Übermenge von JavaScript ist, ist jeder gültige JavaScript-Code auch gültiger TypeScript-Code. Beide Sprachen teilen also viele Merkmale, darunter:

1. Syntax: Da TypeScript auf JavaScript aufbaut, sind viele der syntaktischen Merkmale identisch.

2. Verwendungszweck: Beide Sprachen eignen sich hervorragend für das Entwickeln von Web- und Server-Anwendungen.

3.3 Unterschiede zwischen TypeScript und JavaScript

Obwohl TypeScript und JavaScript viele Ähnlichkeiten aufweisen, gibt es auch signifikante Unterschiede zwischen den beiden:

1. Typisierung: Eine der hauptsächlichen Unterschiede zwischen TypeScript und JavaScript ist das Typsystem. JavaScript ist dynamisch typisiert, was bedeutet, dass Typen während der Laufzeit bestimmt werden. TypeScript hingegen bietet statische Typisierung, die es ermöglicht, Typen während der Kompilierzeit zu überprüfen. Das hilft, Fehler früher zu erkennen und zu vermeiden.

2. Klassen und Interfaces: Obwohl JavaScript mit ES6 Klassen eingeführt hat, bietet TypeScript erweiterte OOP-Features, einschließlich Interfaces.

3. Modulsystem: TypeScript unterstützt Modulsysteme wie ES6, CommonJS, AMD, SystemJS und UMD, während JavaScript (bis ES6) kein natives Modulsystem hatte.

4. Tooling: TypeScript bietet ein ausgezeichnetes Tooling mit IntelliSense, was Code-Vervollständigung, Code-Navigation und refactoring einfacher und effektiver macht.

3.4 Warum TypeScript? Vor- und Nachteile gegenüber JavaScript

TypeScript bietet viele Vorteile gegenüber JavaScript, darunter bessere Tooling-Unterstützung, statische Typisierung und verbesserte OOP-Features. Es verbessert die Lesbarkeit und Wartbarkeit des Codes, hilft bei der Fehlervermeidung und bietet eine bessere Entwicklungserfahrung.

Dennoch gibt es auch einige Nachteile. Dazu gehören eine steilere Lernkurve, längere Kompilierzeiten und eine mögliche Verwirrung durch die zusätzliche Komplexität, die TypeScript im Vergleich zu JavaScript hinzufügt.

3.5 Praktische Beispiele: JavaScript vs. TypeScript

Um die Unterschiede zwischen TypeScript und JavaScript besser zu veranschaulichen, werden im Folgenden einige Codebeispiele vorgestellt, die die Vorteile der statischen Typisierung und erweiterten OOP-Features in TypeScript demonstrieren.

1. Statische Typisierung:

   In JavaScript können Sie Variablen beliebigen Typs zuweisen, was zu unerwartetem Verhalten führen kann:

   let count = 1;
   count = "1";  // Das ist in JavaScript erlaubt

   In TypeScript können Sie den Typ einer Variablen festlegen, und ein Versuch, einen Wert eines anderen Typs zuzuweisen, führt zu einem Fehler:

   let count: number = 1;
   // Fehler in TypeScript: Type '"1"' is not assignable to 
   // type 'number'.
   count = "1";  

2. Interfaces:

   TypeScript unterstützt die Verwendung von Interfaces, die zur Festlegung von benutzerdefinierten Typen verwendet werden können. JavaScript hingegen unterstützt keine Interfaces.

   interface Person {
       name: string;
       age: number;
   }
   
   let john: Person = {
       name: 'John',
       age: 30
   };

   In diesem Fall hilft das Person-Interface dabei, zu gewährleisten, dass das Objekt john bestimmte Eigenschaften aufweist, nämlich name (ein String) und age (eine Zahl).

3. Klassen und Vererbung:

   Beide, JavaScript und TypeScript, unterstützen Klassen und Vererbung, aber TypeScript bietet zusätzliche Funktionen, wie Zugriffsmodifikatoren und abstrakte Klassen.

   class Animal {
       // private ist ein Zugriffsmodifikator in TypeScript
       private name: string;  
   
       constructor(name: string) {
           this.name = name;
       }
   
       public move(distance: number) {
           console.log(`${this.name} moved ${distance} meters.`);
       }
   }
   
   class Snake extends Animal {
       constructor(name: string) {
           super(name);
       }
   
       move(distance = 5) {
           console.log("Slithering...");
           super.move(distance);
       }
   }
   
   let sam = new Snake("Sammy the Python");
   sam.move();

   In diesem TypeScript-Beispiel ist name eine private Eigenschaft, was bedeutet, dass sie nur innerhalb der Animal-Klasse zugänglich ist. In JavaScript gibt es keine eingebaute Unterstützung für private Eigenschaften (bis zu ES2020, wo private Felder eingeführt wurden, die jedoch noch nicht breit unterstützt werden). Die Snake-Klasse erweitert Animal, und überschreibt die move Methode.

Diese Beispiele zeigen einige der zusätzlichen Funktionen, die TypeScript gegenüber JavaScript bietet.