TypeScript - Umgebungs-Setup

Probieren Sie es Option Online

Wir haben die TypeScript-Programmierung bereits online eingerichtet, sodass Sie alle verfügbaren Beispiele gleichzeitig online ausführen können, wenn Sie Ihre theoretische Arbeit erledigen. Dies gibt Ihnen Vertrauen in das, was Sie lesen, und um das Ergebnis mit verschiedenen Optionen zu überprüfen. Sie können jedes Beispiel ändern und online ausführen.

Probieren Sie das folgende Beispiel mit unserer Online-Compiler-Option aus, die bei CodingGround verfügbar ist

var message:string = "Hello World" 
console.log(message)

Beim Kompilieren wird folgender JavaScript-Code generiert.

//Generated by typescript 1.8.10
var message = "Hello World";
console.log(message);

Für die meisten Beispiele in diesem Tutorial finden Sie a Try itOption in unseren Website-Code-Abschnitten oben rechts, mit der Sie zum Online-Compiler gelangen. Nutzen Sie es einfach und genießen Sie Ihr Lernen.

In diesem Kapitel wird erläutert, wie TypeScript auf einer Windows-Plattform installiert wird. Wir werden auch erklären, wie die Brackets IDE installiert wird.

TypeScript ─ Probieren Sie es aus Option Online

Sie können Ihre Skripte online testen, indem Sie The TypeScript unter www.typescriptlang.org/Playground verwenden . Der Online-Editor zeigt das entsprechende vom Compiler ausgegebene JavaScript an.

Sie können das folgende Beispiel mit versuchen Playground.

var num:number = 12 
console.log(num)

Beim Kompilieren wird folgender JavaScript-Code generiert.

//Generated by typescript 1.8.10
var num = 12;
console.log(num);

Die Ausgabe des obigen Programms ist unten angegeben -

Einrichtung der lokalen Umgebung

Typescript ist eine Open Source-Technologie. Es kann auf jedem Browser, jedem Host und jedem Betriebssystem ausgeführt werden. Sie benötigen die folgenden Tools, um ein Typescript-Programm zu schreiben und zu testen:

Ein Texteditor

Der Texteditor hilft Ihnen beim Schreiben Ihres Quellcodes. Beispiele für einige Editoren sind Windows Notepad, Notepad ++, Emacs, vim oder vi usw. Die verwendeten Editoren können je nach Betriebssystem variieren.

Die Quelldateien werden normalerweise mit der Erweiterung benannt .ts

Der TypeScript-Compiler

Der TypeScript-Compiler ist selbst ein .tsDatei, die in eine JavaScript-Datei (.js) kompiliert wurde. Der TSC (TypeScript Compiler) ist ein Source-to-Source-Compiler (Transcompiler / Transpiler).

Die TSC generiert eine JavaScript-Version der .tsDatei übergeben. Mit anderen Worten, die TSC erzeugt einen äquivalenten JavaScript-Quellcode aus der Typescript-Datei, die als Eingabe angegeben wird. Dieser Vorgang wird als Transpilation bezeichnet.

Der Compiler lehnt jedoch alle an ihn übergebenen unformatierten JavaScript-Dateien ab. Der Compiler befasst sich nur mit.ts oder .d.ts Dateien.

Node.js installieren

Node.js ist eine plattformübergreifende Open Source-Laufzeitumgebung für serverseitiges JavaScript. Node.js ist erforderlich, um JavaScript ohne Browserunterstützung auszuführen. Es verwendet die JavaScript-Engine von Google V8, um Code auszuführen. Sie können den Quellcode von Node.js oder ein vorgefertigtes Installationsprogramm für Ihre Plattform herunterladen. Knoten ist hier verfügbar -https://nodejs.org/en/download

Installation unter Windows

Führen Sie die folgenden Schritte aus, um Node.js in einer Windows-Umgebung zu installieren.

Step 1 - Laden Sie das MSI-Installationsprogramm für Node herunter und führen Sie es aus.

Step 2 - Um zu überprüfen, ob die Installation erfolgreich war, geben Sie den Befehl ein node –v im Terminalfenster.

Step 3 - Geben Sie den folgenden Befehl in das Terminalfenster ein, um TypeScript zu installieren.

npm install -g typescript

Installation unter Mac OS X.

Um node.js unter Mac OS X zu installieren, können Sie ein vorkompiliertes Binärpaket herunterladen, das eine schöne und einfache Installation ermöglicht. Gehe rüber zuhttp://nodejs.org/ und klicken Sie auf die Schaltfläche Installieren, um das neueste Paket herunterzuladen.

Installieren Sie das Paket von der .dmg Folgen Sie dem Installationsassistenten, der sowohl den Knoten als auch den Knoten installiert npm. npm ist Node Package Manager, der die Installation zusätzlicher Pakete für node.js erleichtert.

Installation unter Linux

Sie müssen eine Reihe von Abhängigkeiten installieren, bevor Sie Node.js und NPM installieren können.

Ruby und GCC. Sie benötigen Ruby 1.8.6 oder neuer und GCC 4.2 oder neuer.
Homebrew. Homebrew ist ein Paketmanager, der ursprünglich für Mac entwickelt wurde, aber als Linuxbrew auf Linux portiert wurde. Weitere Informationen zu Homebrew finden Sie unterhttp://brew.sh/ und Linuxbrew bei http://brew.sh/linuxbrew

Sobald diese Abhängigkeiten installiert sind, können Sie Node.js mit dem folgenden Befehl auf dem Terminal installieren:

brew install node.

IDE-Unterstützung

Typescript kann auf einer Vielzahl von Entwicklungsumgebungen wie Visual Studio, Sublime Text 2, WebStorm / PHPStorm, Eclipse, Brackets usw. basieren. Visual Studio-Code und Brackets-IDEs werden hier erläutert. Die hier verwendete Entwicklungsumgebung ist Visual Studio Code (Windows-Plattform).

Visual Studio-Code

Dies ist eine Open Source-IDE von Visual Studio. Es ist für Mac OS X-, Linux- und Windows-Plattformen verfügbar. VScode ist verfügbar unter -https://code.visualstudio.com/

Installation unter Windows

Step 1- Laden Sie Visual Studio Code für Windows herunter .

Step 2- Doppelklicken Sie auf VSCodeSetup.exe

, um den Setup-Vorgang zu starten. Dies dauert nur eine Minute.

Step 3 - Ein Screenshot der IDE ist unten angegeben.

Step 4- Sie können direkt zum Dateipfad wechseln, indem Sie mit der rechten Maustaste auf die Datei klicken → In der Eingabeaufforderung öffnen. In ähnlicher Weise zeigt die Option Im Explorer anzeigen die Datei im Datei-Explorer an.

Installation unter Mac OS X.

Die Mac OS X-spezifische Installationsanleitung von Visual Studio Code finden Sie unter

https://code.visualstudio.com/Docs/editor/setup

Installation unter Linux

Eine Linux-spezifische Installationsanleitung für Visual Studio Code finden Sie unter

https://code.visualstudio.com/Docs/editor/setup

Klammern

Brackets ist ein kostenloser Open-Source-Editor für die Webentwicklung, der von Adobe Systems erstellt wurde. Es ist für Linux, Windows und Mac OS X verfügbar. Klammern finden Sie unterhttp://brackets.io/

TypeScript-Erweiterungen für Klammern

Brackets unterstützt Erweiterungen zum Hinzufügen zusätzlicher Funktionen über den Extension Manager. In den folgenden Schritten wird die Installation von TypeScript-Erweiterungen mit derselben erläutert.

Klicken Sie nach der Installation auf das Erweiterungsmanager-Symbol

auf der rechten Seite des Editors. Geben Sie Typoskript in das Suchfeld ein.
Installieren Sie die Plugins Brackets TSLint und Brackets TypeScript.

Sie können die DOS-Eingabeaufforderung / Shell in Brackets selbst ausführen, indem Sie eine weitere Erweiterung Brackets Shell hinzufügen.

Nach der Installation finden Sie auf der rechten Seite des Editors ein Shell-Symbol

. Sobald Sie auf das Symbol klicken, sehen Sie das Shell-Fenster wie unten gezeigt -

Note- Typescript ist auch als Plugin für Visual Studio 2012- und 2013-Umgebungen verfügbar (https://www.typescriptlang.org/#Download).VS 2015 und höher enthält standardmäßig das Typescript-Plugin.

Jetzt sind Sie fertig !!!