TypeScript Tutorial: Was sind Interfaces, Enums und Arrays?

Was ist TypeScript?

TypeScript ist eine Obermenge von JavaSkript. TypeScript ist eine objektorientierte Programmiersprache, die Klassen, Schnittstellen und mehr unterstützt. Es handelt sich um eine Open-Source-Sprache, die von entwickelt wurde. Microsoft das den Code statisch kompiliert zu JavaSkript. Es lässt sich problemlos im Browser oder in Node.js ausführen.

Alle neuesten Features für ECMAScript werden unterstützt in TypeScriptund außerdem TypeScript verfügt über eigene objektorientierte Merkmale wie Schnittstellen, Umgebungsdeklarationen und Klassenvererbung, die bei der Entwicklung helfen.ping eine große Anwendung, die andernfalls schwer zu entwickeln wäre JavaSkript.

Die Beziehung ist einseitig. Jede gültige JavaDie Skriptdatei ist bereits gültig. TypeScriptDas Umgekehrte ist jedoch nicht wahr, da Typannotationen nur in TypeScript und werden während der Kompilierung gelöscht.

Warum TypeScript?

Hier sind die wichtigsten Vorteile der Verwendung TypeScript:

• Große und komplexe Projekte in JavaSkripte sind schwierig zu codieren und zu warten.
• TypeScript Hilft sehr bei der Codeorganisation und beseitigt die meisten Fehler bereits während der Kompilierung anstatt zur Laufzeit.
• TypeScript Unterstützt JS-Bibliotheken und API-Dokumentation.
• Es handelt sich um eine optional typisierte Skriptsprache, sodass Typen schrittweise eingeführt werden können.
• TypeScript Code kann in einfachen Code umgewandelt werden JavaSkriptcode für jedes Browserziel.
• Es ermöglicht eine bessere Code-Strukturierung und objektorientierte Programmiertechniken.
• Es ermöglicht eine bessere Unterstützung der Entwicklungstools, einschließlich Autovervollständigung und sicherem Refactoring.
• Sie kann die Sprache über den Standard hinaus erweitern, beispielsweise durch Funktionen wie Dekoratoren.

Der größte praktische Vorteil liegt in der Unterstützung durch den Editor. Da der Compiler die Struktur jedes Wertes kennt, kann ein Editor eine Eigenschaft im gesamten Projekt umbenennen und jede Stelle melden, an der die Übereinstimmung nicht mehr gegeben ist.

TypeScript Geschichte

Werfen wir einen Blick auf die wichtigsten Meilensteine ​​der Geschichte von TypeScript:

• Nach zwei Jahren interner Entwicklung bei Microsoft, TypeScript Version 0.9 wurde 2013 veröffentlicht.
• TypeScript Version 1.0 mit zusätzlicher Unterstützung für Generika wurde auf der Build 2014 veröffentlicht.
• Im Juli 2014 eine neue TypeScript Ein neuer Compiler wurde eingeführt, der fünfmal schneller war als die vorherige Version.
• Im Juli 2015 wurde die Unterstützung für ES6-Module, das Namespace-Schlüsselwort, for…of und Dekoratoren hinzugefügt.
• Im November 2016 wurden zugeordnete Typen, Schlüssel- und Nachschlagetypen sowie Objektrest und -verteilung hinzugefügt.
• Am 27. März 2018 wurden bedingte Typen und ein verbesserter keyof-Wert mit Schnittmengentypen hinzugefügt.
• TypeScript Version 5.0, veröffentlicht im März 2023, modernisierte Dekoratoren und reduzierte die Verpackungsgröße.
• TypeScript Version 6.0 erschien im März 2026 als finale Version, die auf der vorherigen Version aufbaute. JavaSkript-Quellcodebasis.
• TypeScript Version 7.0 stellt den Compiler auf eine native Go-Implementierung um, welche Microsoft Berichten zufolge ist es etwa zehnmal schneller als 6.0.

Wer benutzt TypeScript?

TypeScript ist keine Nischenwahl mehr. Es bildet die Grundlage für einige der am weitesten verbreiteten Frontend- und Backend-Tools, und die folgende Liste zeigt, wo ein Anfänger am ehesten damit in Berührung kommt.

• Winkel: Das Angular-Framework ist geschrieben in TypeScriptEs wird erwartet, dass auch der Anwendungscode darin geschrieben wird.
• React- und Vue-Projekte: Beide Ökosysteme versenden offizielle Schiffe TypeScript Vorlagen und die meisten modernen Starter-Systeme aktivieren diese Funktion standardmäßig.
• Node.js-Backends: Server-Frameworks wie NestJS basieren auf … TypeScript Klassen und Dekorateure.
• Editorwerkzeuge: Visual Studio Code ist selbst ein großes TypeScript Die Codebasis erklärt auch die umfassende Sprachunterstützung.
• Frontends für große Unternehmen: Teams, die mit vielen Mitwirkenden arbeiten, nutzen es, um Integrationsfehler vor der Bereitstellung zu erkennen.

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

Besuchen Sie die offizielle Website von Node.js, https://nodejs.org/en/download/Laden Sie Node.js für Ihr Betriebssystem herunter und installieren Sie es. Eine detaillierte Anleitung finden Sie im Leitfaden unter [Link einfügen]. Wie man Node.js herunterlädt und installiert.

Schritt 2) Überprüfen Sie die Nodejs- und NPM-Version

Um zu überprüfen, ob Node.js und npm installiert sind, prüfen Sie die Version in Ihrer Eingabeaufforderung.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

Jede aktuelle Node LTS-Version funktioniert. TypeScript Für die Ausführung des Compilers wird lediglich eine unterstützte Node-Version benötigt.

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

Dadurch wird eine package.json-Datei erstellt, in der die Abhängigkeiten für unser Projekt gespeichert werden.

Wenn Sie fertig sind, installieren Sie 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 besteht darin, dass Sie die TypeScript tsc Der Befehl kann aus jedem Verzeichnis ausgeführt werden, da es global installiert ist. Falls Sie es nicht installieren möchten TypeScript Verwenden Sie global den folgenden Befehl:

npm install --save-dev typescript

Erstellen Sie einen Ordner „src\“ in Ihrem Projektverzeichnis und erstellen Sie darin die folgenden Dateien: 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 ist global installiert. Verwenden Sie dazu den folgenden Befehl:

tsc test.ts

If TypeScript Wenn die Installation lokal in Ihrem Projekt erfolgt, müssen Sie den Pfad verwenden. TypeScript Aus node_modules, wie gezeigt, oder führen Sie es über npx aus:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Der obige Befehl erstellt eine test.js-Datei, in der der Code kompiliert wird. JavaSkript.

Beispiel: test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

Ausführen Javascript mit Nodejs

Nun führen wir test.js in Node.js wie folgt aus:

D:\typeproject\src>node test.js
15

Der an console.log übergebene Wert wird angezeigt, wenn test.js ausgeführt wird.

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 Es unterstützt alle veröffentlichten ECMAScript-Funktionen, die Entwickler beim Programmieren nutzen können. Allerdings werden nicht alle neuen Funktionen von älteren Browsern unterstützt, sodass Sie möglicherweise in eine ältere ECMAScript-Version kompilieren müssen. TypeScript bietet Compileroptionen, die genau das tun.

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 ES3 als Zielsprache für den klassischen Compiler eingestellt. Falls Sie dies ändern möchten, können Sie den oben genannten Befehl verwenden.

Aktuell verwenden wir ES6 als Zielplattform:

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 ein ES6-Feature ist und sich auch nach der Kompilierung zu ES6 nicht ändert.

Standardmäßig ist das Ziel ES3, daher erhält man ohne Angabe eines Ziels test.js wie folgt:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

Hier wird also der fette Pfeil in eine normale anonyme Funktion umgewandelt.

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 JavaSkriptLernen wir also, Variablen zu deklarieren und ihnen Werte zuzuweisen. TypeScript.

Variablen können im Code nicht verwendet werden, ohne definiert zu sein. Um eine Variable zu deklarieren, können Sie Folgendes verwenden:

jung Stichwort,

lassen Stichwort

const Stichwort

Arbeiten mit Variablen in TypeScript ähnelt JavaSkript und Benutzer, die mit JavaDas Skript wird es sehr leicht finden. In modernem Code, lassen und const werden bevorzugt jung, weil ihr Blockbereich eine ganze Klasse von Fehlern verhindert.

Variablen mit var deklarieren

Syntax:

var firstname = "Roy";

Werfen wir einen Blick auf einige davon. TypeScript Beispiele zum Verständnis der Funktionsweise des Schlüsselworts `var` und des Gültigkeitsbereichs von Variablen, die mit diesem Schlüsselwort 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 and accessible only inside function test
    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; // t is redeclared inside the function, so changes stay local
    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(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

Variablen mit let deklarieren

Das TypeScript Die Syntax für let ist wie folgt:

Syntax:

let name = "Roy";

Die Arbeit der lassen Die Variable ist nahezu identisch mit jungAllerdings mit einem wichtigen Unterschied, den das folgende Beispiel verdeutlicht.

Ejemplo:

let i = 1;
function test() {
    if (i > 0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error: Cannot find name 't'

Die obige TypeScript Das Beispiel wirft einen Fehler, aber derselbe Code hätte mit dem jung Schlüsselwort. Variablen, die mit dem Schlüsselwort deklariert wurden. lassen sind nur innerhalb des Blocks verfügbar, in dem sie deklariert sind. In diesem Beispiel existiert t nur innerhalb des if-Blocks, nicht in der gesamten Funktion.

Dasselbe gilt innerhalb jeder Funktion, for-Schleife, while-Schleife oder switch-Block. Eine let-Variable ist nur innerhalb dieses Blocks verfügbar; der Zugriff darauf außerhalb führt zu einem Fehler. Dies ist der Hauptunterschied zwischen var und let.

Variablen mit const deklarieren

„Const“ bedeutet Konstante. Sie ähneln „let“-Variablen, mit dem Unterschied, dass ein einmal zugewiesener Wert nicht mehr geändert werden kann. Eine „const“-Deklaration muss daher in derselben Zeile initialisiert werden.

Syntax:

const name = "Roy";

Ejemplo:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

Verwenden Sie also `const` immer dann, wenn Sie sicher sind, dass der zugewiesene Wert nicht neu zugewiesen wird. Beachten Sie, dass `const` die Neuzuweisung der Bindung verhindert, nicht aber die Änderung des Objekts, auf das es verweist.

Typen in TypeScript

TypeScript ist eine stark typisierte Sprache, während JavaDas Skript ist es nicht. Eine Variable, deren Wert als Zeichenkette definiert ist, kann problemlos in eine Zahl geändert werden. JavaDasselbe wird im Drehbuch nicht toleriert. TypeScript. in TypeScriptDer Datentyp einer Variablen wird zu Beginn definiert und muss während der gesamten Ausführung beibehalten werden. Jede Änderung führt zu einem Kompilierfehler. JavaSkript.

Folgende Grundtypen gibt es:

Nummer

Akzeptiert nur ganze Zahlen, Gleitkommazahlen, Brüche und ähnliche numerische Werte.

Syntax:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Hier sind einige wichtige Methoden, die auf Zahlentypen angewendet werden können:

toFixed() – Es wandelt die Zahl in eine Zeichenkette um und behält die der Methode übergebenen Dezimalstellen bei.

toString () – Diese Methode wandelt die Zahl in eine Zeichenkette 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 Zahlenmethoden

let _num :number = 10.345;
_num.toFixed(2);      // "10.35"
_num.valueOf();      // 10.345
_num.toString();     // "10.345"
_num.toPrecision(2); // "10"

Schnur

Zeichenkette: Nur Zeichenkettenwerte.

Syntax:

let str :string = "hello world";

Hier sind einige wichtige Methoden, die auf Zeichenketten angewendet werden können:

• gespalten() – Diese Methode teilt die Zeichenkette in ein Array auf.
• charat() – Diese Methode liefert das Zeichen am angegebenen Index.
• Index von() – Diese Methode gibt die Position des ersten Vorkommens des ihr übergebenen Wertes an.
• ersetzen() – Diese Methode benötigt zwei Zeichenketten. Sie sucht nach dem ersten Wert in der Zeichenkette und ersetzt ihn, falls vorhanden, durch den zweiten Wert, wodurch eine neue Zeichenkette zurückgegeben wird.
• trimmen() – Diese Methode entfernt Leerzeichen von beiden Seiten der Zeichenkette.
• substr() – Diese Methode gibt einen Teil der Zeichenkette zurück, abhängig von der Startposition und der angegebenen Länge.
• Teilzeichenfolge() – Diese Methode gibt einen Teil der Zeichenkette zurück, abhängig von der Start- und Endposition. Das Zeichen an der Endposition wird ausgeschlossen.
• zuGroßbuchstaben() – wandelt die Zeichenkette in Großbuchstaben um.
• 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 if the value does not exist
_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

Ein boolescher Wert akzeptiert nur die logischen Werte „true“ und „false“. Im Gegensatz zu einfachen Datentypen JavaIm Skript werden die Zahlen 0 und 1 nicht akzeptiert, da sie vom Typ Zahl sind.

Syntax:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

Jedes

Syntax:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Variablen, die mit dem für Der Typ kann eine Zeichenkette, eine Zahl, ein Array, einen booleschen Wert oder einen leeren Wert enthalten. TypeScript wird keinen Kompilierfehler auslösen, was Variablen in JavaSkript. Verwenden Sie den Typ "any" nur dann, wenn Sie sich über den Typ des Wertes, der dieser Variablen zugeordnet wird, nicht sicher sind, da dadurch jede Überprüfung dieses Wertes deaktiviert wird.

Leere

Der Typ Void wird meist als Rückgabetyp einer Funktion verwendet, die nichts zurückgibt.

Syntax:

function testfunc():void{
 //code here
}

TypeScript Feld

An Feld in TypeScript ist ein Datentyp, in dem mehrere Werte gespeichert werden können. Lernen wir, wie man Arrays deklariert und ihnen Werte für Operationen zuweist. TypeScript.

Da TypeScript Da es sich um eine statisch typisierte Sprache handelt, muss der Datentyp der Werte in einem Array angegeben werden. Andernfalls werden sie als vom Typ „any“ behandelt.

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 with all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; // mixed

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

Verschiedene Möglichkeiten, auf Elemente aus einem Array zuzugreifen

Um die Elemente eines Arrays zu erhalten, beginnen die Werte bei Index 0 und enden bei der Länge des Arrays minus eins.

let years: Array<number> = [2016, 2017, 2018, 2019];
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 eines Arrays auch mithilfe eines Arrays abrufen. TypeScript für Schleife, Wie nachfolgend 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]);
}

Ausgang:

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]);
}

Ausgang:

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);
}

Ausgang:

2016
2017
2018
2019

Verwendung der forEach-Schleife

let years: Array<number> = [2016, 2017, 2018, 2019];
years.forEach(function(yrs, i) {
  console.log(yrs);
});

Ausgang:

2016
2017
2018
2019

TypeScript Array-Methoden

Das TypeScript Das Array-Objekt verfügt über zahlreiche Eigenschaften und Methoden, die Entwicklern die einfache und effiziente Arbeit mit Arrays ermöglichen. Den Wert einer Eigenschaft erhalten Sie mit `arrayname.property`, die Ausgabe einer Methode mit `arrayname.method()`.

Beispiel für die Längeneigenschaft

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

console.log(months.length);  // 12

Beispiel für die umgekehrte Methode

console.log(months.reverse());
// ["Dec","Nov","Oct","Sept","Aug","July","June","May","April","March","Feb","Jan"]

Beispiel für Sortiermethode

console.log(months.sort());
// ["April","Aug","Dec","Feb","Jan","July","June","March","May","Nov","Oct","Sept"]

Beispiel für die Pop-Methode

console.log(months.pop()); // Dec

Beispiel für die Shift-Methode

console.log(months.shift()); // Jan

Beispiel für Push-Methode

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
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 JavaSkript, also alles, was möglich ist in JavaScript ist auch möglich in TypeScriptDie Klasse ist ein Feature, das ab ES6 hinzugefügt wurde. JavaSkript- und klassenähnliche Funktionalität wurde durch die Verwendung einer Funktion mit Prototypmethoden zur Code-Wiederverwendung erreicht. Durch die Verwendung von Klassen kann Ihr Code Sprachen wie beispielsweise … ähneln. Java, C# und Python, wo Code leicht wiederverwendet werden kann.

Definieren einer Klasse in TypeScript

Hier ist die 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. Sie hat die Eigenschaften age, name und roll_no.

Konstrukteur in einem TypeScript Klasse

Die oben definierte Klasse Students hat einen Konstruktor, wie unten dargestellt:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

Die Konstruktormethode hat die Parameter Alter, Name und Matrikelnummer. Der Konstruktor initialisiert die Eigenschaften bei der Instanziierung der Klasse. Auf die Eigenschaften wird über die Methode zugegriffen. fehlen uns die Worte. Schlüsselwörter, zum Beispiel `this.age` für den Zugriff auf das Alter und `this.roll_no` für den Zugriff auf die Rollennummer. Sie können auch einen Standardkonstruktor verwenden, wie unten gezeigt:

constructor () {}

Methoden innerhalb eines TypeScript Klasse

In der Klasse Students sind Methoden definiert, zum Beispiel getRollNo(), getName() und getAge(), die die Werte der Eigenschaften roll_no, name und age zurückgeben.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

Erstellen einer Instanz einer Klasse in TypeScript

In TypeScriptUm eine Instanz einer Klasse zu erstellen, verwendet man den Operator `new`. Wenn Sie mit `new` eine Instanz erstellen, erhalten Sie ein 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

Zusammenstellen eines TypeScript Klasse bis JavaSkript

Sie können den unten gezeigten tsc-Befehl verwenden, um zu kompilieren. JavaSkript.

Command: tsc  Students.ts

Die Ausgabe der JavaDer Skriptcode nach 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 JavaIm Skript wird die Klasse in eine selbstaufrufende Funktion umgewandelt.

Klassenvererbung

Klassen können mit vererbt werden erweitert 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. Student erweitert Person, und das von Student erstellte Objekt kann sowohl auf seine eigenen Methoden und Eigenschaften als auch auf die der Klasse, von der es erweitert wird, zugreifen.

Nun fügen wir der obigen Klasse einige Änderungen hinzu.

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);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    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 Änderung gegenüber dem vorherigen Beispiel besteht in einem in der Klasse Student definierten Konstruktor. Dieser Konstruktor akzeptiert dieselben Parameter wie die Basisklasse sowie gegebenenfalls eigene zusätzliche Parameter.

In TypeScript Sie müssen `super` mit allen Parametern der Basisklasse aufrufen. Dies muss die erste Anweisung im Konstruktor sein, da `super` den Konstruktor der abgeleiteten Klasse ausführt. Jede von der abgeleiteten Klasse deklarierte Eigenschaft, wie z. B. `tmarks`, muss anschließend explizit zugewiesen werden, da `getMarks` sonst `undefined` zurückgibt.

Zugriffsmodifikatoren in TypeScript

TypeScript Unterstützt die Zugriffsmodifizierer public, private und protected für Ihre Methoden und Eigenschaften. Standardmäßig gilt die Methode oder Eigenschaft als öffentlich, wenn kein Zugriffsmodifizierer angegeben ist, und ist somit vom Objekt der Klasse aus leicht zugänglich.

Bei privaten Zugriffsmodifizierern sind die Member nicht für das Objekt der Klasse verfügbar und dürfen nur innerhalb der Klasse verwendet werden. Sie stehen einer abgeleiteten Klasse nicht zur Verfügung.

Bei geschützten Zugriffsmodifikatoren sind die Member nur innerhalb der Klasse und der abgeleiteten Klasse nutzbar und nicht vom Objekt der Klasse aus 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

Schnittstelle in TypeScript

Eine der Kernfunktionen von TypeScript Schnittstellen sind ein Regelwerk, das von der Entität, die sie implementiert, befolgt werden muss. Die Entität kann eine Klasse, Funktion oder Variable sein. Eine Schnittstelle besteht aus Eigenschaften und Methoden. Eigenschaften und Methoden können mit der Syntax „?“ als optional gekennzeichnet werden. Die Schnittstelle führt zu einer strengen Typüberprüfung für alle Funktionen, Variablen und Klassen, die sie implementieren.

Syntax einer Schnittstelle in TypeScript

interface Dimension {
    width: string;
    height: string;
}

Sie haben eine Schnittstelle namens Dimension definiert, die die Eigenschaften Breite und Höhe besitzt, die beide vom Typ String sind.

Dieses Interface kann nun durch eine Variable, eine Funktion oder eine Klasse implementiert werden. Hier ist ein Beispiel für eine Variable, die das Interface Dimension implementiert.

Ejemplo:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

Die Signatur der Schnittstelle Dimension enthält Breite und Höhe, die beide obligatorisch sind. Fehlt eine Eigenschaft oder wird ein Typ geändert, führt dies zu einem Kompilierfehler. JavaSkript.

Der obige Code, wenn kompiliert zu JavaDas Skript sieht wie folgt aus:

var _imagedim = {
    width: "100px",
    height: "200px"
};

Sehen wir uns nun an, wie man eine Schnittstelle mit einer Funktion verwendet.

Verwendung einer Schnittstelle als Rückgabetyp einer Funktion

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

Im obigen Beispiel wird das Interface Dimension als Rückgabetyp der Funktion getDimension() verwendet. Der Rückgabewert muss den im Interface deklarierten Eigenschaften und Typen entsprechen.

Die zusammengestellt JavaDer Skriptcode lautet wie folgt:

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 ausgelöst.

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"}); // "300px-250px"

Im obigen Beispiel haben Sie das Interface `Dimension` als Parameter für die Funktion `getDimension()` verwendet. Beim Aufruf der Funktion muss der übergebene Parameter den vom Interface definierten Regeln entsprechen.

Die zusammengestellt JavaDer Skriptcode lautet wie folgt:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Klasse, die eine Schnittstelle implementiert

Um eine Schnittstelle mit einer Klasse zu nutzen, müssen Sie das Schlüsselwort verwenden. implementiert.

Syntax für eine Klasse, die ein Interface implementiert:

class NameofClass implements InterfaceName {
}

Das folgende Beispiel zeigt eine Schnittstelle, die mit einer Klasse interagiert.

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 das Interface Dimension mit den Eigenschaften width und height, beide vom Typ string, und einer Methode namens getWidth() definiert, die einen String zurückgibt.

Die zusammengestellt JavaDer Skriptcode lautet wie folgt:

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 Abfolgen von Anweisungen, die zur Ausführung einer Aufgabe ausgeführt werden. JavaIm Skript ist der größte Teil des Codes in Form von Funktionen geschrieben, und diese spielen eine wichtige Rolle. TypeScript Es stehen zwar Klassen, Schnittstellen, Module und Namensräume zur Verfügung, aber Funktionen spielen weiterhin eine wichtige Rolle. Der Unterschied zwischen einer Funktion in JavaDrehbuch und TypeScript sind die Parameter- und Rückgabetypen, die mit einem verfügbar sind TypeScript Funktion.

JavaSkriptfunktion:

function add (a1, b1) {
   return a1+b1;
}

TypeScript Funktion:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

In der obigen Funktion lautet der Name der Funktion „add“, die Parameter sind a1 und b1Beide Parameter sind vom Typ Zahl, und auch der Rückgabetyp ist eine Zahl. Wenn Sie der Funktion einen String übergeben, wird beim Kompilieren ein Kompilierfehler ausgelöst. JavaSkript.

Aufruf der Funktion: add

let x = add(5, 10);   // will return 15
let b = add(5);       // error TS2554: Expected 2 arguments, but got 1
let c = add(3,4,5);   // error TS2554: Expected 2 arguments, but got 3
let t = add("Harry", "John");
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'

Die Parameter a1 und b1 Diese Angaben sind obligatorisch und führen zu einem Fehler, wenn sie fehlen. Parametertypen und Rückgabetyp sind gleichermaßen wichtig und können nach ihrer Definition nicht mehr geändert werden.

Optionale Parameter für eine Funktion

In JavaIm Skript sind alle Funktionsparameter optional und gelten als undefiniert, wenn sie nicht übergeben werden. Dasselbe gilt nicht in TypeScriptSobald Sie die Parameter definiert haben, müssen Sie diese angeben. Wenn ein Parameter optional sein soll, fügen Sie ein Fragezeichen hinter dem Parameternamen hinzu, wie unten gezeigt:

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John");              // returns Johnundefined
let b = getName("John", "Harry");     // returns JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3

Bitte beachten Sie, dass optionale Parameter zuletzt definiert werden müssen. Es ist nicht möglich, den ersten Parameter optional und den zweiten obligatorisch zu definieren, da der Compiler sonst nicht weiß, welcher Wert angegeben wurde.

Weisen Sie den Parametern Standardwerte zu

Sie können den Parametern Standardwerte zuweisen, wie unten dargestellt:

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 optionale Parameter müssen auch standardmäßig initialisierte Parameter am Ende der Parameterliste stehen.

Ruheparameter

Sie haben gesehen, wie TypeScript Es werden obligatorische, optionale und Standardwertparameter behandelt. Nun betrachten wir die Restparameter. Restparameter sind eine Gruppe optionaler Parameter, die gemeinsam definiert werden, mithilfe von drei Parametern. 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, ist der Restparameter ein Array, dem drei Punkte vorangestellt sind. Das Array enthält alle übrigen Argumente, die an die Funktion übergeben werden.

Ejemplo:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is MondayTuesdayWednesdayThursday

Pfeilfunktionen

Eine Pfeilfunktion ist eine der wichtigen Funktionen, die in ES6 veröffentlicht wurden, und ist verfügbar in TypeScript Auch. Die Syntax enthält einen dicken Pfeil, daher der Name.

Syntax der Pfeilfunktion:

var nameoffunction = (params) => {
 // code here
}

Wozu dient eine Pfeilfunktion?

Um den Anwendungsfall einer Pfeilfunktion zu verstehen, betrachten wir ein Beispiel.

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 Funktion mit einer Eigenschaft `score` erstellt, die mit 0 initialisiert ist, und eine Methode `getScore`, die intern `setTimeout` verwendet und nach einer Sekunde `this.score` protokolliert. Der protokollierte Wert ist `undefined`, obwohl `this.score` definiert und initialisiert ist. Das Problem liegt in der fehlen uns die Worte. Das Schlüsselwort. Die Funktion innerhalb von setTimeout hat ihr eigenes this, und da score darin nicht definiert ist, ist das Ergebnis undefiniert.

Dasselbe lässt sich mit einer Pfeilfunktion realisieren, wie unten gezeigt:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(() => {
            console.log(this.score);   // you get 0
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

Eine Pfeilfunktion hat keine eigene fehlen uns die Worte.Stattdessen wird die Variable aus dem übergeordneten Gültigkeitsbereich verwendet, sodass außerhalb deklarierte Variablen innerhalb einer Pfeilfunktion mit `this` zugänglich sind. Pfeilfunktionen sind aufgrund ihrer kürzeren Syntax sowie für Rückruffunktionen, Ereignisbehandler und Timing-Funktionen nützlich.

TypeScript Enums

A TypeScript Ein Enum ist ein Objekt, das eine Sammlung zusammengehöriger Werte enthält, die gemeinsam gespeichert sind. JavaScript unterstützt Enums nicht nativ. Die meisten Programmiersprachen wie z. B. Java, C und C++ Unterstützung von Enumerationen und TypeScript Dadurch werden sie auch verfügbar. Aufzählungen 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 ein Enum namens Directions mit den Werten North, South, East und West definiert. Die Werte sind ab 0 für den ersten Eintrag nummeriert und werden für jeden weiteren Eintrag um 1 erhöht.

Deklarieren Sie einen Enum mit einem numerischen Wert

Standardmäßig wird, wenn einem Enum-Element kein Wert zugewiesen wird, eine Zahl ab 0 angenommen. Das folgende Beispiel zeigt ein Enum mit expliziten numerischen Werten.

enum Directions {
North = 0,
South = 1,
East = 2,
West = 3
}

Sie können auch einen Startwert zuweisen, woraufhin die nachfolgenden Elemente inkrementierte Werte erhalten. Zum Beispiel:

enum Directions {
North = 5,
South, // will be 6
East,  // 7
West   // 8
}

Norden beginnt bei 5, Süden ist 6, Osten ist 7 und Westen ist 8.

Sie können anstelle der Standardwerte auch eigene Werte zuweisen. Zum Beispiel:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Wie greife ich auf eine Enum zu?

Das folgende Beispiel zeigt, wie man ein Enum in seinem Code verwendet:

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

Die zusammengestellt JavaDas Skript 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 JavaDas Skript unterstützt keine Enumerationen; der Compiler wandelt die Enumeration in eine selbstaufrufende Funktion um, wie oben gezeigt. Die doppelte Zuweisung erzeugt die umgekehrte Zuordnung.ping Von der Nummer zurück zum Namen.

Deklarieren Sie ein Enum mit einem String-Wert

Sie können beliebige Zeichenkettenwerte 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 undefined

Die zusammengestellt JavaDas Skript 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?

Dateien erstellt in TypeScript Globale Variablen haben Zugriff auf Variablen, die in einer Datei deklariert sind und somit auch in anderen Dateien verwendet werden können. Diese globale Natur kann zu Codekonflikten und Laufzeitproblemen führen. Mithilfe der Export- und Importfunktionen von Modulen lassen sich Konflikte mit globalen Variablen und Funktionen vermeiden. Diese Funktion wurde in [Version einfügen] eingeführt. JavaDas Skript ist mit der ES6-Version kompatibel und wird 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 test2.ts können Sie auf die Variable zugreifen. Alter Die in test1.ts definierte Datei muss wie folgt modifiziert werden:

age = 30; // changed from 25 to 30.
let _new_age = age;

Dies kann viele Probleme verursachen, da die Variablen global verfügbar sind und von überall aus verändert werden können.

Mit ModuleDer geschriebene Code bleibt lokal in der Datei und kann nicht von außerhalb abgerufen werden. Um Elemente einer Datei freizugeben, muss diese mit dem Schlüsselwort `export` exportiert werden. Export wird verwendet, wenn Sie möchten, dass eine Variable, Klasse, Funktion oder Schnittstelle in einer anderen Datei verwendet wird. Import Diese Methode wird verwendet, wenn Sie auf ein exportiertes Element zugreifen möchten. Dadurch bleibt der Code innerhalb der Datei intakt, und selbst wenn Sie dieselben Variablennamen definieren, werden diese nicht vermischt.

Verwenden von Export und Import

Es gibt viele Möglichkeiten zum Exportieren und Importieren. Wir werden die gebräuchlichste Syntax besprechen.

Die Syntax für Import und Export 1:

export  nameofthevariable or class name or interface name etc

//To import the above variable or class name or interface you have to use import as shown below:

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

Hier ist ein funktionierendes Beispiel für die Verwendung von Export und Import.

test1.ts

export let age: number = 25;

Das Schlüsselwort „export“ wird verwendet, um die Variable „age“ mit einer anderen Datei zu teilen.

test2.ts

import { age } from "./test1"
let new_age :number = age;

Das Schlüsselwort „import“ wird verwendet, um auf die Alter Variable, und Sie müssen den Dateispeicherort wie oben gezeigt angeben.

Syntax für Import und Export 2:

Es gibt noch eine weitere Möglichkeit zum Exportieren und Importieren, und die Syntax 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.

Hier ist ein praktisches Beispiel, das diesen Fall veranschaulicht.

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 funktionieren, daher benötigen Sie einen Modullader, um die Importabhängigkeiten zu finden, wie im folgenden Beispiel zu sehen ist: TypeScript Beispiele siehe oben. Als Modullader stehen CommonJS für Node.js und Require.js zur Ausführung im Browser zur Verfügung.

Um Code im CommonJS-Modulformat zu kompilieren, verwenden Sie folgenden Befehl:

tsc --module commonjs testCustomer.ts

Um Code im Requirejs-Modulformat zu kompilieren, verwenden Sie folgenden Befehl:

tsc --module amd testCustomer.ts

Die abhängigen Dateien werden mit dem oben genannten Befehl in JS-Dateien konvertiert.

Beispiel: testCustomer.ts wird mithilfe von RequireJS zu testCustomer.js.

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Beispiel: Konvertierung von 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 die Abhängigkeiten wie gezeigt referenziert.

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

Ein Namensraum fasst eine Sammlung von Klassen, Schnittstellen, Variablen und Funktionen in einer einzigen Datei zusammen.

Namespace-Syntax

namespace name{

export class {
}

export interface {
}

export const constname;

}

Der zugehörige Code ist unter einem Namespace 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 StudenteneinrichtungSie haben außerdem eine Schnittstelle StudDetails, eine Funktion addSpace und eine Klasse namens Student hinzugefügt.

Zugriff auf einen Namensraum

Im Folgenden finden Sie den Code, in dem Sie den Namespace verwenden. Studenteneinrichtung.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

Auf Klassen, Schnittstellen oder Funktionen innerhalb eines Namensraums muss über den Namensraumnamen verwiesen werden, zum Beispiel: StudentSetup.addSpace um auf die Funktion zuzugreifen und StudentSetup.Student um auf die Klasse zuzugreifen.

Sie können beide Dateien wie unten gezeigt zu einer einzigen JS-Datei kompilieren:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Überprüfen Sie die Ausgabe in der Eingabeaufforderung mit dem folgenden Befehl:

node namespace.js

Ausgang:

The name is :H a r r y

Umgebungsdeklarationen in TypeScript

TypeScript ermöglicht die Nutzung von Drittanbietern JavaSkriptdateien, die Umgebungsdeklarationen verwenden. Der Vorteil dieser Funktion besteht darin, dass Sie die Bibliothek nicht neu schreiben müssen und dennoch alle ihre Funktionen mit Typüberprüfung nutzen können. TypeScript.

Ambient-Syntax

So deklarieren Sie ein Umgebungsmodul:

declare module moduleName {
   //code here
}

Die Umgebungsdatei muss wie folgt gespeichert werden:

filename.d.ts

Um die Datei zu verwenden Dateiname.d.ts In Ihrer .ts-Datei müssen Sie darauf wie folgt verweisen:

/// <reference path="filename.d.ts"/>

Die Ambient-Typdeklaration in TypeScript verweist auf die Drittanbieterbibliothek und deklariert die benötigten Funktionen mit ihren eigenen Datentypen neu. Betrachten wir beispielsweise die kleine JavaDie Skriptbibliothek ist unten dargestellt.

Third Party JavaSkriptdatei: 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 die Funktionen isString, convertToUpperCase, convertToLowerCase und convertToStringBold besitzt.

Erstellen eines Ambient-Moduls in TypeScript

Nun erstellen wir ein Umgebungsmodul, das auf Folgendes verweist: JavaDas Skript führt die oben genannten Funktionen aus und fügt bei Bedarf Typüberprüfungen hinzu.

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 definieren ein Modul namens TestString und exportieren die Schnittstelle StringsFunc. Jede Signatur gibt an, was die Funktion akzeptiert und zurückgibt:

• isString(str: string): boolean Die Funktion nimmt eine Zeichenkette entgegen und gibt einen booleschen Wert zurück. Die Übergabe einer Zahl oder eines anderen Datentyps führt zu einem Kompilierfehler.
• convertToUpperCase(str: string): string – nimmt eine Zeichenkette entgegen und gibt eine Zeichenkette zurück.
• convertToLowerCase(str: string): string – nimmt eine Zeichenkette entgegen und gibt eine Zeichenkette zurück.
• konvertierenToStringBold(str: string): string – nimmt eine Zeichenkette entgegen und gibt eine Zeichenkette zurück.

Da der JavaDie Skriptdatei stellt den Objektnamen StringChecks bereit, wir verweisen schließlich in der .d.ts-Datei auf denselben Namen:

declare var StringChecks: TestString.StringsFunc;

Verwendung eines Ambient-Moduls in TypeScript

Hier ist die Datei test.ts, die die Umgebungsdatei tstring.d.ts verwendet.

/// <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 Sie mit tsc test.ts, um test.js zu erzeugen:

/// <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);

Sie können nun test.js in einer HTML-Datei zusammen mit der Bibliotheksdatei testString.js verwenden.

<html>
<head>
    <title>Test TypeScript Ambient</title>
    <script src="testString.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

Ausgang:

true
HELLO WORLD
hello
<b>Hello World</b>

Um fortzufahren, vergleichen Sie die beiden Sprachen direkt in TypeScript vs JavaSkript, erneut besuchen JavaSkript-Array-Methoden für die hier verwendeten nicht typisierten Äquivalente und studieren Schleifen in JavaSkript und intern und extern JavaSkript für die Browsergrundlagen, auf denen die kompilierte Ausgabe beruht.

Häufig gestellte Fragen