TypeScript ist eine stark typisierte Obermenge von das kompiliert zu einfachem JavaScript. Sie können diese Sprache für die JavaScript-Entwicklung im Anwendungsmaßstab verwenden. Es kann auch auf jedem Browser, jedem Host und jedem Betriebssystem ausgeführt werden. In diesem TypeScript-Tutorial werden wir uns mit der Tiefe von TypeScript befassen und die Grundlagen in der folgenden Reihenfolge verstehen:
- Einführung in TypeScript
- TypeScript-Typen
- Variablen
- Betreiber
- Schleifen
- Funktionen
- Saiten
- Arrays
- Schnittstellen
- Klassen
- Objekte
- TypeScript-Anwendungsfall
Einführung in TypeScript
TypeScript ist eine typisierte Obermenge von JavaScript, die zu einfachem JavaScript kompiliert wird. TypeScript ist rein objektorientiert mit Klassen, Schnittstellen und statisch typisierten Programmiersprachen wie C # oder . Zum Kompilieren und Generieren in einer JavaScript-Datei ist ein Compiler erforderlich. Grundsätzlich ist TypeScript die ES6-Version von JavaScript mit einigen zusätzlichen Funktionen.
Ein TypeScript-Code wird in eine Datei mit geschrieben .ts Erweiterung und dann mit dem Compiler in JavaScript kompiliert. Sie können die Datei in einem beliebigen Code-Editor schreiben und der Compiler muss auf Ihrer Plattform installiert sein. Nach der Installation den Befehl tsc .ts Kompiliert den TypeScript-Code in eine einfache JavaScript-Datei.
Syntax:
var message: string = 'Willkommen bei Edureka!' console.log (Nachricht)
Beim Kompilieren wird der folgende JavaScript-Code generiert:
// Erstellt von Typoskript 1.8.10 var message = 'Willkommen bei Edureka!' console.log (Nachricht)
Funktionen von TypeScript
Plattformübergreifend: Der TypeScript-Compiler kann auf jedem Betriebssystem wie Windows, MacOS und Linux installiert werden.
Objektorientierte Sprache : TypeScript bietet Funktionen wie Klassen , Schnittstellen und Module. Somit kann objektorientierter Code sowohl für die clientseitige als auch für die serverseitige Entwicklung geschrieben werden.
Statische Typprüfung : TypeScript verwendet statische Typisierung und hilft bei der Typprüfung beim Kompilieren. So können Sie beim Schreiben des Codes Fehler finden, ohne das Skript auszuführen.
Optionale statische Typisierung : TypeScript ermöglicht auch die optionale statische Eingabe, falls Sie die dynamische Eingabe von JavaScript verwenden.
DOM-Manipulation : Mit TypeScript können Sie das DOM zum Hinzufügen oder Entfernen von Elementen bearbeiten.
ES 6 Funktionen : TypeScript enthält die meisten Funktionen des geplanten ECMAScript 2015 (ES 6, 7) wie Klasse, Schnittstelle, Pfeilfunktionen usw.
Vorteile der Verwendung von TypeScript
TypeScript ist schnell, einfach, leicht zu lernen und läuft auf jedem Browser oder jeder JavaScript-Engine.
Es ist ähnlich zu JavaScript und verwendet die gleiche Syntax und Semantik.
Dies hilft Backend-Entwicklern beim Schreiben des Frontends Code schneller .
TypeScript-Code kann von einem aufgerufen werden vorhandener JavaScript-Code . Außerdem funktioniert es problemlos mit vorhandenen JavaScript-Frameworks und -Bibliotheken.
Die Definitionsdatei mit der Erweiterung .d.ts bietet Unterstützung für vorhandene JavaScript-Bibliotheken wie Jquery, D3.js. usw. TypeScript-Code kann also hinzugefügt werden JavaScript-Bibliotheken Verwenden von Typdefinitionen, um die Vorteile der Typprüfung, der automatischen Vervollständigung von Code und der Dokumentation in vorhandenen dynamisch typisierten JavaScript-Bibliotheken zu nutzen.
Es enthält Funktionen von ES6 und ES7 das kann in ES5-Level-JavaScript-Engines wie laufen Node.js .
Nachdem Sie verstanden haben, was TypeScript ist, fahren wir mit diesem TypeScript-Lernprogramm fort und sehen uns die verschiedenen Typen an.
TypeScript-Typen
Das Typsystem repräsentiert die verschiedenen Arten von Werten, die von der Sprache unterstützt werden. Es prüft die Gültigkeit der gelieferten Werte bevor sie vom Programm gespeichert oder bearbeitet werden.
Es kann in zwei Typen eingeteilt werden, wie zum Beispiel:
- Eingebaut : Dies beinhaltet number, string, boolean, void, null und undefined.
- Benutzerdefinierte : Es enthält Aufzählungen, Klassen, Schnittstellen, Arrays und Tupel.
Fahren wir nun mit diesem TypeScript-Lernprogramm fort und erfahren mehr über Variablen.
TypeScript Tutorial: Variablen
Eine Variable ist ein benannter Bereich im Speicher, in dem Werte gespeichert werden.
Die Typensyntax zum Deklarieren einer Variablen in TypeScript enthält einen Doppelpunkt (:) nach dem Variablennamen, gefolgt von ihrem Typ. Ähnlich wie bei JavaScript verwenden wir die var Schlüsselwort eine Variable deklarieren.
Es gibt vier Optionen, wenn wir eine Variable deklarieren:
var [Bezeichner]: [Typanmerkung] = Wert
var [Bezeichner]: [Typanmerkung]
var [Bezeichner] = Wert
var [identifizieren]
Beispiel:
var name: string = 'Daisy' var empid: number = 1001 console.log ('name' + name) console.log ('employee id' + empid)
Beim Kompilieren wird folgender JavaScript-Code generiert:
// Erstellt durch Typoskript 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('name' + name) console.log ('employee id:' + empid)
Ausgabe:
Name: Daisy
Mitarbeiter-ID: 1001
Fahren wir nun mit dem nächsten Thema unseres TypeScript-Tutorials fort.
Betreiber
Ein Operator wird verwendet, um Funktionen zu definieren, die für die Daten ausgeführt werden. Die Daten, mit denen Operatoren arbeiten, werden als Operanden bezeichnet. Es gibt verschiedene Arten von Betreiber in TypeScript wie:
- Rechenzeichen
- Logische Operatoren
- Vergleichsoperatoren
- Bitweise Operatoren
- Zuweisungsoperatoren
Rechenzeichen
Betreiber | Beschreibung |
Zugabe (+) | Gibt die Summe der Operanden zurück |
Subtraktion (-) | Gibt die Differenz der Werte zurück |
Multiplikation (*) wie man Wert in Java übergibt | gibt das Produkt der Werte zurück |
Teilung (/) | führt eine Divisionsoperation durch und gibt den Quotienten zurück |
Modul (%) | führt eine Divisionsoperation durch und gibt den Rest zurück |
Inkrement (++) | Erhöht den Wert der Variablen um eins |
Dekrement (-) | Verringert den Wert der Variablen um eins |
Beispiel:
var num1: number = 10 var num2: number = 2 var res: number = 0 res = num1 + num2 console.log ('Summe:' + res) res = num1 - num2 console.log ('Unterschied:' + res) res = num1 * num2 console.log ('Produkt:' + res)
Ausgabe:
Summe: 12
Unterschied: 8
Produkt: 20
Logische Operatoren
Betreiber | Beschreibung |
UND (&&) | Es wird nur true zurückgegeben, wenn alle angegebenen Ausdrücke true zurückgeben |
ODER (||) | Dies gibt true zurück, wenn mindestens einer der angegebenen Ausdrücke true zurückgibt |
NICHT (!) | Es gibt die Umkehrung des Ausdrucksergebnisses zurück. |
Beispiel:
var avg: number = 20 var Prozent: number = 90 console.log ('Wert von avg:' + avg + ', Wert von Prozent:' + Prozentsatz) var res: boolean = ((avg> 50) && (Prozentsatz> 80) )) console.log ('(Durchschnitt> 50) && (Prozentsatz> 80):', res)
Ausgabe:
Wert des Durchschnitts: 20, Wert des Prozentsatzes: 90
(Durchschnitt> 50) && (Prozentsatz> 80): falsch
Vergleichsoperatoren
Betreiber | Beschreibung |
> | Größer als |
< | Weniger als |
> = | Größer als oder gleich wie |
<= | Kleiner als oder gleich |
== | Gleichberechtigung |
! = | Nicht gleich |
Beispiel:
var num1: number = 10 var num2: number = 7 console.log ('Wert von num1:' + num1) console.log ('Wert von num2:' + num2) var res = num1> num2 console.log ('num1 größer als num2: '+ res) res = num1Ausgabe:
Wert von num1: 10
Wert von num2: 7
num1 größer als num2: true
num1 kleiner als num2: falsch
Bitweise Operatoren
Betreiber Beschreibung Bitweises UND (&)
führt eine boolesche UND-Operation für jedes Bit seiner ganzzahligen Argumente aus.
Bitweises ODER (|)
Es führt eine boolesche ODER-Operation für jedes Bit seiner ganzzahligen Argumente aus.
Bitweises XOR (^)
Es führt eine boolesche exklusive ODER-Operation für jedes Bit seiner ganzzahligen Argumente aus.
Bitweise NICHT (~)
Dies ist ein unärer Operator, bei dem alle Bits im Operanden umgekehrt werden.
Linksverschiebung (<<)
Es verschiebt alle Bits in seinem ersten Operanden um die im zweiten Operanden angegebene Anzahl von Stellen nach links.
Rechtsverschiebung (>>)
Der Wert des linken Operanden wird um die vom rechten Operanden angegebene Anzahl von Bits nach rechts verschoben.
Rechtsverschiebung mit Null (>>>)
Es ähnelt dem Operator >>, außer dass die links verschobenen Bits immer Null sind.
Beispiel:
var a: number = 2 // Bitpräsentation 10 var b: number = 3 // Bitpräsentation 11 var result result = (a & b) console.log ('(a & b) =>', result) result = ( a | b) console.log ('(a | b) =>', Ergebnis)Ausgabe:
(a & b) => 2
(a | b) => 3
Zuweisungsoperatoren
Betreiber Beschreibung Einfache Zuordnung (=)
Weist dem linken Operanden Werte vom rechten Operanden zu
Hinzufügen und Zuweisen (+ =)
Es fügt dem linken Operanden den rechten Operanden hinzu und weist das Ergebnis dem linken Operanden zu.
Subtrahieren und zuordnen (- =)
Es subtrahiert den rechten Operanden vom linken Operanden und weist das Ergebnis dem linken Operanden zu.
Multiplizieren und zuordnen (* =)
Es multipliziert den rechten Operanden mit dem linken Operanden und weist das Ergebnis dem linken Operanden zu.
Teilen und Zuweisen (/ =)
Es teilt den linken Operanden mit dem rechten Operanden und weist das Ergebnis dem linken Operanden zu.
Beispiel:
var a: number = 12 var b: number = 10 a = b console.log ('a = b:' + a) a + = b console.log ('a + = b:' + a) a - = b console .log ('a- = b:' + a)Ausgabe:
a = b: 10
a + = b: 20
a - = b: 10
Dies waren die verschiedenen Betreiber. Fahren wir nun mit unserem TypeScript-Lernprogramm fort und lernen Sie Schleifen kennen.
Schleifen
Es kann Situationen geben, in denen ein Codeblock mehrmals ausgeführt werden muss. EIN Schleife Mit der Anweisung können wir eine Anweisung oder eine Gruppe von Anweisungen mehrmals ausführen.
Die TypeScript-Schleifen können wie folgt klassifiziert werden:
Für Schleife
Das für Schleife ist eine Implementierung einer bestimmten Schleife.
Syntax:
für (erster Ausdruck zweiter Ausdruck dritter Ausdruck) {// Anweisungen, die wiederholt ausgeführt werden sollen}Hier wird der erste Ausdruck ausgeführt, bevor die Schleife beginnt. Der zweite Ausdruck ist die Bedingung für die Ausführung der Schleife. Und der dritte Ausdruck wird nach der Ausführung jedes Codeblocks ausgeführt.
Beispiel:
für (sei i = 0 i<2 i++) { console.log ('Execute block statement' + i) }Ausgabe:
Blockanweisung 0 ausführen
Blockanweisung 1 ausführenWhile-Schleife
Die while-Schleife führt die Anweisungen jedes Mal aus, wenn die angegebene Bedingung als wahr ausgewertet wird.
Syntax:
while (Bedingungsausdruck) {// auszuführender Codeblock}Beispiel:
sei i: number = 1 while (i<3) { console.log( 'Block statement execution no.' + i ) i++ }Ausgabe:
Blockanweisungsausführung Nr.1
Blockanweisungsausführung Nr. 2Do..While Loop
Die do & hellipwhile-Schleife ähnelt der while-Schleife, außer dass sie die Bedingung nicht zum ersten Mal auswertet, wenn die Schleife ausgeführt wird.
Syntax:
do {// auszuführender Codeblock} while (Bedingungsausdruck)Beispiel:
let i: number = 1 do {console.log ('Blockanweisungsausführungsnummer' + i) i ++} while (i<3)Ausgabe:
Blockanweisungsausführung Nr.1
Blockanweisungsausführung Nr. 2Abgesehen davon gibt es in TypeScript die Anweisungen break und continue, die in einer Schleife verwendet werden.
Break Statement
Die break-Anweisung wird verwendet, um die Kontrolle über ein Konstrukt zu übernehmen. Die Verwendung der break-Anweisung in einer Schleife hilft dem Programm beim Verlassen der Schleife.
Beispiel:
var i: number = 1 while (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loopAusgabe:
Das erste Vielfache von 5 zwischen 1 und 10 ist: 5
Erklärung fortsetzen
Die continue-Anweisung überspringt die nachfolgenden Anweisungen in der aktuellen Iteration und bringt die Steuerung zurück zum Anfang der Schleife.
Beispiel:
var num: number = 0 var count: number = 0 für (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)Ausgabe:
Die Anzahl der ungeraden Werte zwischen 0 und 10 beträgt: 5
Dies waren die verschiedenen Schleifen in TypeScript. Fahren wir nun mit unserem TypeScript-Lernprogramm fort und verstehen die Funktionen.
Funktionen
In JavaScript Funktionen sind einer der wichtigsten Teile, da es sich um eine funktionale Programmiersprache handelt. Funktionen stellen sicher, dass das Programm wartbar und wiederverwendbar ist und in lesbaren Blöcken organisiert ist. Während TypeScript das Konzept von Klassen und Modulen bereitstellt, sind Funktionen immer noch ein wesentlicher Bestandteil der Sprache.
Benannte Funktionen
Eine benannte Funktion wird verwendet, um eine Funktion unter ihrem Vornamen zu deklarieren und aufzurufen.
Beispiel:
Funktionsanzeige () {console.log ('TypeScript-Funktion')} Anzeige ()Ausgabe:
TypeScript-Funktion
Anonyme Funktion
Eine anonyme Funktion ist eine Funktion, die als Ausdruck definiert ist. Dieser Ausdruck wird in einer Variablen gespeichert. Diese Funktionen werden mit dem Variablennamen aufgerufen, in dem die Funktion gespeichert ist.
Beispiel:
let greeting = function () {console.log ('TypeScript Function')} greeting ()Ausgabe:
TypeScript-Funktion
Pfeilfunktion
Fettpfeilnotationen werden für anonyme Funktionen verwendet, d. H. Für Funktionsausdrücke. Sie werden in anderen Sprachen auch als Lambda-Funktionen bezeichnet.
Syntax:
(param1, param2, ..., paramN) => AusdruckWenn Sie den fetten Pfeil (=>) verwenden, müssen Sie nicht mehr das Schlüsselwort 'function' verwenden. Parameter werden in eckigen Klammern übergeben, und der Funktionsausdruck wird in die geschweiften Klammern {} eingeschlossen.
Beispiel:
let sum = (x: number, y: number): number => {return x + y} sum (10, 30) // gibt 40 zurückFunktionsüberladung
TypeScript bietet das Konzept der Funktionsüberladung. Somit können Sie mehrere Funktionen mit demselben Namen, aber unterschiedlichen Parametertypen und Rückgabetypen haben.
Beispiel:
Funktion add (a: string, b: string): string function add (a: number, b: number): number return a + b} add ('Hallo', 'Edureka') // gibt 'Hello Edureka' zurück add ( 10, 10) // gibt 20 zurückIm obigen Beispiel haben wir dieselbe Funktion add () mit zwei Funktionsdeklarationen und einer Funktionsimplementierung. Die erste Signatur enthält zwei Parameter der Typzeichenfolge, während die zweite Signatur zwei Parameter der Typennummer enthält.
Dies sind die verschiedenen Arten von Funktionen. Fahren wir nun mit unserem TypeScript-Lernprogramm fort und verstehen die Zeichenfolgen in TypeScript.
TypeScript Tutorial: Strings
Das ist ein weiterer primitiver Datentyp, der zum Speichern von Textdaten verwendet wird. Zeichenfolgenwerte werden von einfachen oder doppelten Anführungszeichen umgeben.
wie man Power in Python machtSyntax:
var var_name = neuer String (String)Im String-Objekt stehen verschiedene Eigenschaften von Methoden zur Verfügung, z.
- Baumeister - Es wird ein Verweis auf die String-Funktion zurückgegeben, mit der das Objekt erstellt wurde
- Länge - Dies gibt die Länge der Zeichenfolge zurück
- Prototyp - Mit dieser Eigenschaft können Sie einem Objekt Eigenschaften und Methoden hinzufügen
Beispiel:
let name = new String ('Willkommen bei Edureka!') console.log ('Nachricht:' + Name) console.log ('Länge:' + Name.Länge)Ausgabe:
Nachricht: Willkommen bei Edureka!
Länge: 19
String-Methoden
Die Liste der Methoden im String-Objekt enthält:
Methode Beschreibung charAt ()
Es gibt das Zeichen am angegebenen Index zurück
charCodeAt ()
Es wird eine Zahl zurückgegeben, die den Unicode-Wert des Zeichens am angegebenen Index angibt
concat ()
Kombiniert den Text zweier Zeichenfolgen und gibt eine neue Zeichenfolge zurück
Index von()
Gibt den Index innerhalb des aufrufenden String-Objekts des ersten Auftretens des angegebenen Werts zurück
lastIndexOf ()
Es gibt den Index innerhalb des aufrufenden String-Objekts des letzten Auftretens des angegebenen Werts zurück
Spiel()
Wird verwendet, um einen regulären Ausdruck mit einer Zeichenfolge abzugleichen
localeCompare ()
Gibt eine Zahl zurück, die angibt, ob eine Referenzzeichenfolge vor oder nach der angegebenen Zeichenfolge in Sortierreihenfolge steht oder mit dieser übereinstimmt
Suche()
Dadurch wird die Suche nach einer Übereinstimmung zwischen einem regulären Ausdruck und einer angegebenen Zeichenfolge ausgeführt
ersetzen()
Wird verwendet, um eine Übereinstimmung zwischen einem regulären Ausdruck und einer Zeichenfolge zu finden und die übereinstimmende Teilzeichenfolge durch eine neue Teilzeichenfolge zu ersetzen
Scheibe()
Es extrahiert einen Abschnitt einer Zeichenfolge und gibt eine neue Zeichenfolge zurück
Teilt()
Teilt ein String-Objekt in ein Array von Strings auf, indem der String in Teilzeichenfolgen aufgeteilt wird
substr ()
Gibt die Zeichen in einer Zeichenfolge zurück, die an der angegebenen Stelle durch die angegebene Anzahl von Zeichen beginnt
Teilzeichenfolge ()
Es gibt die Zeichen in einer Zeichenfolge zwischen zwei Indizes in die Zeichenfolge zurück
toLocaleLowerCase ()
Die Zeichen in einer Zeichenfolge werden unter Berücksichtigung des aktuellen Gebietsschemas in Kleinbuchstaben konvertiert
toLocaleUpperCase ()
Die Zeichen in einer Zeichenfolge werden unter Berücksichtigung des aktuellen Gebietsschemas in Großbuchstaben konvertiert
toLowerCase ()
Es gibt den aufrufenden Zeichenfolgenwert zurück, der in Kleinbuchstaben konvertiert wurde
toUpperCase ()
Es gibt den aufrufenden Zeichenfolgenwert zurück, der in Großbuchstaben konvertiert wurde
toString ()
Gibt eine Zeichenfolge zurück, die das angegebene Objekt darstellt
Wert von()
Gibt den Grundwert des angegebenen Objekts zurück
Beispiel:
let str: string = 'Willkommen bei Edureka' str.charAt (0) // gibt 'w' zurück str.charAt (2) // gibt 'l' zurück 'Willkommen bei Edureka'.charAt (2) gibt' l 'zurück, lass str1 : string = 'welcome' let str2: string = 'Edureka' str1.concat (str2) // gibt 'welcomeEdureka' zurück str1.concat ('', str2) // gibt 'welcome Edureka' str1.concat ('' to 'zurück) ') // gibt' Willkommen bei 'zurückNachdem Sie sich mit Strings vertraut gemacht haben, fahren wir mit diesem TypeScript-Tutorial fort und verstehen Arrays.
Arrays in TypeScript
Ein Array ist ein spezieller Datentyp, der mehrere Werte verschiedener Datentypen nacheinander unter Verwendung einer speziellen Syntax speichert. Array-Elemente werden durch eine eindeutige Ganzzahl identifiziert, die als Index oder Index des Elements bezeichnet wird.
Syntax:
var array_name [: datatype] // Deklaration array_name = [val1, val2, valn ..] // InitialisierungBeispiel:
let names: Array names = ['John', 'Daisy', 'Rachel'] let ids: Array ids = [101, 700, 321]Array-Methoden
Hier ist eine Liste verschiedener Array-Methoden, die für verschiedene Zwecke verwendet werden können:
Methode Beschreibung Filter()
Erstellt ein neues Array mit allen Elementen dieses Arrays, für das die bereitgestellte Filterfunktion true zurückgibt
jeder()
Gibt true zurück, wenn jedes Element in diesem Array die bereitgestellte Testfunktion erfüllt
concat ()
Gibt ein neues Array zurück, das aus diesem Array besteht und mit anderen Arrays verbunden ist
Index von()
Gibt den ersten oder kleinsten Index eines Elements innerhalb des Arrays zurück, der dem angegebenen Wert entspricht
für jede()
Ruft eine Funktion für jedes Element im Array auf
beitreten()
Verbindet alle Elemente eines Arrays zu einer Zeichenfolge
lastIndexOf ()
Gibt den letzten oder größten Index eines Elements innerhalb des Arrays zurück, der dem angegebenen Wert entspricht
Karte()
Erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element in diesem Array
drücken()
Fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die neue Länge des Arrays zurück
pop ()
Entfernt das letzte Element aus einem Array und gibt dieses Element zurück
reduzieren()
Wenden Sie eine Funktion gleichzeitig von links nach rechts auf zwei Werte des Arrays an, um sie auf einen einzigen Wert zu reduzieren
reduRight ()
Wenden Sie eine Funktion gleichzeitig auf zwei Werte des Arrays von rechts nach links an, um sie auf einen einzelnen Wert zu reduzieren
umkehren()
Kehrt die Reihenfolge der Elemente eines Arrays um
Verschiebung()
Entfernt das erste Element aus einem Array und gibt dieses Element zurück
Scheibe()
Extrahiert einen Abschnitt eines Arrays und gibt ein neues Array zurück
etwas()
Es gibt true zurück, wenn mindestens ein Element in diesem Array die bereitgestellte Testfunktion erfüllt
Sortieren()
Es sortiert die Elemente eines Arrays
toString ()
Gibt eine Zeichenfolge zurück, die das Array und seine Elemente darstellt
spleißen()
Es fügt Elemente zu einem Array hinzu und / oder entfernt sie
nicht verschieben ()
Fügt ein oder mehrere Elemente an der Vorderseite eines Arrays hinzu und gibt die neue Länge des Arrays zurück
Beispiel:
var name: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (name) // Ausgabe: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // Ausgabe: Tara name.push ('Rachel') console.log (Name) // Ausgabe: ['John', 'Daisy', 'Rachel']Lassen Sie uns nun mit diesem TypeScript-Tutorial fortfahren und mehr über Schnittstellen erfahren.
TypeScript-Schnittstellen
Die Schnittstelle ist eine Struktur, die den Vertrag in Ihrer Anwendung definiert. Es definiert die Syntax für die folgenden Klassen. Es enthält nur die Deklaration der Mitglieder und es liegt in der Verantwortung der ableitenden Klasse, die Mitglieder zu definieren.
Beispiel:
Schnittstelle Mitarbeiter {empID: Nummer empName: Zeichenfolge getSalary: (Nummer) => Nummer // Pfeilfunktion getManagerName (Nummer): Zeichenfolge}Im obigen Beispiel ist die Mitarbeiter Schnittstelle enthält zwei Eigenschaften empID und empName . Es enthält auch eine Methodendeklaration getSalaray mit einem Pfeilfunktion Dies beinhaltet einen Zahlenparameter und einen Zahlenrückgabetyp. Das getManagerName Methode wird mit einer normalen Funktion deklariert.
Typoskript Klassen
TypeScript führte Klassen ein, damit sie die Vorteile objektorientierter Techniken wie Kapselung und Abstraktion nutzen können. Die Klasse in TypeScript wird vom TypeScript-Compiler zu einfachen JavaScript-Funktionen kompiliert, um plattform- und browserübergreifend zu arbeiten.
Eine Klasse enthält Folgendes:
- Baumeister
- Eigenschaften
- Methoden
Beispiel:
Klasse Mitarbeiter {empID: Nummer empName: Zeichenfolgenkonstruktor (ID: Nummer, Name: Zeichenfolge) {this.empName = Name this.empID = ID} getSalary (): Nummer {return 40000}}Erbe
TypeScript unterstützt Erbe da es die Fähigkeit eines Programms ist, neue Klassen aus einer vorhandenen Klasse zu erstellen. Die Klasse, die erweitert wird, um neuere Klassen zu erstellen, wird als übergeordnete Klasse oder Superklasse bezeichnet. Die neu erstellten Klassen werden als untergeordnete Klassen oder Unterklassen bezeichnet.
Eine Klasse erbt von einer anderen Klasse mit dem Schlüsselwort 'erweitert'. Untergeordnete Klassen erben alle Eigenschaften und Methoden außer privaten Mitgliedern und Konstruktoren von der übergeordneten Klasse. TypeScript unterstützt jedoch keine Mehrfachvererbung.
Syntax:
Die Klasse child_class_name erweitert parent_class_nameBeispiel:
Klasse Person {Name: Zeichenfolgenkonstruktor (Name: Zeichenfolge) {this.name = Name}} Klasse Mitarbeiter erweitert Person {empID: Zahlenkonstruktor (empID: Nummer, Name: Zeichenfolge) {super (Name) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', Mitarbeiter-ID =' + this.empID)}} let emp = neuer Mitarbeiter (701, 'Jason') emp.displayName () // Name = Jason, Mitarbeiter-ID = 701Nachdem Sie sich mit Klassen auskennen, können Sie mit diesem TypeScript-Lernprogramm fortfahren und mehr über Objekte erfahren.
Objekte in TypeScript
Ein Objekt ist eine Instanz, die einen anderen Satz von Schlüssel-Wert-Paaren enthält. Die Werte können skalare Werte oder Funktionen oder sogar ein Array anderer Objekte sein.
Syntax:
var object_name = {key1: 'value1', // skalarer Wert key2: 'value', key3: function () {// functions}, key4: ['content1', 'content2']Ein Objekt kann skalare Werte, Funktionen und Strukturen wie Arrays und Tupel enthalten.
Beispiel:
var person = {Vorname: 'Danny', Nachname: 'Grün'} // Zugriff auf die Objektwerte console.log (person.firstname) console.log (person.lastname)Beim Kompilieren wird derselbe Code in JavaScript generiert.
Ausgabe:
Danny
Grün
Dies waren die verschiedenen wichtigen Elemente von TypeScript. Fahren wir nun mit diesem TypeScript-Lernprogramm fort und sehen uns ein Beispiel an, um den Anwendungsfall zu verstehen.
TypeScript Tutorial: Anwendungsfall
Hier lernen wir, wie man ein vorhandenes konvertiert zu TypeScript.
Wenn wir eine TypeScript-Datei kompilieren, wird eine entsprechende JavaScript-Datei mit demselben Namen erstellt. Hier müssen wir sicherstellen, dass sich unsere ursprüngliche JavaScript-Datei, die als Eingabe fungiert, nicht im selben Verzeichnis befinden kann, damit TypeScript sie nicht überschreibt.
Der Prozess zur Migration von JavaScript zu TypeScript umfasst die folgenden Schritte:
1. Fügen Sie dem Projekt die Datei tsconfig.json hinzu
Sie müssen dem Projekt eine tsconfig.json-Datei hinzufügen. TypeScript verwendet eine tsconfig.json-Datei zum Verwalten der Kompilierungsoptionen des Projekts, z. B. welche Dateien Sie ein- und ausschließen möchten.
{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}2. Integrieren Sie in ein Build-Tool
Die meisten JavaScript-Projekte verfügen über ein integriertes Build-Tool wie gulp oder webpack. Sie können Projekte auf folgende Weise in das Webpack integrieren:
- Führen Sie den folgenden Befehl auf dem Terminal aus:
$ npm installiere awesome-typescript-loader Quell-Map-LoaderBei der Webpack-Integration verwenden Sie den awesome-typescript-loader in Kombination mit dem source-map-loader, um das Debuggen des Quellcodes zu vereinfachen.
- Zweitens führen Sie die Modulkonfigurationseigenschaft in unserer Datei webpack.config.js zusammen, um Loader einzuschließen.
3. Verschieben Sie alle .js-Dateien in .ts-Dateien
In diesem Schritt müssen Sie die .js-Datei in .ts-Datei umbenennen. Wenn die Datei JSX verwendet, müssen Sie sie ebenfalls in .tsx umbenennen. Wenn wir diese Datei jetzt in einem Editor öffnen, der TypeScript unterstützt, können einige der Codes Kompilierungsfehler verursachen. Durch das Konvertieren von Dateien nacheinander können Kompilierungsfehler einfacher behandelt werden. Wenn TypeScript während der Konvertierung Kompilierungsfehler feststellt, kann der Code dennoch übersetzt werden.
4. Auf Fehler prüfen
Nach dem Verschieben der js-Datei in die ts-Datei startet TypeScript sofort die Typprüfung unseres Codes. Daher können Diagnosefehler im JavaScript-Code auftreten.
5. Verwenden Sie JavaScript-Bibliotheken von Drittanbietern
JavaScript-Projekte verwenden Bibliotheken von Drittanbietern wie oder Lodash. Um Dateien kompilieren zu können, muss TypeScript die Typen aller Objekte in diesen Bibliotheken kennen. Die TypeScript-Typdefinitionsdateien für JavaScript-Bibliotheken sind bereits bei DefinitelyTyped verfügbar. Es ist also nicht erforderlich, diesen Typ extern zu installieren. Sie müssen nur die Typen installieren, die in unserem Projekt verwendet werden.
Für jQuery können Sie die Definition installieren:
$ npm install @ types / jqueryNehmen Sie danach die Änderungen am JavaScript-Projekt vor und führen Sie das Build-Tool aus. Jetzt sollten Sie das TypeScript-Projekt in einfaches JavaScript kompilieren lassen, das im Browser ausgeführt werden kann.
Damit sind wir am Ende dieses TypeScript-Tutorials angelangt. Ich hoffe, Sie haben alle wichtigen Elemente von TypeScript verstanden.
Besuche die von Edureka. Mit dem Web Development Certification Training erfahren Sie, wie Sie beeindruckende Websites mit HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- und Google-APIs erstellen und für Amazon Simple Storage Service (S3) bereitstellen.
Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich von 'TypeScript Tutorial' und wir werden uns bei Ihnen melden.