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 dieser 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 , 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 für 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 Schleife wie unten dargestellt:

Die Verwendung von 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 , 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 Google Trends, Amazons Bestseller 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.

Was ist TypeScript?

Herunterladen und Installieren TypeScript

Kompilieren TypeScript Code zu Javascript

Ausführen Javascript mit Nodejs

Kompilieren TypeScript Code zu Javascript mit EcmaScript-Version

ÄHNLICHE ARTIKEL

Variablen in TypeScript

Variablen mit var deklarieren

Variablen mit let deklarieren

Variablen mit const deklarieren

Typen in TypeScript

Nummer

Schnur

Boolean

Jedes

Leere

TypeScript Feld

Deklarieren und initialisieren Sie ein Array

Verschiedene Möglichkeiten, auf Elemente aus einem Array zuzugreifen

Die Verwendung von TypeScript for-Schleife

For-In-Schleife verwenden

Verwendung einer for-of-Schleife

Verwendung der foreach-Schleife

TypeScript Array-Methoden

Längeneigenschaft

Reverse-Methode

Sortiermethode

Pop-Methode

Shift Methode

Push-Methode

Concat-Methode

Beispiel für die Längeneigenschaft

Beispiel für die umgekehrte Methode

Beispiel für Sortiermethode

Beispiel für die Pop-Methode

Beispiel für die Shift-Methode

Beispiel für Push-Methode

Beispiel für die Concat-Methode

Klasse in TypeScript

Definieren einer Klasse in TypeScript

Beispiel: Ein funktionierendes Beispiel für Class

Konstrukteur in einem TypeScript Klasse

Methoden innerhalb eines TypeScript Klasse

Erstellen einer Instanz der Klasse in TypeScript

Kompilieren TypeScript Klasse bis JavaSkript

Klassenvererbung

Syntax der Klassenvererbung:

Zugriffsmodifikatoren in TypeScript

Schnittstelle in TypeScript

Syntax einer Schnittstelle in TypeScript

Verwenden von Interface für eine Funktion als Rückgabetyp

Schnittstelle als Funktionsparameter

Klassenimplementierende Schnittstelle

Funktionen in TypeScript

Aufruf der Funktion: add

Optionale Parameter für eine Funktion

Weisen Sie den Parametern Standardwerte zu

Ruheparameter

Pfeilfunktionen

Wozu dient die Pfeilfunktion?

TypeScript Enums

Wie deklariere ich eine Enum?

Deklarieren Sie eine Aufzählung mit einem numerischen Wert

Wie greife ich auf eine Enum zu?

Deklarieren Sie eine Aufzählung mit einem Zeichenfolgenwert

Was sind die Module in TypeScript?

Warum brauchen Sie Module in TypeScript?

Verwenden von Export und Import

Die Syntax für Import und Export 1:

Syntax für Import und Export 2:

Modullader

Beispiel testCustomer.ts zu testCustomer.js mit Requirejs

Beispiel: Customer.ts zu Customer.js mit Requirejs

Namespaces in TypeScript

Namespace-Syntax

Zugreifen auf Namespace

Umgebungsdeklarationen in TypeScript

Ambient-Syntax

So deklarieren Sie das Ambient-Modul:

Die Ambient-Datei muss wie folgt gespeichert werden: