TypeScript Tutorial: Was ist eine Schnittstelle, ein Enumerationselement und ein Array mit Beispiel
Was ist TypeScript?
TypeScript ist eine Obermenge von JavaSkript. TypeScript ist eine rein objektorientierte Programmiersprache, die Klassen, Schnittstellen usw. unterstützt. Es ist eine Open-Source-Sprache, die von Microsoft das den Code statisch kompiliert zu JavaSkript. Es kann problemlos in einem Browser oder Nodejs ausgeführt werden.
Alle neuesten Features für ECMAScript werden unterstützt in TypeScript und darüber hinaus TypeScript verfügt über eigene objektorientierte Funktionen wie Schnittstellen, Umgebungsdeklaration, Klassenvererbung usw., die bei der Entwicklung einer großen Anwendung hilfreich sind, was sonst schwierig wäre JavaSkript.
Herunterladen und Installieren TypeScript
Hier ist die Schritt-für-Schritt-Anleitung zum Herunterladen und Installieren TypeScript:
Schritt 1) Laden Sie Nodejs herunter und installieren Sie es
Gehen Sie zur offiziellen Website von nodejs: https://nodejs.org/en/download/ und laden Sie nodejs entsprechend Ihrem Betriebssystem herunter und installieren Sie es. Die detaillierte Anleitung zum Herunterladen von nodejs finden Sie hier: https://www.guru99.com/download-install-node-js.html
Schritt 2) Überprüfen Sie die Nodejs- und NPM-Version
Um zu überprüfen, ob nodejs und npm installiert sind, überprüfen Sie einfach die Version in Ihrer Eingabeaufforderung.
D:\typeproject>node --version V10.15.1 D:\typeproject>npm --version 6.4.1
Sie haben also NodeJS v10 und NPM 6 installiert.
Schritt 3) TypeScript Installation
Erstellen Sie Ihr Projektverzeichnis typeproject/ und führen Sie npm init aus, wie im folgenden Befehl gezeigt:
npm init
Schritt 4) Starten Sie die Installation
Jetzt erstellen wir das Paket .json, das die Abhängigkeiten für unser Projekt speichert.
Nach Abschluss der Installation TypeScript wie folgt:
npm -g install typescript
Der obige Befehl übernimmt die Installation TypeScript. Durch Hinzufügen von „-g“ zu npm install wird installiert TypeScript global. Der Vorteil der Verwendung von -g ist, dass Sie verwenden können TypeScript tsc Befehl aus jedem Verzeichnis, da es global installiert ist. Falls Sie es nicht installieren möchten TypeScript Verwenden Sie global den folgenden Befehl:
npm --save install typescript
Erstellen Sie den Ordner src/ in Ihrem Projektverzeichnis und erstellen Sie im Ordner src/ TypeScript Datei test.ts und schreiben Sie Ihren Code.
Beispiel: test.ts
function add(x:number, y:number) { return x+y; } let sum = add(5,10); console.log(sum);
Kompilieren TypeScript Code zu Javascript
Um den obigen Code zu kompilieren, verwenden Sie den folgenden Befehl:
If TypeScript global installiert ist, verwenden Sie den folgenden Befehl:
tsc test.ts
If TypeScript lokal in Ihrem Projekt installiert ist, müssen Sie den Pfad von verwenden TypeScript von node_modules wie gezeigt:
node_modules/typescript/bin/tsc test.ts
Der obige Befehl erstellt eine test.js-Datei und kompiliert den Code in Javascript.
Beispiel: test.js
function add(x, y) { return x + y; } var sum = add(5, 10); console.log(sum);
Ausführen Javascript mit Nodejs
In diesem TypeScript Tutorial: Wir führen test.js in nodejs wie folgt aus:
D:\typeproject\src>node test.js 15
Der Wert consoled wird bei der Ausführung von test.js angezeigt
Ausführen JavaSkript im Browser
Ejemplo:
<html> <head></head> <body> <script type="text/javascript" src="test.js"></script> </body> </html>
Kompilieren TypeScript Code zu Javascript mit EcmaScript-Version
TypeScript unterstützt alle veröffentlichten Ecmascript-Funktionen und Entwickler können diese beim Codieren verwenden. Allerdings werden nicht alle neuen Funktionen von älteren Browsern unterstützt, weshalb Sie JavaScript in eine ältere Version von Ecmascript kompilieren müssen. TypeScript bietet Compileroptionen, die dies ermöglichen.
Beispiel: test.ts
var addnumbers = (a, b) => { return a+b; } addnumbers(10, 20);
Um die ES-Version Ihrer Wahl zu kompilieren, können Sie die Option „target“ oder „t“ in Ihrem Befehl wie folgt verwenden:
tsc --target ES6 test.ts OR tsc -t ES6 test.ts
Standardmäßig ist das Ziel ES3. Falls Sie es ändern möchten, können Sie den obigen Befehl verwenden.
Derzeit verwenden wir ES6 in diesem TypeScript Tutorial als Ziel:
tsc --target ES6 test.ts
test.ts zu test.js
var addnumbers = (a, b) => { return a+b; } addnumbers(10, 20);
Der Code bleibt unverändert, da die von Ihnen verwendete Pfeilfunktion eine ES6-Funktion ist und beim Kompilieren in ES6 nicht geändert wird.
Standardmäßig ist das Ziel ES3. Ohne Ziel erhalten Sie test.js als:
var addnumbers = function (a, b) { return a + b; }; addnumbers(10, 20);
Hier wird der dicke Pfeil in eine normale anonyme Funktion geändert.
Variablen in TypeScript
Variablen werden zum Speichern von Werten verwendet und der Wert kann eine Zeichenfolge, eine Zahl, ein Boolean-Wert oder ein Ausdruck sein. Wenn es um Variablen in TypeScript, sie ähneln JavaSkript. Lernen wir also, Variablen zu deklarieren und ihnen Werte zuzuweisen in TypeScript.
Variablen können nicht ohne Definition im Code verwendet werden. Um eine Variable zu deklarieren, können Sie verwenden
jung Stichwort,
lassen Stichwort
const Stichwort
Arbeiten mit Variablen in TypeScript ist ähnlich wie Javascript und wird von Javascript-Kennern sehr einfach gefunden. Nur Variablen wie lassen und const werden im Vergleich zu nicht oft verwendet jung.
Variablen mit var deklarieren
Syntax:
var firstname = "Roy";
Werfen wir einen Blick auf einige TypeScript Beispiele zum Verständnis der Funktionsweise des Schlüsselworts var und des Umfangs von Variablen, die mit deklariert werden jung Stichwort.
Beispiel 1:
var k = 1; // variable k will have a global scope function test() { var c = 1; // variable c is local variable and will be accessible inside function test, it will not be available outside the function. return k++; } test(); // output as 1 test(); // output as 2 alert(c); // will throw error , Uncaught ReferenceError: c is not defined
Beispiel 2:
var t = 0; // variable t is declared in global scope. function test() { var t = 10; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function. return t; } test(); // will return 10. console.log(t); // will console 0.
Beispiel 3:
var i = 0; function test() { if (i>0) { var t = 1; } return t; } test(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function. i++; // here value of i is incremented. test(); // since i >0 the if block is executed and value returned is 1.
Variablen mit let deklarieren
Die TypeScript Die Syntax für let ist wie folgt:
Syntax:
let name="Roy";
Die Arbeit von lassen Variable ist fast identisch mit jung, aber mit einem kleinen Unterschied und wird das gleiche verstehen mit einem TypeScript Beispiel.
Ejemplo:
let i = 1; function test() { if (i>0) { let t = 1; } return t; } test(); // throws an error : Uncaught ReferenceError: t is not defined.
Oben TypeScript Beispiel wirft einen Fehler, aber das gleiche hätte gut funktioniert, wenn es mit dem jung Stichwort. Variablen verwenden lassen sind innerhalb des deklarierten Blockbereichs verfügbar, beispielsweise ist die Variable t nur innerhalb des if-Blocks und nicht für die gesamte Funktion verfügbar.
Auch wenn Sie eine Variable innerhalb einer Funktion oder einer For-Schleife, While-Schleife deklarieren, TypeScript switch-Block, steht Ihnen nur innerhalb dieses Blocks zur Verfügung und es gibt keinen Verweis darauf außerhalb des Blocks und es wird ein Fehler ausgegeben, wenn die Variable außerhalb des Blocks verwendet wird. Dies ist der Hauptunterschied zwischen mit var- und let-Schlüsselwörtern deklarierten Variablen.
Variablen mit const deklarieren
Const bedeutet konstante Variablen. Sie ähneln Let-Variablen, mit dem einzigen Unterschied, dass ein einmal zugewiesener Wert nicht mehr geändert werden kann.
Syntax:
const name;
Ejemplo:
const age = "25"; age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.
Daher können Benutzer const-Variablen nur dann verwenden, wenn sie wissen, dass sie die ihr zugewiesenen Werte nicht ändern müssen.
Typen in TypeScript
TypeScript ist eine stark typisierte Sprache, JavaScript hingegen nicht. Eine Variable, deren Wert als Zeichenfolge definiert ist, kann problemlos in eine Zahl geändert werden in JavascriptDasselbe wird nicht toleriert in TypeScript. in TypeScript, der Typ einer Variablen wird nur zu Beginn definiert und muss während der gesamten Ausführung derselbe Typ bleiben. Jede Änderung daran führt zu einem Kompilierfehler während der Kompilierung in JavaScript.
Folgende Typen sind möglich:
- Nummer
- Schnur
- Boolean
- Jedes
- Leere
Nummer
Akzeptiert nur Ganzzahlen, Gleitkommazahlen, Brüche usw.
Syntax:
let a :number = 10; let marks :number = 150; let price :number = 10.2;
Hier sind einige wichtige Methoden, die für Zahlentypen verwendet werden können:
toFixed() – Es wandelt die Zahl in eine Zeichenfolge um und behält die der Methode zugewiesenen Dezimalstellen bei.
toString () – Diese Methode wandelt eine Zahl in eine Zeichenfolge um.
Wert von() – Diese Methode gibt den Grundwert der Zahl zurück.
toPrecision() – Diese Methode formatiert die Zahl auf eine angegebene Länge.
Beispiel: mit allen String-Methoden
let _num :number = 10.345; _num.toFixed(2); // "10.35" _num.valueOf(); // 10.345 _num.toString(); // "10.345" _num.toPrecision(2); //"10"
Schnur
String: nur Stringwerte
Syntax:
let str :string = "hello world";
Hier sind einige wichtige Methoden, die für String-Typen verwendet werden können:
- gespalten() – diese Methode teilt die Zeichenfolge in ein Array auf.
- charat() – Diese Methode gibt das erste Zeichen für den angegebenen Index zurück.
- Index von() – Diese Methode gibt die Position des ersten Vorkommens für den ihr zugewiesenen Wert an.
- Ersetzen () – Diese Methode benötigt zwei Zeichenfolgen, zunächst den Wert, der in der Zeichenfolge gesucht werden soll, und falls vorhanden, wird dieser durch die zweite ersetzt und eine neue Zeichenfolge zurückgegeben.
- Trim () – Diese Methode entfernt Leerzeichen von beiden Seiten der Zeichenfolge.
- substr() – Diese Methode gibt einen Teil der Zeichenfolge zurück, der von der als Start und Ende angegebenen Position abhängt.
- Teilzeichenfolge() – Diese Methode gibt einen Teil der Zeichenfolge zurück, der von der als Start und Ende angegebenen Position abhängt. Das Zeichen an der Endposition wird ausgeschlossen.
- zuGroßbuchstaben() – konvertiert die Zeichenfolge in Großbuchstaben
- toLowerCase() – wandelt die Zeichenfolge in Kleinbuchstaben um.
Ejemplo:
let _str:string = "Typescript"; _str.charAt(1); // y _str.split(""); //["T", "y", "p", "e", "s", "c", "r", "i", "p", "t"] _str.indexOf("s"); //4 , gives -1 is the value does not exist in the string. _str.replace("Type", "Coffee"); //"Coffeescript" _str.trim(); //"Typescript" _str.substr(4, _str.length); //"script" _str.substring(4, 10); //"script" _str.toUpperCase();//"TYPESCRIPT" _str.toLowerCase();//"typescript"
Boolean
Akzeptiert logische Werte wie wahr, falsch, 0 und 1.
Syntax:
let bflag :boolean = 1; let status :boolean = true;
Jedes
Syntax:
let a :any = 123 a = "hello world"; // changing type will not give any error.
Mit deklarierte Variablen jedem Der Typ kann die Variable als Zeichenfolge, Zahl, Array, Boolescher Wert oder ungültig annehmen. TypeScript wird keinen Kompilierfehler werfen; dies ist ähnlich wie bei den in JavaSkript. Verwenden Sie Variablen eines beliebigen Typs nur, wenn Sie sich über den Werttyp, der dieser Variablen zugeordnet wird, nicht sicher sind.
Leere
Der Void-Typ wird meist als Rückgabetyp für eine Funktion verwendet, die nichts zurückzugeben hat.
Syntax:
function testfunc():void{ //code here }
TypeScript Feld
An Feld in TypeScript ist ein Datentyp, in dem Sie mehrere Werte speichern können. Lernen Sie, wie Sie Werte für Array-Operationen deklarieren und zuweisen in TypeScript.
Da TypeScript ist eine stark typisierte Sprache. Sie müssen angeben, was der Datentyp der Werte in einem Array sein soll. Andernfalls wird es als vom Typ „any“ betrachtet.
Deklarieren und initialisieren Sie ein Array
Syntax:
let nameofthearray : Array<typehere>
Beispiel
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; //array with string and numbers mixed. let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.
Verschiedene Möglichkeiten, auf Elemente aus einem Array zuzugreifen
Um die Elemente aus einem Array abzurufen, beginnen die Werte vom Index 0 bis zur Länge des Arrays.
Ejemplo:
let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers years[0]; // output will be 2016 years[1]; // output will be 2017 years[2]; // output will be 2018 years[3]; // output will be 2019
Sie können die Elemente aus einem Array auch abrufen mit TypeScript für den Schleife wie unten dargestellt:
Die richtigen TypeScript for-Schleife
let years: Array<number> = [ 2016, 2017, 2018, 2019]; for (let i=0;i<=years.length; i++) { console.log(years[i]); } Output: 2016 2017 2018 2019
For-In-Schleife verwenden
let years: Array<number> = [ 2016, 2017, 2018, 2019]; for (let i in years) { console.log(years[i]) } Output: 2016 2017 2018 2019
Verwendung einer for-of-Schleife
let years: Array<number> = [ 2016, 2017, 2018, 2019]; for (let i of years) { console.log(i) } Output: 2016 2017 2018 2019
Verwendung der foreach-Schleife
let years: Array<number> = [ 2016, 2017, 2018, 2019]; years.forEach(function(yrs, i) { console.log(yrs); }); Output: 2016 2017 2018 2019
TypeScript Array-Methoden
TypeScript Array-Objekte haben viele Eigenschaften und Methoden, die Entwicklern helfen, Arrays einfach und effizient zu handhaben. Sie können den Wert einer Eigenschaft abrufen, indem Sie arrayname.property angeben, und die Ausgabe einer Methode, indem Sie arrayname.method() angeben.
Längeneigenschaft
=> Wenn Sie die Anzahl der Elemente in einem Array wissen möchten, können Sie die Längeneigenschaft verwenden.
Reverse-Methode
=> Sie können die Reihenfolge der Elemente in einem Array mithilfe einer Umkehrmethode umkehren.
Sortiermethode
=> Sie können die Elemente in einem Array mithilfe der Sortiermethode sortieren.
Pop-Methode
=> Sie können das letzte Element eines Arrays mithilfe einer Pop-Methode entfernen.
Shift Methode
=> Sie können das erste Element eines Arrays mit der Shift-Methode entfernen.
Push-Methode
=> Sie können einen Wert als letztes Element des Arrays hinzufügen.
Concat-Methode
=> Sie können zwei Arrays zu einem Array-Element zusammenfügen.
Beispiel für die Längeneigenschaft
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.length); // 12
Beispiel für die umgekehrte Methode
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.reverse()); // ["Dec", "Nov", "Oct", "Sept", "Aug", "July", "June", "May", "April", "March", "Feb", "Jan"]
Beispiel für Sortiermethode
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.sort()); // ["April", "Aug", "Dec", "Feb", "Jan", "July", "June", "March", "May", "Nov", "Oct", "Sept"]
Beispiel für die Pop-Methode
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.pop()); //Dec
Beispiel für die Shift-Methode
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.shift()); // Jan
Beispiel für Push-Methode
let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers console.log(years.push(2020)); years.forEach(function(yrs, i) { console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020 });
Beispiel für die Concat-Methode
let array1: Array<number> = [10, 20, 30]; let array2: Array<number> = [100, 200, 300]; console.log(array1.concat(array2)); //[10, 20, 30, 100, 200, 300]
Klasse in TypeScript
TypeScript ist eine Obermenge von JavaScript, also alles was möglich ist in JavaScript ist auch möglich in TypeScript. Klasse ist ein neues Feature, das ab ES6 hinzugefügt wurde, also früher in JavaSkript Die Klassentypfunktionalität wurde mithilfe einer Funktion mit Prototypfunktionalität ausprobiert, um Code wiederzuverwenden. Mit Klassen können Sie unseren Code fast so gestalten, wie er in Sprachen wie Java, C#, Python usw. verwendet werden kann, wo der Code wiederverwendet werden kann. Mit der Funktion der Klasse in TypeScript/JavaSkript, es macht die Sprache sehr leistungsfähig.
Definieren einer Klasse in TypeScript
Hier ist eine grundlegende Klassensyntax in TypeScript:
class nameofclass { //define your properties here constructor() { // initialize your properties here } //define methods for class }
Beispiel: Ein funktionierendes Beispiel für Class
class Students { age : number; name : string; roll_no : number; constructor(age: number, name:string, roll_no: number) { this.age = age; this.name = name; this.roll_no = roll_no; } getRollNo(): number { return this.roll_no; } getName() : string { return this.name; } getAge() : number { return this.age; } }
Im obigen Beispiel haben Sie eine Klasse namens Students. Es verfügt über die Eigenschaften „Alter“, „Name“ und „Rollennummer“.
Konstrukteur in einem TypeScript Klasse
Das Beispiel der Klasse Students, das wir oben definiert haben, hat einen Konstruktor wie unten gezeigt:
constructor(age: number, name:string, roll_no: number) { this.age = age; this.name = name; this.roll_no = roll_no; }
Die Konstruktormethode verfügt über die Parameter „Alter“, „Name“ und „Rollennummer“. Der Konstruktor kümmert sich beim Aufruf der Klasse um die Initialisierung der Eigenschaften. Der Zugriff auf die Eigenschaften erfolgt über fehlen uns die Worte. Stichwort. Beispiel: this.age für den Zugriff auf die Alterseigenschaft, this.roll_no für den Zugriff auf roll_no usw. Sie können auch einen Standardkonstruktor verwenden, wie unten gezeigt:
constructor () {}
Methoden innerhalb eines TypeScript Klasse
Im Beispiel der Klasse „Students“ sind Methoden wie beispielsweise getRollNo(), getName(), getAge() definiert, die verwendet werden, um Details zu den Eigenschaften roll_no, Name und Alter anzugeben.
getRollNo(): number { return this.roll_no; } getName() : string { return this.name; } getAge() : number { return this.age; }
Erstellen einer Instanz der Klasse in TypeScript
Ejemplo:
In TypeScript Um eine Instanz einer Klasse zu erstellen, müssen Sie den Operator new verwenden. Wenn wir eine Instanz einer Klasse mit dem Operator new erstellen, erhalten wir das Objekt, das auf die Eigenschaften und Methoden der Klasse zugreifen kann, wie unten gezeigt:
let student_details = new Students(15, "Harry John", 33); student_details.getAge(); // 15 student_details.getName(); // Harry John
Kompilieren TypeScript Klasse bis JavaSkript
Sie können den Befehl tsc wie unten gezeigt verwenden, um zu kompilieren Javascript.
Command: tsc Students.ts
Die Ausgabe von Javascript Der Code bei der Kompilierung sieht wie folgt aus:
var Students = /** @class */ (function () { function Students(age, name, roll_no) { this.age = age; this.name = name; this.roll_no = roll_no; } Students.prototype.getRollNo = function () { return this.roll_no; }; Students.prototype.getName = function () { return this.name; }; Students.prototype.getAge = function () { return this.age; }; return Students; }());
In Javascript, die Klasse wird in eine selbstaufgerufene Funktion umgewandelt.
Klassenvererbung
Klassen können mit vererbt werden erweitern Schlüsselwort in TypeScript.
Syntax der Klassenvererbung:
class A { //define your properties here constructor() { // initialize your properties here } //define methods for class } class B extends A { //define your properties here constructor() { // initialize your properties here } //define methods for class }
Klasse B wird teilen können Klasse A Methoden und Eigenschaften.
Hier ist ein funktionierendes Beispiel einer Klasse, die Vererbung verwendet
class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } getName(): string { return this.name; } getAge(): number { return this.age; } } class Student extends Person { tmarks: number; getMarks(): number { return this.tmarks; } setMarks(tmarks) { this.tmarks = tmarks; } } let _std1 = new Student('Sheena', 24); _std1.getAge(); // output is 24 _std1.setMarks(500); _std1.getMarks(); // output is 500
Sie haben zwei Klassen: Person und Student. Die Student-Klasse erweitert Person, und das auf Student erstellte Objekt kann auf seine eigenen Methoden und Eigenschaften sowie auf die von ihm erweiterte Klasse zugreifen.
Lassen Sie uns nun einige weitere Änderungen an der obigen Klasse hinzufügen.
Ejemplo:
class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } getName(): string { return this.name; } getAge(): number { return this.age; } } class Student extends Person { tmarks: number; constructor(name: string, age: number, tmarks: number) { super(name, age); } getMarks(): number { return this.tmarks; } setMarks(tmarks) { this.tmarks = tmarks; } } let _std1 = new Student('Sheena', 24, 500); _std1.getAge(); // output is 24 _std1.getMarks(); // output is 500
Die Änderungen, die Sie im Vergleich zum vorherigen Beispiel hinzugefügt haben, bestehen darin, dass in der Klasse Student ein Konstruktor definiert ist. Der Konstruktor muss dieselben Parameter wie die Basisklasse verwenden und ggf. zusätzliche eigene Parameter hinzufügen.
In TypeScript Sie müssen super aufrufen, wobei alle Parameter als Basisparameter darin enthalten sind. Dies muss als Erstes im Konstruktor erfolgen. super führt den Konstruktor der erweiterten Klasse aus.
Zugriffsmodifikatoren in TypeScript
TypeScript unterstützt öffentliche, private und geschützte Zugriffsmodifikatoren für Ihre Methoden und Eigenschaften. Wenn keine Zugriffsmodifikatoren angegeben sind, wird die Methode oder Eigenschaft standardmäßig als öffentlich betrachtet und ist vom Objekt der Klasse aus leicht zugänglich.
Bei privaten Zugriffsmodifikatoren ist der Zugriff über das Objekt der Klasse nicht möglich und sie sind nur für die Verwendung innerhalb der Klasse vorgesehen. Sie sind für die geerbte Klasse nicht verfügbar.
Im Falle geschützter Zugriffsmodifikatoren sind sie für die Verwendung innerhalb der Klasse und der geerbten Klasse gedacht und sind vom Objekt der Klasse aus nicht zugänglich.
Ejemplo:
class Person { protected name: string; protected age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } private getName(): string { return this.name; } getDetails(): string { return "Name is "+ this.getName(); } } class Student extends Person { tmarks: number; constructor(name: string, age: number, tmarks: number) { super(name, age); this.tmarks = tmarks; } getMarks(): number { return this.tmarks; } getFullName(): string { return this.name; } setMarks(tmarks) { this.tmarks = tmarks; } } let _std1 = new Student('Sheena', 24, 500); _std1.getMarks(); // output is 500 _std1.getFullName(); // output is Sheena _std1.getDetails(); // output is Name is Sheena
- Zur Alleinbenutzung: Auf Eigenschaften oder Methoden kann weder vom Objekt der Klasse noch von der abgeleiteten Klasse zugegriffen werden. Sie sind für die interne Verwendung innerhalb der Klasse gedacht.
- Geschützt: Auf Eigenschaften und Methoden kann das erstellte Objekt auch nicht zugreifen. Sie sind innerhalb der Klasse zugänglich und stehen der Klasse zur Verfügung, die sie erweitert.
- Öffentlichkeit: Eigenschaften und Methoden werden ohne Schlüsselwort deklariert. Der Zugriff auf sie ist über das Objekt der Klasse von außen leicht möglich.
Schnittstelle in TypeScript
Eine der Kernfunktionen von TypeScript sind Schnittstellen. Die Schnittstelle ist ein Satz definierter Regeln, die von der Entität, die sie verwendet, implementiert werden müssen. Die Entität kann eine Klasse, Funktion oder Variable sein. Eine Schnittstelle kann aus Eigenschaften und Methoden bestehen. Sie können Eigenschaften als optional definieren, indem Sie die Syntax „?“ für diese Eigenschaft oder Methode verwenden. Die Schnittstelle fügt eine strenge Typprüfung für jede Funktion, Variable oder Klasse hinzu, die die Schnittstelle implementiert.
Syntax einer Schnittstelle in TypeScript
interface Dimension { width: string; height: string; }
Sie haben eine Schnittstelle mit dem Namen „Dimension“ definiert, die über die Eigenschaften „Breite“ und „Höhe“ verfügt und beide über den Typ „String“ verfügen.
Jetzt kann diese Schnittstelle durch eine Variable, eine Funktion oder eine Klasse implementiert werden. Hier ist das Beispiel einer Variablen, die die Schnittstelle Dimension implementiert.
Ejemplo:
interface Dimension { width: string; height: string; } let _imagedim: Dimension = { width: "100px", height: "200px" };
Die Signatur der Schnittstellendimension hat Breite und Höhe und beide sind obligatorisch. Falls bei der Implementierung der Schnittstelle eine Eigenschaft fehlt oder der Typ geändert wird, kommt es beim Kompilieren des Codes zu Javascript zu einem Fehler bei der Kompilierung.
Wenn der obige Code in Javascript kompiliert wird, sieht er wie folgt aus:
var _imagedim = { width: "100px", height: "200px" };
Sehen wir uns nun an, wie man eine Schnittstelle mit einer Funktion verwendet.
Verwenden von Interface für eine Funktion als Rückgabetyp
Ejemplo:
interface Dimension { width: string; height: string; } function getDimension() : Dimension { let width = "300px"; let height = "250px"; return { width: width, height: height } }
Im obigen Beispiel wird die Schnittstelle Dimension auf der Funktion getDimension() als Rückgabetyp implementiert. Der Rückgabetyp von getDimension() muss mit den für Interface Dimension genannten Eigenschaften und Typ übereinstimmen.
Der kompilierte Code zu Javascript wird wie folgt sein:
function getDimension() { var width = "300px"; var height = "250px"; return { width: width, height: height }; }
Wenn der Rückgabetyp während der Kompilierung nicht mit der Schnittstelle übereinstimmt, wird ein Fehler ausgegeben.
Schnittstelle als Funktionsparameter
interface Dimension { width: string; height: string; } function getDimension(dim: Dimension) : string { let finaldim = dim.width +"-"+ dim.height; return finaldim; } getDimension({width:"300px", height:"250px"}); // will get "300px-250px"
Im obigen Beispiel haben Sie Interface Dimension als Parameter für die Funktion getDimension() verwendet. Wenn Sie die Funktion aufrufen, müssen Sie sicherstellen, dass der an sie übergebene Parameter mit der definierten Schnittstellenregel übereinstimmt.
Der kompilierte Code zu Javascript wird wie folgt sein:
function getDimension(dim) { var finaldim = dim.width + "-" + dim.height; return finaldim; } getDimension({ width: "300px", height: "250px" });
Klassenimplementierende Schnittstelle
Um die Schnittstelle mit einer Klasse nutzen zu können, müssen Sie das Schlüsselwort verwenden implementiert.
Syntax für eine Klasse, die eine Schnittstelle implementiert:
class NameofClass implements InterfaceName { }
Das folgende Beispiel zeigt die Funktionsweise der Schnittstelle mit Klasse.
interface Dimension { width : string, height: string, getWidth(): string; } class Shapes implements Dimension { width: string; height: string; constructor (width:string, height:string) { this.width = width; this.height = height; } getWidth() { return this.width; } }
Im obigen Beispiel haben Sie die Schnittstelle Dimension mit den Eigenschaften width und height vom Typ string und einer Methode namens getWidth() definiert, die einen Rückgabewert als String hat.
Der kompilierte Code zu Javascript wird wie folgt sein:
var Shapes = /** @class */ (function () { function Shapes(width, height) { this.width = width; this.height = height; } Shapes.prototype.getWidth = function () { return this.width; }; return Shapes; }());
Funktionen in TypeScript
Funktionen sind Anweisungen, die zur Ausführung einer Aufgabe ausgeführt werden. JavascriptDer größte Teil des Codes ist in Form von Funktionen geschrieben und spielt eine wichtige Rolle. In TypeScriptstehen Ihnen Klassen, Schnittstellen, Module und Namespaces zur Verfügung, aber dennoch spielen Funktionen eine wichtige Rolle. Der Unterschied zwischen der Funktion in Javascript und TypeScript Funktion ist der Rückgabetyp, der verfügbar ist mit TypeScript Funktion.
JavaSkriptfunktion:
function add (a1, b1) { return a1+b1; }
TypeScript Funktion:
function add(a1 : number, b1: number) : number { return a1 + b1; }
In den oben genannten Funktionen wird der Name der Funktion hinzugefügt, die Parameter sind a1 und b1 beide haben einen Typ als Zahl, und der Rückgabetyp ist auch eine Zahl. Wenn Sie der Funktion einen String übergeben, wird beim Kompilieren ein Kompilierfehler ausgegeben. JavaSkript.
Aufruf der Funktion: add
let x = add(5, 10) ; // will return 15 let b = add(5); // will throw an error : error TS2554: Expected 2 arguments, but got 1. let c = add(3,4,5); // will throw an error : error TS2554: Expected 2 arguments, but got 3. let t = add("Harry", "John");// will throw an error : error TS2345: Argument of type '"Harry"' is not assignable to parameter of type 'number'.
Die Parameter a1 und b1 sind obligatorische Parameter und lösen einen Fehler aus, wenn sie nicht auf diese Weise empfangen werden. Außerdem sind der Parametertyp und der Rückgabetyp sehr wichtig und können nach der Definition nicht mehr geändert werden.
Optionale Parameter für eine Funktion
In Javascript sind alle Parameter der Funktionen optional und werden als undefiniert betrachtet, wenn sie nicht übergeben werden. Dasselbe gilt jedoch nicht für TypeScript, sobald Sie die Parameter definiert haben, müssen Sie sie auch senden. Falls Sie jedoch einen Parameter optional halten möchten, können Sie dies tun, indem Sie? gegenüber dem Parameternamen verwenden, wie unten gezeigt:
function getName(firstname: string, lastname?: string): string { return firstname + lastname; } let a = getName("John"); // will return Johnundefined. let b = getName("John", "Harry"); // will return JohnHarry let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3.
Bitte beachten Sie, dass die optionalen Parameter nur zuletzt in einer Funktion definiert werden müssen. Sie können den ersten Parameter nicht als optional und den zweiten Parameter als obligatorisch festlegen. Wenn Sie die Funktion mit einem Parameter aufrufen, gibt der Compiler einen Fehler aus. Daher ist es notwendig, die optionalen Parameter am Ende beizubehalten.
Weisen Sie den Parametern Standardwerte zu
Sie können Parametern Standardwerte zuweisen, wie unten gezeigt:
function getName(firstname: string, lastname = "Harry"): string { return firstname + lastname; } let a = getName("John"); // will return JohnHarry let b = getName("John", "H"); // will return JohnH
Ähnlich wie bei optionalen Parametern müssen auch hier standardmäßig initialisierte Parameter am Ende einer Funktion beibehalten werden.
Ruheparameter
Sie haben gesehen, wie TypeScript behandelt obligatorische Parameter, optionale Parameter und die mit dem Standardwert initialisierten Parameter. Nun werden wir uns die Restparameter ansehen. Restparameter sind eine Gruppe optionaler Parameter, die gemeinsam definiert werden, und sie werden mithilfe von drei definiert Punkte (…) gefolgt vom Namen des Parameters, der ein Array ist.
Syntax für Rest-Parameter:
function testFunc(a: string, ...arr: string[]) :string { return a + arr.join(""); }
Wie oben gezeigt, werden die restlichen Parameter mit (…param-name) definiert. Der restliche Parameter ist ein Array, dem drei Punkte vorangestellt sind. An das Array werden alle Parameter übergeben. Sie können die Funktion aufrufen, wie im folgenden Beispiel gezeigt:
Ejemplo:
let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as MondayTuesdayWednesdayThursday
Pfeilfunktionen
Eine Pfeilfunktion ist eine der wichtigen Funktionen, die in ES6 veröffentlicht wurden, und ist verfügbar in TypeScript auch. Die Syntax der Pfeilfunktion enthält einen dicken Pfeil, weshalb die Funktion als Pfeilfunktion bezeichnet wird.
Syntax der Pfeilfunktion:
var nameoffunction = (params) => { // code here }
Wozu dient die Pfeilfunktion?
Schauen wir uns das Beispiel an, um den Anwendungsfall der Pfeilfunktion zu verstehen:
Ejemplo:
var ScoreCard = function () { this.score = 0; this.getScore = function () { setTimeout(function () { console.log(this.score); // gives undefined. }, 1000); } } var a = new ScoreCard(); a.getScore();
Sie haben eine anonyme Funktion erstellt, die über die Eigenschaft this verfügt. Score initialisiert auf 0 und eine Methode getScore, die intern einen setTimeout hat und in 1 Sekunde this.score tröstet. Der getröstete Wert ergibt „undefiniert“, obwohl Sie „this.score“ definiert und initialisiert haben. Das Problem hier ist mit this Stichwort. Die Funktion in setTimeout hat ihr eigenes this und versucht, intern auf die Punktzahl zu verweisen. Da sie nicht definiert ist, gibt sie undefiniert aus.
Das Gleiche kann mit der Pfeilfunktion wie unten gezeigt erledigt werden:
var ScoreCard = function () { this.score = 0; this.getScore = function () { setTimeout(()=>{ console.log(this.score); // you get 0 }, 1000); } } var a = new ScoreCard(); a.getScore();
Sie haben die Funktion in setTimeout wie unten gezeigt in eine Pfeilfunktion geändert:
setTimeout(()=>{ console.log(this.score); // you get 0 }, 1000);
Eine Pfeilfunktion hat keine eigene fehlen uns die Worte. definiert und teilt sein übergeordnetes fehlen uns die Worte., sodass außerhalb deklarierte Variablen mithilfe dieser Funktion innerhalb einer Pfeilfunktion leicht zugänglich sind. Sie sind aufgrund der kürzeren Syntax sowie für Rückrufe, Event-Handler, Inside-Timing-Funktionen usw. nützlich.
TypeScript Enums
TypeScript Enum ist ein Objekt, das eine Sammlung zusammengehöriger, gespeicherter Werte enthält. Javascript unterstützt keine Enumerationen. Die meisten Programmiersprache Gefällt mir Java, C, C++ unterstützt TypeScript Enum und es ist auch verfügbar mit TypeScript auch. Enumerationen werden mit dem Schlüsselwort enum definiert.
Wie deklariere ich eine Enum?
Syntax:
enum NameofEnum { value1, value2, .. }
Beispiel: Enum
enum Directions { North, South, East, West }
Im obigen Beispiel haben Sie eine Enumeration namens Directions definiert. Der angegebene Wert ist Nord, Süd, Ost, West. Die Werte werden beginnend mit 0 für den ersten Wert in der Aufzählung nummeriert und anschließend um 1 für den nächsten Wert erhöht.
Deklarieren Sie eine Aufzählung mit einem numerischen Wert
Wenn einer Aufzählung standardmäßig kein Wert zugewiesen wird, wird dieser als Zahl betrachtet, die bei 0 beginnt. Das folgende Beispiel zeigt eine Aufzählung mit einem numerischen Wert.
enum Directions { North = 0, South = 1, East =2, West =3 }
Sie können der Aufzählung auch einen Startwert zuweisen und die nächsten Aufzählungswerte erhalten die inkrementierten Werte. Zum Beispiel:
enum Directions { North = 5, South, // will be 6 East, // 7 West // 8 }
Jetzt beginnt der Enum-Wert Nord mit 5, sodass Süd den Wert 6, Ost = 7 und West = 8 erhält.
Sie können auch Werte Ihrer Wahl zuweisen, anstatt die Standardwerte zu übernehmen. Zum Beispiel:
enum Directions { North = 5, South = 4, East = 6, West = 8 }
Wie greife ich auf eine Enum zu?
Das folgende Beispiel zeigt, wie Sie Enum in Ihrem Code verwenden:
enum Directions { North, South, East, West } console.log(Directions.North); // output is 0 console.log(Directions["North"]); // output is 0 console.log(Directions[0]); //output is North
Der für Javascript kompilierte Code lautet wie folgt:
var Directions; (function (Directions) { Directions[Directions["North"] = 0] = "North"; Directions[Directions["South"] = 1] = "South"; Directions[Directions["East"] = 2] = "East"; Directions[Directions["West"] = 3] = "West"; })(Directions || (Directions = {})); console.log(Directions.North); console.log(Directions["North"]); console.log(Directions[0]);
Da Javascript unterstützt keine Enumerationen, es konvertiert die Enumeration in selbstaufgerufene Funktionen, wie oben gezeigt.
Deklarieren Sie eine Aufzählung mit einem Zeichenfolgenwert
Sie können Zeichenfolgenwerte Ihrer Wahl zuweisen, wie im folgenden Beispiel gezeigt:
Ejemplo:
enum Directions { North = "N", South = "S", East = "E", West = "W" } console.log(Directions.North); // output is N console.log(Directions["North"]); // output is N console.log(Directions[0]); // output is North
Der für Javascript kompilierte Code lautet wie folgt:
var Directions; (function (Directions) { Directions["North"] = "N"; Directions["South"] = "S"; Directions["East"] = "E"; Directions["West"] = "W"; })(Directions || (Directions = {})); console.log(Directions.North); console.log(Directions["North"]); console.log(Directions[0]);
Was sind die Module in TypeScript?
Die erstellten Dateien in TypeScript haben globalen Zugriff, was bedeutet, dass auf in einer Datei deklarierte Variablen in einer anderen Datei problemlos zugegriffen werden kann. Diese globale Natur kann zu Codekonflikten führen und zur Laufzeit zu Problemen bei der Ausführung führen. Sie verfügen über Export- und Importmodulfunktionen, mit denen Sie Konflikte globaler Variablen und Funktionen vermeiden können. Diese Funktion ist verfügbar in JavaSkript mit ES6-Release und auch unterstützt in TypeScript.
Warum brauchen Sie Module in TypeScript?
Das folgende Beispiel zeigt das Problem ohne Module:
Beispiel test1.ts
let age : number = 25;
Sie haben in test1.ts eine Variable „Alter“ vom Typ „Nummer“ definiert.
Beispiel test2.ts
In der Datei test2.ts können Sie problemlos auf die Variable zugreifen Alter definiert in test1.ts und ändern Sie es auch wie unten gezeigt:
age = 30; // changed from 25 to 30. let _new_age = age;
Der obige Fall kann daher zu vielen Problemen führen, da die Variablen global verfügbar sind und geändert werden können.
Mit Module, bleibt der geschriebene Code im Gebietsschema der Datei und kann außerhalb der Datei nicht aufgerufen werden. Um auf etwas aus der Datei zuzugreifen, muss sie mit dem Schlüsselwort export exportiert werden. It wird verwendet, wenn Sie möchten, dass die Variable, Klasse, Funktion oder Schnittstelle in einer anderen Datei verwendet wird. Import wird verwendet, wenn Sie auch auf die exportierte Variable, Klasse, Schnittstelle oder Funktion zugreifen möchten. Dadurch bleibt der geschriebene Code in der Datei erhalten, und selbst wenn Sie dieselben Variablennamen definieren, werden sie nicht verwechselt und verhalten sich lokal in der Datei, in der sie deklariert werden.
Verwenden von Export und Import
Es gibt viele Möglichkeiten zum Exportieren und Importieren. Deshalb wird hier die Syntax besprochen, die am häufigsten verwendet wird.
Die Syntax für Import und Export 1:
export nameofthevariable or class name or interface name etc //To import above variable or class name or interface you have to use import as shown below: Import {nameof thevariable or class name or interfacename} from "file path here without.ts"
Hier ist ein funktionierendes Beispiel für die Verwendung von Export und Import.
Ejemplo:
test1.ts
export let age: number = 25;
Das Schlüsselwort „Export“ wird verwendet, um die Altersvariable in einer anderen Datei freizugeben.
test2.ts
import { age } from "./test1" let new_age :number = age;
Für den Zugriff wird das Schlüsselwort „Import“ verwendet Alter Variable, und Sie müssen den Dateispeicherort wie oben gezeigt angeben.
Syntax für Import und Export 2:
Es gibt eine andere Möglichkeit zum Exportieren und Importieren. Die Syntax dafür ist wie folgt:
export = classname; import classname = require(“file path of modulename”)
Wenn Sie verwenden exportieren = Um Ihr Modul zu exportieren, muss der Import „require(„Dateipfad des Modulnamens“) verwenden, um es zu importieren.
Hier ist ein funktionierendes Beispiel, das den obigen Fall zeigt:
Kunde.ts
class Customer { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } getName(): string { return this.name; } } export = Customer;
testCustomer.ts
import Customer = require("./Customer"); let a = new Customer("Harry", 30); alert(a.getName());
Modullader
Module können nicht eigenständig arbeiten, daher benötigen Sie einen Modullader, um die Importabhängigkeiten zu lokalisieren, wie Sie in TypeScript Beispiele siehe oben. Der verfügbare Modullader ist CommonJS für nodejs und Require.js zur Ausführung im Browser.
Um Code mit dem CommonJS-Modul zu kompilieren, verwenden Sie den folgenden Befehl:
tsc --module commonjs testCustomer.ts
Um Code mit dem Requirejs-Modul zu kompilieren, verwenden Sie den folgenden Befehl:
tsc --module amd testCustomer.ts
Die abhängigen Dateien werden mit dem obigen Befehl in eine JS-Datei konvertiert.
Beispiel testCustomer.ts zu testCustomer.js mit Requirejs
define(["require", "exports", "./Customer"], function (require, exports, Customer) { "use strict"; exports.__esModule = true; var a = new Customer("Harry", 30); alert(a.getName()); });
Beispiel: Customer.ts zu Customer.js mit Requirejs
define(["require", "exports"], function (require, exports) { "use strict"; var Customer = /** @class */ (function () { function Customer(name, age) { this.name = name; this.age = age; } Customer.prototype.getName = function () { return this.name; }; return Customer; }()); return Customer; });
Um es mit require.js zu testen, müssen Sie eine Datei namens main.js erstellen, die wie gezeigt auf die Abhängigkeiten verweist.
Hier ist die Ordnerstruktur:
src/ Customer.js testCustomer.js main.js require.js // you can get this file from github or npm install requirejs test.html
Main.js
define(function (require) { var customer = require("./Customer"); var testCustomer = require("./testCustomer"); });
test.html
<!DOCTYPE html> <html> <head> <title>TypeScript Module testing using Requirejs</title> <script data-main="main" src="require.js"></script> </head> <body> <h3>Testing modules using Requirejs</h3> </body> </html>
Namespaces in TypeScript
Namespace besteht im Wesentlichen aus einer Sammlung von Klassen, Schnittstellen, Variablen und Funktionen in einer Datei.
Namespace-Syntax
namespace name{ export class { } export interface { } export const constname; }
Der zugehörige Code ist unter einem Namensraum verfügbar.
Arbeitsbeispiel für einen Namespace: testnamespace.ts
namespace StudentSetup { export interface StudDetails { name: string; age: number; } export function addSpace(str) { // will add space to the string given return str.split("").join(" "); } export class Student implements StudDetails { name: string; age: number; constructor(studentdetails: StudDetails) { this.name = studentdetails.name; this.age = studentdetails.age; } getName(): string { return this.name; } } }
Der Name des Namespace ist StudentSetup, Sie haben eine Schnittstelle „StudDetails“, die Funktion „addSpace“ und eine Klasse namens „Student“ hinzugefügt.
Zugreifen auf Namespace
Nachfolgend sehen Sie den Code, in dem Sie den Namespace verwenden StudentSetup.
testStudentSetup.ts
let a = new StudentSetup.Student({ name: "Harry", age: 20 }); console.log("The name is :" + StudentSetup.addSpace(a.getName()));
Die in einem Namespace verfügbare Klasse, Schnittstelle oder Funktion muss mithilfe des Namens des Namespace-Beispiels referenziert werden StudentSetup.addSpace um auf die Funktion zuzugreifen, StudentSetup.Student um auf die Klasse zuzugreifen.
Sie können beide Dateien wie unten gezeigt in ein JS kompilieren:
tsc --outFile namespace.js testnamespace.ts testStudentSetup.ts
Überprüfen Sie die Ausgabe in der Eingabeaufforderung mit dem folgenden Befehl:
node namespace.js
Die Ausgabe wird wie folgt angezeigt:
The name is: H a r r y
Umgebungsdeklarationen in TypeScript
TypeScript ermöglicht die Verwendung von JavaScript-Dateien von Drittanbietern mithilfe der Ambient-Deklaration. Der Vorteil dieser Funktion besteht darin, dass Sie nicht neu schreiben müssen und dennoch alle Funktionen der Bibliothek nutzen können. TypeScript.
Ambient-Syntax
So deklarieren Sie das Ambient-Modul:
declare module moduleName { //code here }
Die Ambient-Datei muss wie folgt gespeichert werden:
filename.d.ts
Um die Datei zu verwenden Dateiname.d.ts In Ihrer .ts-Datei müssen Sie darauf verweisen als:
/// <reference path="filename.d.ts"/>
Die Ambient-Typdeklaration in TypeScript enthält einen Verweis auf die Drittanbieterbibliothek und deklariert die erforderlichen Funktionen mit ihrem eigenen Typ erneut. Angenommen, Sie haben eine kleine JavaScript-Bibliothek, wie unten gezeigt:
Third Party JavaSkriptdatei: testString.js
Beispiel: testString.js
var StringChecks = { isString: function (str) { return typeof str === "string"; }, convertToUpperCase: function (str) { return str.toUpperCase(); }, convertToLowerCase: function (str) { return str.toLowerCase(); }, convertToStringBold: function (str) { return str.bold(); } };
Sie haben ein Objekt namens StringChecks, das Funktionen wie isString, convertToUpperCase, convertToLowerCase und converToStringBold hat.
Erstellen eines Ambient-Moduls in TypeScript
Jetzt erstellen wir ein Ambient-Modul, das auf die oben genannten js-Funktionen verweist und gemäß unseren Anforderungen auch eine Typprüfung hinzufügt.
Dateiname: tstring.d.ts
declare module TestString { export interface StringsFunc { isString(str: string): boolean; convertToUpperCase(str: string): string; convertToLowerCase(str: string): string; convertToStringBold(str: string): string; } } declare var StringChecks: TestString.StringsFunc;
Sie müssen einen Modulnamen als TestString definieren und die Schnittstelle StringsFunc exportiert haben.
isString(str: string): boolean
=> Dies nimmt param als Zeichenfolge an und der Rückgabetyp ist boolesch. Wenn Sie den Parameter in Ihrer .ts-Datei als Zahl oder als etwas anderes als eine Zeichenfolge übergeben, erhalten Sie einen Fehler beim Kompilieren.
konvertierenToUpperCase(str:string): string
=> Dies nimmt das Argument als String und gibt einen String zurück. Das Gleiche gilt konvertierenToLowerCase(str: string)
: Zeichenfolge; Und konvertierenToStringBold(str: string): string
;
Da Sie in der Javascript-Datei den Objektnamen als StringChecks haben, müssen wir schließlich in der .d.ts-Datei auf dasselbe verweisen, was wie folgt geschieht:
declare var StringChecks: TestString.StringsFunc;
Verwendung des Ambient-Moduls in TypeScript
Hier ist nun die Datei test.ts, in der die Umgebungsdatei tstring.d.ts verwendet wird
Beispiel: test.ts
/// <reference path="tstring.d.ts"/> let str1 = StringChecks.isString("Hello World"); console.log(str1); let str2 = StringChecks.convertToUpperCase("hello world"); console.log(str2); let str3 = StringChecks.convertToLowerCase("HELLO"); console.log(str3); let str4 = StringChecks.convertToStringBold("Hello World"); console.log(str4);
Kompilieren TypeScript tsc test.ts zu test.js
/// <reference path="tstring.d.ts"/> var str1 = StringChecks.isString("Hello World"); console.log(str1); var str2 = StringChecks.convertToUpperCase("hello world"); console.log(str2); var str3 = StringChecks.convertToLowerCase("HELLO"); console.log(str3); var str4 = StringChecks.convertToStringBold("Hello World"); console.log(str4);
Jetzt können Sie test.js in der HTML-Datei und auch die Bibliotheksdatei testString.js verwenden
<html> <head> <title>Test TypeScript Ambient</title> <script src="testStrings.js"></script> <script src="test.js"></script> </head> <body> </body> </html>
Dies ist die Ausgabe, die in der Konsole angezeigt wird:
true HELLO WORLD hello <b>Hello World</b>
TypeScript Geschichte
Sehen Sie wichtige Sehenswürdigkeiten aus der Geschichte von TypeScript:
- Nach zwei Jahren interner Entwicklung bei Microsoft. TypeScript 0.9, veröffentlicht im Jahr 2013
- Zusätzliche Unterstützung für Generika TypeScript 1.0 wurde auf Build 2014 veröffentlicht
- Im Juli 2014 eine neue TypeScript Compiler kam, der fünfmal schneller ist als die vorherige Version.
- Im Juli 2015 Unterstützung für ES6-Module, Namespace-Schlüsselwort, für, von Support, Dekoratoren.
- Im November 2016 wurde eine zusätzliche Funktion wie Schlüssel- und Suchtypen für zugeordnete Typen usw. hinzugefügt.
- Am 27. März 2018 wurden bedingte Typen, der verbesserte Schlüssel mit Schnittmengentypenunterstützung in der TypeScript.
Warum TypeScript?
Hier sind wichtige Vorteile der Verwendung TypeScript
- Großes und komplexes Projekt in JavaSkripte sind schwierig zu codieren und zu warten.
- TypeScript hilft sehr bei der Code-Organisation und beseitigt dennoch die meisten Fehler während der Kompilierung.
- TypeScript unterstützt JS-Bibliotheken und API-Dokumentation
- Es handelt sich um eine optional typisierte Skriptsprache
- TypeScript Code kann in Klartext umgewandelt werden JavaSkriptcode
- Bessere Codestrukturierung und objektorientierte Programmiertechniken
- Ermöglicht eine bessere Tool-Unterstützung für die Entwicklungszeit
- Es kann die Sprache über die Standarddekoratoren async/await hinaus erweitern
Wer benutzt TypeScript?
Hier sind einige der häufigsten Anwendungen von TypeScript:
- Das Angular-Team verwendet TypeScript.
- NodeJS- und NPM-Installation
- TypeScript Installation
- Kompilieren TypeScript Code zu Javascript
- Führen Sie Code mit Nodejs aus
- Ausführen Javascript im Browser
- Kompilieren TypeScript Code zu Javascript mit EcmaScript-Version
- Sie können Code, der in TypeScript zu JavaSkript mit NodeJS.
- Also mit zu arbeiten TypeScript Sie müssen zuerst NodeJS herunterladen und installieren.
Zusammenfassung
- TypeScript ist eine Obermenge von JavaSkript. TypeScript ist eine rein objektorientierte Programmiersprache, die Klassen, Schnittstellen usw. unterstützt.
- TypeScript unterstützt alle veröffentlichten Ecmascript-Funktionen und Entwickler können diese beim Codieren verwenden.
- Variablen werden zum Speichern von Werten verwendet. Der Wert kann eine Zeichenfolge, eine Zahl, ein boolescher Wert oder ein Ausdruck sein.
- In TypeScript, der Typ einer Variablen wird nur zu Beginn definiert und muss während der gesamten Ausführung derselbe Typ bleiben. Jede Änderung daran führt zu einem Kompilierfehler während der Kompilierung in JavaScript.
- Ein Array in TypeScript ist ein Datentyp, in dem Sie mehrere Werte speichern können.
- Klasse ist eine neue Funktion, die ab ES6 hinzugefügt wurde. JavaEs wurde versucht, die Klassentypfunktionalität mithilfe einer Funktion mit Prototypfunktionalität zu skripten, um Code wiederzuverwenden.
- TypeScript unterstützt öffentliche, private und geschützte Zugriffsmodifikatoren für Ihre Methoden und Eigenschaften.
- Eine der Kernfunktionen von TypeScript sind Schnittstellen. Die Schnittstelle ist ein Satz definierter Regeln, die von der Entität, die sie verwendet, implementiert werden müssen.
- Funktionen sind eine Reihe von Anweisungen, die zur Ausführung einer Aufgabe ausgeführt werden.
- TypeScript Enum ist ein Objekt, das eine Sammlung zusammengehöriger, gespeicherter Werte enthält.