TypeScript Tutorial Deutsch > In 6 Schritten TypeScript lernen

TypeScript Coding Lab Steffen Lippke Guide Tutorials
TypeScript Coding Lab Steffen Lippke Guide Tutorials

Brauchst Du eine Einführung für TypeScript? - hier ist das Ultimate TypeScript Tutorial für alle, die das Next-Gen-JavaScript kennenlernen möchten.

Angular, React und Ionic verwenden diese "Wundersprache"!?

Was macht die Sprache so anders?

Wie nutze ich TypeScript effizient?

TypeScript Tutorial - Inhalt - Verstehen + Anwenden

Herausforderung

Coding

Konzept

Erweiterungen

Grundlagen

Ziel

1. Kapitel

Herausforderung: TypeScript verstehen + umsetzen

Ziel

Mit TypeScript wollten wir einen Blog objektorientiert nach stellen.

Der geschulte Java-Entwickler freut sich, wenn er mit TypeScript objektorientiert programmieren darf.

Voraussetzungen: Dein Wissen

  • Etwas programmiert haben ... z. B. mit JavaScript als Grundlage von TypeScript.
  • Grundlagen in der Kommando-Ziele
  • Admin-Reche, um Programme zu installieren und zu deinstallieren

Technische Voraussetzungen: Das brauchst Du für Dein erstes TypeScript Projekt

  • Admin-Rechte
  • Mehr als 5 GB RAM (besser 12 GB - 16 GB)
  • Code Editor

Editor (Visual Studio Code)

Neben dem Browser brauchst Du einen Code-Editor Deiner Wahl.

Notepad(++) kannst Du alternativ nutzen. Am besten verwendest Du einen Editor mit Syntax-Highlighting und IntelliSense wie z. B. Visual Studio Code oder Atom.

VS Code
VS Code

 

2. Kapitel

Konzept & Lösungsansatz: Warum TypeScript cool ist

Konzept
Konzept

Ich will Dich davon überzeugen, auf die TypeScript des Codes zu kommen.

Als JavaScript-Entwickler kommst Du um TypeScript nicht herum.

Du wirst es lieben lernen.

Microsoft hat TypeScript als eine Programmiersprache entworfen, sodass ein TypeScript-Compiler TypeScript in JavaScript-Code kompiliert.

Bis zum ECMAScript 3 kann der TypeScript-Compiler JavaScript-Code kompilieren (in 2020 ist ECMAScript 10 aktuell).

TypeScript Homepage - TypeScript Tutorial Deutsch Coding Lab
TypeScript Homepage - TypeScript Tutorial Deutsch Coding Lab

 

TypeScript erlaubt dem Programmierer Variablen mit einer Typisierung zu verwenden z. B. let date:Date; oder let text:string = „“;

+ erlaubt ein einfacheres objektorientiertes Programmieren.

JavaScript Next-Generation

Gültiger JavaScript Code ist gültiger TypeScript Code

– wenn Du JavaScript kannst, kann in einer TypeScript-Datei mit Deinem JavaScript arbeiten. TypeScript erweitert die Möglichkeiten-Palette von JavaScript und bietet eine Reihe von Vereinfachungen.

5 Gründe - TypeScript ist besser als JavaScript

  • Einfachere Typisierung (optional) von Variablen:
    Java besitzt eine strenge Typisierung. Jede Variable weist der Java-Code einem Typ zu. Dies hilft dem Programmierer für die Orientierung im Code.
  • ECMAScript bis 3:
    JavaScript hat seit 1995 mehrere Updates erhalten, die den Funktionsumfang der Script Sprache erweitern. Der TypeScript-Compiler kann den TypeScript-Code verständlich herunter oder hoch in JavaScript kompilieren.
  • Einfaches Refactoring wegen Typisierung:
    Wenn Du auf die Idee kommst, dass eine Variable nicht Deinem Benennung-Standard entspricht, kannst Du die Variable einfach umbenennen.
  • Dependency Injection:
    Vereinfacht das Testen mit TypeScript.
  • Beliebt und Notwendig:
    TypeScript verwendet in verschiedenen Web-Frameworks wie Angular und Ionic
Angular verwendet TypeScript - TypeScript Tutorial Deutsch Coding Lab
Angular verwendet TypeScript - TypeScript Tutorial Deutsch Coding Lab

3. Kapitel

Basics: TypeScript Grundlagen

Grundlagen

Was zum Henker ist TypeScript?

Hat Microsoft statt "Java-" "Type-" vor  "-Script" geschrieben? So ungefähr war es 🙂

Lese Dir den folgenden Abschnitt durch, um den Praxis-Teil besser zu verstehen.

Zu Beginn möchte ich ein paar zentrale Begriffe von TypeScript erklären – Klassen, Namespaces und Module sind Konzepte, die Dich beim Programmieren unterstützen können.

TypeScript Klassen verstehen

  • Klasse: TypeScript ist im Gegensatz zu JavaScript objektorientiert aufgebaut. Mit Klassen kannst Du die Realität objektorientiert abbilden.
    class Person{name:string;}
  • Extends: Der Befehl erweitert eine bestehende Klasse mit einer Super-Klasse. Die Unterklasse „erbt“ alle Variablen und Funktionen von der Super-Klasse. Der super(); Befehl initialisiert die Variablen der Super-Klasse.
    class Hirsch extend Tier {constructor(){super(„typ3“}}

Module managen - Import + Export von Namespaces

  • Namespace: Ein Namespace ist eine in sich geschlossen Datei, die einen eigenen Benennungs-Raum hat. TypeScript möchte vermeiden, dass gleich benannte Variablen sich gegenseitig stören. Ein Namespace kann Klassen, Interfaces und Variablen beinhalten.
    namespace PersonalModul{// neuer Namensraum ohne Überschneidung nach außen}
  • Module: Interne Module sind Namespaces und externe Module sind normale Module. Bevor Du ein Modul importierst, muss Du einen Export bei der Quelle deklarieren.
  • Export: Das Statement macht die Klasse, Interface oder Variable nach außen sichtbar / verwendbar.
    class Person{}
    export { Person };
  • Import: Am Anfang einer Datei kann der Entwickler mit dem import-Befehl Module von außerhalb einbinden.
    import { Person } from "./Person";
  • Interfaces: ... sind Zusammenstellungen von Variablen, die in einem Zusammenhang immer vorkommen sollen.

4. Kapitel

Coden: Ab in die Praxis

Coding

Jetzt wird's ernst.

Wir erstellen mit diesen Schritten Deinen ersten TypeScript.

Solltest Du stecken bleiben – dann schreibe einen Kommentar mit Deiner Fehlermeldungen unten in das Kommentar-Feld.

Etwas Praxis hilft beim Verständnis:

Eine der beliebtesten Programmiersprachen ist JavaScript in 2020. JavaScript kann jeder leicht erlernen und ist sehr „freundlich“ zu dem Programmierer, weil diese Fehler „vergibt“. Hier eine Liste an OPTIONALEN Änderungen von TypeScript.

Denke daran, dass JavaScript in purer Form gültiger TypeScript-Code ist!

Variablen-Typen

  • let -Variablen sind nur innerhalb der geschweiften Klammern erreibhar. Ein Aufruf von außen geht ins Leere (undefinded).
    let text:string = „“;
  • const-Variablen deklariert der Programmierer am Anfang einer Datei, die global in allen Funktionen als eine Konstante verwendbar ist.
    const PI:number = 3.141;
  • var kannst Du wie in JavaScript verwenden.
    var normaleVariable:number = 42;
  • Typisierung sind für Dezimal-, Binär-, Hexadezimal- und Oktal-Zahlen möglich.
    const hexa:number = 23a23ff;
    Strings...
    let text:string = „Das ist Text“;
    Array...
    let textlist:string[] = [„Alle“,“sind“, „gut“];

Iteratoren

  • for … of
    kann durch einen Array iterieren und gibt die WERTE ("Tag","Nacht","Morgen") im Array zurück.
    for(let entry of blogEntries) { console.log(entry)}
  • for … in
    kann druch einen Array iterieren und gibt die SCHLÜSSEL (0,1,2..) im Array zurück.
    for(let keys in blogEntries) { console.log(keys)}

Funktionen

... können in TypeScript typisiert sein. Die Parameter und die Rückgabewerte können im Typ festgelegt sein.

  • function addStringAndText(figure:number, text:string):string{return toString(figure) + text;}
  • Das gefühlt häufigste Buchstabenfolge, mit der Dich TypeScript beglückt, ist this. . Wenn Du ein Variable außerhalb der geschweiften Klammer ansprechen möchtest, setze ein this. vor den Variablennamen:
  • const PI:number = 3.141; function calculateCircle(r:number){return r*r*this.PI}

Um TypeScript besser zu verstehen, erkläre ich in den Schritten unten, wie Du TypeScript installierst und im Code umsetztst.

01 Projektsturktur - TypeScript Tutorial Deutsch Coding Lab
01 Projektsturktur - TypeScript Tutorial Deutsch Coding Lab

Installation von TypeScript bis Hello World

  1. Downloade Dir Node.js.
  2. Installiere Node.js mit den grafischen Installer, um NPM in der Konsole zu nutzen.
  3. Führe als Befehl in der CMD / Bash aus
    npm install -g typescript
  4. Erstelle einen Projekt-Ordner mit einer…
    • HTML-Basis-Datei index.html
    • TypeScript-Datei main.ts
    • CSS-Datei für die Stylesheets
  5. Der Befehl
    tsc *.ts --watch
    überwacht alle Änderungen in den TypeScript Dateien. Sobald eine Änderung erkannt ist, kompiliert der TypeScript Compiler die Datei in JavaScript.
  6. Füge die von dem TypeScript Compiler generierte JavaScript-Datei in HTML ein.
    <script src="main.js"></script>
  7. Schreibe in die main.ts
    alert(„HelloWorld“);
  8. Rufe die HTML-Datei in Deinem Browser auf. Du brauchst keinen XAMPP zwingend zu verwenden.

Die Konsole sollte nach dem Speichern von main.ts die Änderungen zu der JavaScript-Datei automatisch kompilieren.

00 tsc watch - Kompilierung in TypeScript - TypeScript Tutorial Deutsch Coding Lab
tsc watch - Kompilierung in TypeScript - TypeScript Tutorial Deutsch Coding Lab

Programmieren mit TypeScript einfach

  1. Lösche
    alert(„HelloWorld“);
    damit wir eine etwas umfangreicheres Projekt starten können.
  2. Erstelle die Dateien Author.ts und BlogEntry.ts , um die Klassen voneinander zu trennen

  3. Speichere dei Dateien.
  4. Lade den Browser neu
  5. Gebe in die Konsole
    npm install date-fns
    ein, um ein Datumsformat-Paket zu installieren
  6. Gebe in die Konsole
    npm install --save typescript nodemon npm-run-all rimraf
    ein, um ein Säuberungs-Tool für die Build-Vorgänge zu installieren.
  7. Gebe in die Konsole
    npm i nodemon
    um die Änderungen in Echtzeit innerhalb der Konsole zu betrachten
  8. Erstelle ein tsconfig.json, wo Du alle Compiler Einstellungen für den Build
  9. Start mit
    tsc –watch
    die automatische Kompilierung der TypeScript Dateien zu JavaScript
  10. Starte die Echtzeit-Ausgabe von Nodemon mit dem Wort
    nodemon
    INNERHALB eines anderen Terminals, sodass das der TypeScript Compiler ungestört weiterarbeiten kann. In dem Terminal-Fenster, wo Du Nodemon gestartet hast, sollten alle Konsolen-Ausgaben zu sehen sein. Dort kannst Du Deine Ergebnisse überprüfen.
02 Ideale Ausgabe mit Nodemon - TypeScript Tutorial Deutsch Coding Lab
02 Ideale Ausgabe mit Nodemon - TypeScript Tutorial Deutsch Coding Lab
03 Automatisch erstellen sich JavaScript Dateien - TypeScript Tutorial Deutsch Coding Lab
03 Automatisch erstellen sich JavaScript Dateien - TypeScript Tutorial Deutsch Coding Lab

Erklärungen zum Code

Das import { X } from ‚X‘; fügt den Code über eine Codeinjektion in das main.ts-Script ein. Eine Klasse besteht aus den Attributen mit den Typen (optional), dann folgt der Konstruktor zur Initialisierung der Klasse.

5. Kapitel

Erweiterungen: Wie kann ich TypeScript erweitern?

Erweiterung
Erweiterungen

Hast Du noch nicht genug von dem TypeScript Tutorial?

Dann füge mehrere Node Module hinzu.

Wichtigste NPM Befehle

Um mit TypeScript richtig durchzustarten, solltest Du die wichtigsten NPM-Befehle und Tricks kennen, um externe Module zu nutzen.

Andere JavaScript / TypeScript Entwickler haben in den letzten Jahren Module zu Zeit-Formatierung, UI-Elemente, Algorithmen... usw entwicklet.

NPM für mehr Möglichkeiten - TypeScript Tutorial Deutsch Coding Lab
NPM für mehr Möglichkeiten - TypeScript Tutorial Deutsch Coding Lab
  • Nach dem Auschecken aus dem Repo, kannst Du die Node.js Module nachinstallieren, weil diese aufgrund von Speicherplatz nicht in dem Repo abgelegt sind:
    npm i
  • Wenn Du ein neues Modul benötigst, installiert der Befehl
    npm i modulName
    das Modul. Über ein import Statement
    import {modulName} from 'modulname';
    kann die TypeScript Datei das Modul erreichen

Super-Geheime NPM-Tricks für TypeScript. [Teilen verboten]

  • Falls Du den node_modules Ordner aus irgendein Grund löschen willst verwende Rimraf
    npm install rimraf -g
    Je nach Größe des Projekts kann eine Löschung länger dauern, weil Node.js eine sehr verschachtelte Struktur verwendet. Lösche mit
    rimraf node_modules
  • Meiner Erfahrung nach „spinnt“ Node.js alle 3-4 Tage. Lösche einfach den Cache
    npm cache clean –force
  • Einzelne Module kannst Du mit
    npm uninstall modulName
  • Die Node.js Entwickler updaten Ihre Module regelmäßig. Wegen neuen Versionen musst Du eventuell Deinen Code anpassen. Update die Module mit
    npm update
    um kritische Fehler / Bugs / Vulnerabilitäten zu eliminieren.
  • Du kannst mit Node.js Module global oder lokal installieren. Module wie Ionic, Angular oder Rimraf installieren andere Module und erstellen eigen Projekte. Das -g am Ende des Installationsbefehls bewirkt die Installation innerhalb des Benutzerordners / AppData stattfindet.
    npm i ionic -g

6. Kapitel

Fazit: Gratulation zu Dein erstes TypeScript-Script

Fazit

TypeScript ist sehr vielseitig einsetzbar-

Probiere Dich aus.

  • Schreibt von Fehlermeldungen, die auftreten ...
  • Kritik mit Verbesserungsvorschlägen für das Tutorial
  • Installationsprobleme von TypeScript ...

Danke. Ich freue mich auf Euer Feedback

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.