JavaScript skaliert mit TypeScript Tutorial

Letzte Aktualisierung:

Im Moment verstehen nicht alle Browser die aktuelle JavaScript version jedoch alle einheitlich  ES5, was für Entwickler bedeutet das man nicht in  ES6 oder höher schreiben bzw. vollständig schreiben kann. Da man auf jeden Browser optimieren müsste per work around oder auf eben die in ES6 oder höher vorhandenen Funktionen verzichten.

Als Entwickler möchte man nicht hinterher sondern voraus sein. Das bedeutet aktuell zu bleiben und die neuste Technik, die neuste Entwicklung, die neuste Plattform oder auch das neuste Framework ausprobieren und in Erfahrung zu bringen. Es gibt von Microsoft den Compiler TypeScript und damit können wir mit der aktuellsten version von JavaScript coden.



 ECMA International

Warum TypeScript verwenden ?

Wir können dann nicht nur in der aktuellsten Version Coden sondern, wie der Name es bereits sagt, Typen verwenden. Das heißt, wir können Datentypen definieren wie String, number oder auch boolean. So bekommen wir Fehler wie falsche Daten übergaben nicht in runtime zu sehen, sondern bereits in unserer Entwicklungsumgebung und können sie rechtzeitig beheben.



// TS CODE
     0  constructor(foo: number, bar: string) { 


    TypeScript Installieren

    Um TypeScript zu installieren benötigst Du zunächst  Node.js lade es herunter und installiere es auf Deinem Betriebssystem. Danach einfach ausführen

    USERNAME$ npm install -g typescript

    Damit hast Du bereits die installation erledigt wenn Dein Editor  Visual Studio Code heißt, wenn nicht dann benötigst Du wahrscheinlich ein paar mehr schritte oder Du entscheidest Dich auch für VSC. Wir haben in diesem Fall den VSC Editor von Microsoft und damit auch direkt TypeScript mit an Board.



    TypeScript Konfiguration mit der tsconfig

    Für die Konfiguration benötigen wir die

    tsconfig.json

    mit der wir TypeScript Optionen und weiteres mitteilen. Und diese könnte wie folgt aussehen, wo wir z.B. festlegen auf eine ältere JS version zu transpilieren oder auch Kommentare entfernen.


    // JSON CODE
       0  {  1      "compilerOptions": {  2          "target": "es5",  3          "module": "commonjs",  4          "noImplicitAny": true,  5          "removeComments": true,  6          "preserveConstEnums": true,  7          "sourceMap": true  8      },  9      "files": ["./core/js/class.typescript.ts"]  10  } 

      Somit hätten wir auch unsere Konfiguration Vervollständig und können loslegen.



      Coden und transpilieren

      Nun erstellen wir eine neue TypeScript Datei und benennen diese so wie auch unsere JavaScript Datei heissen wird jedoch mit der Endung ts, zum Beispiel

      script.ts

      In der TypeScript Datei können wir nun mit der aktuellsten JavaScript version coden :), hier ein kleines Beispiel

      // TS CODE
         0  class Typescripter {  1    2      foo = 2;  3      bar = 'string';  4    5      constructor(foo: number, bar: string) {  6          this.foo = foo;  7          this.bar = bar;  8      }  9    10      method() {  11    12          alert('foo: ' + this.foo   13          + ' - bar: ' + this.bar);  14      }  15  }  16    17  let typo = new Typescripter(5, 'test');  18  typo.method(); 

        Wenn wir unseren Code geschrieben haben, öffnen wir unsere Konsole und geben folgendes ein

        USERNAME$ tsc

        wenn in der tsconfig.json files nicht angegeben wurde muss dabei auch der Pfad

        USERNAME$ tsc path/script.ts

        angegeben werden. Nach dem transpilieren befindet sich die erstellte JavaScript version

        script.js

        in den selben Ordner.


        // JS CODE
           0  var Typescripter = (function () {  1      function Typescripter(foo, bar) {  2          this.foo = 2;  3          this.bar = 'string';  4          this.foo = foo;  5          this.bar = bar;  6      }  7      Typescripter.prototype.method = function () {  8          alert('foo: ' + this.foo  9              + ' - bar: ' + this.bar);  10      };  11      return Typescripter;  12  }());  13  var typo = new Typescripter(5, 'test');  14  typo.method();  15  //# sourceMappingURL=class.typescript.js.map 

          Probier es gleich aus um mit der neusten und aktuellsten JavaScript version zu coden.



          Erweitern der Möglichkeiten Tutorial

          Um es noch weiterzuführen könnten wir hier in diesem TypeScript Tutorial noch von anderen Frameworks profitieren und so einiges mehr für unsere Umgebung rausholen. Das bedeutet wir erweitern unsere Umgebung so das wir mehr Browser Spezifisch arbeiten. Einige Frameworks erlauben uns sie direkt im Browser auszuführen und zu kompilieren, jedoch bedeutet dies auch wieder mehr Performance Verlust. Deshalb nutzen wir hier alles in unserer Entwicklungsumgebung und das Beispiel dafür könnte so aussehen.



          • Verwende den  Typescript Compiler, um TypeScript in eine aktuelle Version von JavaScript zu kompilieren, ohne Abwärtskompatibilität oder Browser-Polyfilling bereitzustellen
          • Verwende den  Babel Compiler, um eine neuere Version von JavaScript, die Browser nicht direkt ausführen können, in eine Version umzuwandeln, die Browser ausführen können
          • Verwende das  Webpack oder  FuseBox, um deine Dateien zu bündeln, nach Belieben für die Entwicklung zu organisieren und erstellen eines einfacheres Paket für dein Projekt. Eine kleinere Lösung bietet  Parcel.


          Also Du siehst es ist noch mehr Möglich und wir werden auch auf diese dinge in folgenden Tutorials näher eingehen. Also wenn Du dies mitbekommen möchtest trage dich in unseren Newsletter ein oder Abonniere eines unserer Sozialen Netzwerke.

          Hier ist noch mehr für Webpack und TypeScript Tutorial, folge dieser Seite:
           Webpack Projekt Beispiel