Erste Schritte mit TypeScript

In diesem Artikel erfahren wir, was TypeScript ist und wie man TypeScript in Projekten verwendet. Empfohlen: „js-Tutorial“

Was ist TypeScript?

● Typescript ist eine Obermenge von JavaScript, die in Pure kompiliert werden kann JavaScript.

● TypeScript wird von Microsoft entwickelt und gepflegt.

● TypeScript bietet eine statische Typprüfung für JavaScript-Code.

● TypeScript bietet benutzerfreundliche Fehler zur Kompilierungszeit.

Erste Schritte:

Wir können neue JavaScript-Funktionen und zukünftige Vorschläge in TypeScript verwenden.

Lassen Sie uns den Typescript-Compiler mit dem Node Package Manager (npm) installieren.

Führen Sie den folgenden Befehl aus, um den Typescript-Compiler auf Ihrem Computer zu installieren.

npm i -g typescript

Wenn Sie einen Mac verwenden, müssen Sie sudo vor dem Befehl hinzufügen.

Führen Sie den folgenden Befehl aus, um ein neues Verzeichnis auf Ihrem Computer zu erstellen.

mkdir learn-typescript
cd learn-typescript

Öffnen Sie nun den Ordner „learn-typescript“ in Ihrem bevorzugten Code-Editor und erstellen Sie eine neue Datei mit dem Namen dummy.ts.

.ts ist eine Typoskript-Erweiterung.

Schreiben unseres ersten TypeScript-Codes

Lassen Sie uns unseren ersten TypeScript-Code in Dummy-Code schreiben. ts-Datei.

dummy.ts

let dummy: string = "Hello Boss";

Im obigen Code haben wir eine Typanmerkungszeichenfolge hinzugefügt, sodass Dummy-Variablen die Übergabe einer Zeichenfolge nur dann zulassen, wenn wir versuchen, eine andere Zeichenfolge als eine Zeichenfolge wie eine Zahl oder ein Array zu übergeben.

Kompilieren Sie unseren TypeScript-Code

Lassen Sie uns den TypeScript-Code kompilieren, indem Sie den folgenden Befehl ausführen.

tsc dummy.ts #tsc : typescript compiler

Jetzt können Sie sehen, dass eine neue Datei namens dummy.js vom Typescript-Compiler generiert wurde und unseren reinen JavaScript-Code enthält.

Generieren wir den ersten Fehler, indem wir den falschen Wert an eine Dummy-Variable übergeben.

dummy.ts

rrree

Sehen Sie, dass der Typoskript-Compiler einen Fehler „333“ generiert, der der Zeichenfolge nicht zugewiesen werden kann?

Kommentar eingeben

Typanmerkungen bedeuten, dass wir einen Vertrag an eine Variable, Funktion oder ein Objekt übergeben, das einen bestimmten Typ nur dann akzeptiert, wenn wir versuchen, den falschen Typ zu übergeben.

TypeScript stellt uns verschiedene Typen zur Verfügung, von denen die meisten von JavaScript-Typen stammen.

String-Typ

Strings werden durch einfache Anführungszeichen (") oder doppelte Anführungszeichen ("") deklariert. Durch die Verwendung des String-Typs zitieren wir Zeichen im Typoskript-String-Datentyp. Beispiel:

let dummy: string = "Hello Boss";

dummy = 333

Number type Typnummer in TypeScript abrufen

let welcome:string = "welcome to reactgo.com"

// we can also use template strings in TypeScript

let name: string = `Gowtham`;

Boolescher Typ

Der boolesche Datentyp hat nur zwei Werte, das sind sie entweder true oder false in TypeScript, wir verwenden boolesche Werte.

let a: number = 1 ;

Array

In TypeScript gibt es zwei Möglichkeiten, Array-Typen zu akzeptieren

Auf den Elementtyp folgt array[].

let isActive: boolean = true;

Im obigen Code haben wir einen String-Typ [] mit Array hinzugefügt, sodass die Fruit-Variable nur Array mit String akzeptieren kann . 🎜> Die zweite Möglichkeit besteht darin, den generischen Array-Typ Array zu verwenden. Geben Sie eine feste Anzahl von Elementtypen für das Array an.

// fruits variable can only accept an array of string types.

let fruits:string[] = ['apples','apricots','avocados'];

Wir deklarieren ein Tupel aus drei Typen: Zeichenfolge, Zahl und Zeichenfolge haben ein Array fester Länge mit drei Typen.

let fruits:Array<string> = [&#39;apples&#39;,&#39;apricots&#39;,&#39;avocados&#39;];

// numbers variable can only accept array of numbers
let numbers:Array<number> = [1,2,3,4,5,6,7,8];

Ausgabe:

jeder Typ

Manchmal haben wir Wir sind uns nicht sicher, welche Datentypen wir in diesem Fall erhalten können.

// we declared a tuple
let user:[string,number,string];
// intializing the values
user = ['baby',33,'programming']; // TypeScript is happy now

Verwendung des Typs „Any“ in einem Array Sicher, was wir bekommen könnten. Welche Art von Daten zum Benutzerarray

Sehen wir uns an, wie man einer Funktion einen Typ hinzufügt 🎜>Hier fügen wir einer Funktion einen Parameter und Rückgabetypnummern hinzu.

Wir können den Rückgabetyp der Funktion überlassen, da Typescript den Rückgabetyp automatisch anhand der Rückgabe ermitteln kann Anweisung der Funktion.

Lassen Sie uns eine vollständige typisierte Funktion erstellen, da wir im obigen Code gerade eine Funktion mit dem Typ

// we declared a tuple
let user:[string,number,string];
// intializing the values
user = ['baby',33,'programming']; // TypeScript is happy now
//re intializing with wrong values
user = [33,'baby',1]; // Error

erstellt haben Typ der Add-Funktion. 🎜> Optionale und Standardparameter in Funktionen

Wenn in Typescript kein Parameter übergeben wird, gibt Typescript einen Fehler aus, grundsätzlich gibt uns jeder Parameter einen Fehler.

Um einen Funktionsparameter optional zu machen, müssen wir am Ende des Parameters ? hinzufügen.

Beispiele für optionale Parameter

在上面的代码中，我们精确地指定了add函数的类型。

function welcome(name: string, age?: number): string {
    if (name && age) {
        return `Welcome ${name} and ${age}`
    } else {
        return `Welcome ${name}`
    }
}
welcome('gowtham') // ok
welcome('gowtham',22) // ok
welcome('gowtham',22,'lol') // error Expected 1-2 arguments, but got 3

在上面的代码中，我们添加了?在age参数的末尾，使其成为可选的。

默认参数的例子

function getLength(arr: number[], length = arr.length) {
    return length
}
getLength([1,2,3,4,5])

void类型

void表示没有返回任何类型，例如，不返回任何类型值的函数。

function alertHello():void{
    alert('Hello')
}

alertHello 函数不返回任何值。

never类型

never是函数的返回类型，箭头函数总是抛出异常。

一个永远达不到端点的函数

// throw an exception
function error(err:string):never{
     throw new Error(err);
}
// while loop never stops
function infinteLoop():never{
   while(true){
   }
}

接口

接口有助于我们设计特定的数据形状。

现在让我们创建一个接口。

interface User {
    name: string
    active: boolean
}
let user: User = {
    name: "gowtham",
    active: true
}

在上面的代码中，我们创建了一个具有两个属性的界面用户，其中name属性类型为string, active属性类型为boolean。

现在用户对象应该总是满足接口的形状。

我们还可以使用extends关键字来扩展接口。

interface User {
    name: string
    active: boolean
}
// extending the User interface
interface AdminUser extends User {
    id: string
}
let user: User = {
    name: "gowtham",
    active: true
}
// admin object  should have properties
//present in User interface + AdminUser interface
let admin: AdminUser = {
    name: "john",
    active: true,
    id: "3232hejdjdjf"
}

在这里，我们通过扩展用户界面创建了一个AdminUser界面，因此现在admin对象形状应该是用户界面和AdminUser界面的组合

枚举

枚举是使用enum关键字创建的一组命名常量。在TypeScript中，我们有字符串枚举和数字枚举。

数字枚举

enum Day {
    Monday,
    Tuesday,
    Wednesday
};
console.log(Day.Monday) // 0
console.log(Day.Tuesday) //1
console.log(Day.Wednesday) //2

我们已经创建了一个数值枚举日，默认情况下，第一个枚举数应该用值0初始化，然后自动将下一个枚举数增加1，比如Monday:0，Tuesday:1，Wednesday:2。

字符串枚举

enum Colors{
     Red = "#FF0000",
     Green= "#008000",
     Blue = "#0000FF"
}

在字符串枚举中，我们需要初始化一个常量值，就像上面的代码一样，我们创建了一个Colors带有三个枚举器的枚举。

Das obige ist der detaillierte Inhalt vonErste Schritte mit TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!