Teilen Sie 13 grundlegende Syntax von Typescript

1. Was ist Ts

Erstens erlaubt die starke Typisierung keine beliebigen impliziten Typkonvertierungen, während die schwache Typisierung diese erlaubt. JavaScript ist eine klassische schwach typisierte Sprache. Man kann sagen, dass Typescript eine Obermenge von JavaScript ist. Es fügt viele auf JS basierende Syntaxfunktionen hinzu, sodass Typen nicht mehr beliebig konvertiert werden können, was Fehler in der Entwicklungsphase erheblich reduzieren kann.

2. Grundlegende Grammatik

1. Deklarieren Sie primitive Datentypen

Geben Sie nach der Variable ein Schlüsselwort an, um anzugeben, welchen Typ sie haben kann.

Zeichenfolgentyp:

const a: Zeichenfolge = "Aurora"

Nummerntyp:

const b: Zahl = 666 // einschließlich NAN Infinity

Boolescher Typ:

const c: boolean = true

Nulltyp:

const d: null = null

undefinierter Typ:

const e: undefiniert = undefiniert

Symboltyp:

const h: symbol = Symbol()

2. Objekttyp deklarieren

Zunächst einmal kann der Objekttyp nicht nur Objekte, sondern auch Arrays oder Funktionen angeben:

const foo1: Objekt = {};
const foo2: Objekt = [];
const foo3: Objekt = Funktion(){};

Möchte man es lediglich als Objekt spezifizieren, muss man vorab wie folgt den Typ der Objektattribute deklarieren:

const obj: {name: string, age: number} = {
    Name: 'Nordlichter',
    Alter:18
}

2.1 Deklarieren von Array-Typen

Sie können ein Array deklarieren und den Elementtyp durch <> angeben, um beispielsweise ein Array zu deklarieren, bei dem alle Elemente Zahlen sind:

const arr: Array<Zahl> = [1,2,3]

Die zweite Möglichkeit ist die folgende, bei der ebenfalls festgelegt wird, dass die Array-Elemente alle Zahlen sind:

const arr: Zahl[] = [1,2,3]

2.2 Deklarieren von Tupeltypen

Dabei wird der Typ jedes Elements im Array im Voraus angegeben, es besteht eine strikte Eins-zu-eins-Entsprechung:

const tuple: [Zahl,Zeichenfolge,Boolescher Wert] = [666,'auraros',true]

3. Aufzählungstyp deklarieren

Ein Aufzählungstyp wird mit dem Schlüsselwort enum deklariert, beispielsweise:

Aufzählungsstatus {
    pedding = 1,
    Entschlossenheit = 2,
    ablehnen = "3"
}
//Zugriff auf console.log(Status.pedding);

Wenn kein Wert geschrieben wird, beginnt der Standardwert bei 0 und erhöht sich. Wenn das erste Element vom Zeichentyp ist, muss der Wert vollständig definiert sein. Wenn das erste Element als Zahl angegeben ist und für die folgenden Elemente kein Wert geschrieben wird, ergibt sich der Wert aus der Erhöhung des Wertes des ersten Elements um die Position.

4. Funktionsparameter und Rückgabetypen

Funktionsdeklaration:

Geben Sie den eingehenden Parametertyp und den Rückgabewerttyp der Funktion an. Anzahl und Typ der übergebenen Parameter müssen beim Aufruf identisch sein:

Der Typ jedes Parameters wird in den Klammern angegeben, und der Typ des Rückgabewerts wird auf der rechten Seite der Klammern angegeben.

Funktion Spaß (Name:Zeichenfolge,Alter:Zahl):Zeichenfolge{
  gib 'sss' zurück
}
Spaß('Polarlichter',18);

Wenn Sie nicht sicher sind, ob Sie den Parameter übergeben sollen, können Sie ein '?' hinzufügen. ' gibt an, dass es optional ist:

Funktion Spaß (Name:Zeichenfolge,Alter?:Zahl):Zeichenfolge{
  gib 'sss' zurück
}
Spaß('Polarlichter');

Oder fügen Sie dem Parameter einen Standardwert hinzu, der dann ebenfalls optional wird:

Funktion Spaß (Name:Zeichenfolge,Alter:Zahl=666):Zeichenfolge{
  gib 'sss' zurück
}
Spaß('Polarlichter');

Wenn die Anzahl der Parameter unsicher ist, können Sie zur Darstellung den Spread-Operator plus Dekonstruktionszuweisung verwenden. Natürlich müssen Sie denselben Typ wie den angegebenen übergeben:

Funktion fun (Name:Zeichenfolge,Alter:Zahl=666,...Res:Zahl[]):Zeichenfolge{
  gib 'sss' zurück
}
Spaß('Polarlichter',1,2,3);

Funktionsausdruck:

const fun2:(Name:Zeichenfolge,Alter:Zahl)=>Zeichenfolge = Funktion(Name:Zeichenfolge,Alter:Zahl){
  gib 'sss' zurück
}

Dies werden wir bei der Definition der Schnittstelle genauer erläutern.

5. Jeder Typ

Indem Sie das Schlüsselwort any angeben, um einen beliebigen Typ darzustellen, können Sie genau wie im ursprünglichen js nach Belieben Werte unterschiedlicher Typen zuweisen:

sei num:any = 1;
Zahl = "a";
Zahl = wahr;

6. Typbehauptungen

Durch die Typzusicherung wird typescript explizit mitgeteilt, dass diese Variable von einem bestimmten Typ ist, und zwar mit 100-prozentiger Sicherheit. Ohne typescript müssen Sie in einigen Fällen den Typ einiger undefinierter oder veränderbarer Szenarien erschließen.

Sie können „as + type“ verwenden, um zu bestätigen, dass es sich um einen bestimmten Typ handelt:

Konstante res = 1;
const num = res als Zahl;

Sie können auch die folgende Behauptung im <type>-Format aufstellen (nicht empfohlen):

Konstante res = 1;
const num = <Zahl>res

7. Grundlegende Verwendung der Schnittstelle

Eine Schnittstelle kann als eine Spezifikation, ein Vertrag verstanden werden. Sie können einschränken, welche Mitglieder ein Objekt haben soll und wie diese Mitglieder beschaffen sind.

Definieren Sie eine Post-Schnittstelle über interface . Diese Schnittstelle ist ein Objekt. Die Regel ist, dass es ein name vom Typ Zeichenfolge und ein Altersattribut vom Typ Zahl gibt.

Schnittstelle Post {
    Name: Zeichenfolge;
    Alter:Anzahl
}

Wenn es beispielsweise eine Funktion printPost gibt, verwendet ihr Parameter post die Regeln der von uns definierten Post-Schnittstelle. Beim Aufruf dieser Funktion müssen Sie Daten übergeben, die den Regeln der Post-Schnittstelle entsprechen.

Schnittstelle Post {
    Name: Zeichenfolge;
    Alter:Anzahl
}

Funktion printPost(Beitrag: Beitrag){
    Konsole.log(Beitrag.Name);
    Konsole.log(Post.Alter);
}
Beitrag drucken({name:'asd',age:666})

Natürlich können einige Parameter bei der Übergabe von Parametern an eine Funktion optional sein. Daher können wir auch optionale Mitglieder für die Schnittstelle definieren, indem wir nach dem Attribut ein „?“ hinzufügen. 'Optionale Mitglieder angeben:

Schnittstelle Post {
    Name: Zeichenfolge;
    Alter:Anzahl;
    Geschlecht?:Zeichenfolge;
}

const auroras:Post = {
    Name: „asd“,
    Alter: 18
}

Wenn Sie ein Mitglied mit schreibgeschützt ändern, kann die Mitgliedereigenschaft nach der Initialisierung nicht mehr geändert werden:

Schnittstelle Post {
    Name: Zeichenfolge;
    Alter:Anzahl;
    Geschlecht?:Zeichenfolge;
    schreibgeschützt wie: Zeichenfolge 
}

const auroras:Post = {
    Name: „asd“,
    Alter: 18,
    wie: 'natrue'
}
auroras.name = "aaaa";
//Garantierter Fehler auroras.like = 'wind';

Wenn Sie sich hinsichtlich des Mitgliedsattributnamens nicht sicher sind, können Sie ein dynamisches Mitglied deklarieren und den Mitgliedsnamentyp und den Mitgliedswerttyp angeben, beispielsweise:

Schnittstelle Post {
  [Eigenschaft:Zeichenfolge]:Zeichenfolge
} 
const auroras:Post = {
    Name: „asd“,
    wie: 'natrue'
}

8. Grundlegende Verwendung von Klassen

Beschreibt die abstrakten Eigenschaften einer bestimmten Klasse von Dingen. ts verbessert die class Syntax in es6 .

Zunächst müssen die Attribute der Klasse vor der Verwendung deklariert werden:

Klasse Person {
    Name: Zeichenfolge;
    Alter: Anzahl;
    Konstruktor(Name:Zeichenfolge,Alter:Zahl){
       dieser.name = Name;
       dieses.Alter = Alter;
    }
    sagHallo(msg:string):void {
        console.log(`hallo,${msg},ich bin ${this.name}`);
    }
}

9. Klassenzugriffsmodifikatoren

private ändert private Eigenschaften und kann nur innerhalb der Klasse aufgerufen werden. public ändert öffentliche Attribute (Standard),

Der Zugriff ist auch von außen möglich:

Klasse Person {
  öffentlicher Name: Zeichenfolge;
  privates Alter: Anzahl;
  Konstruktor(Name:Zeichenfolge,Alter:Zahl){
       dieser.name = Name;
       dieses.Alter = Alter;
    }
  sagHallo(msg:string):void {
        console.log(`hallo,${msg},ich bin ${this.name}`);
        Konsole.log(dieses.Alter);
    }
}

const jack = neue Person('jack',20);
//Auf öffentliche Eigenschaften der Personenklasse kann zugegriffen werden console.log(jack.name);
//Auf private Eigenschaften der Personenklasse kann nicht zugegriffen werden console.log(jack.age);
protected ändert es in geschützt und ein Zugriff von außen ist nicht möglich. Der Unterschied zu „privat“ besteht jedoch darin, dass geerbte Unterklassen darauf zugreifen können.

Klasse Person {
  öffentlicher Name: Zeichenfolge;
  privates Alter: Anzahl;
  // geschützt
  geschütztes Geschlecht: Boolesch;
    Konstruktor(Name:Zeichenfolge,Alter:Zahl){
       dieser.name = Name;
       dieses.Alter = Alter;
       dieses.Geschlecht = wahr;
    }
    sagHallo(msg:string):void {
        console.log(`hallo,${msg},ich bin ${this.name}`);
        Konsole.log(dieses.Alter);
    }
}

Klasse Kinder erweitert Person { 
    Konstruktor(Name:Zeichenfolge,Alter:Zahl){
        super(Name,Alter,);
        //Kann auf console.log(this.gender) zugreifen;
    }
}

10. Nur-Lese-Eigenschaften der Klasse

Wenn Sie für eine Eigenschaft readonly festlegen, wird sie zu einer schreibgeschützten Eigenschaft und kann nach der Initialisierung nicht mehr geändert werden.

Klasse Person {
  öffentlicher Name: Zeichenfolge;
  privates Alter: Anzahl;
  // schreibgeschützt
  geschütztes schreibgeschütztes Geschlecht: Boolesch;
    Konstruktor(Name:Zeichenfolge,Alter:Zahl){
       dieser.name = Name;
       dieses.Alter = Alter;
       dieses.Geschlecht = wahr;
    }
    sagHallo(msg:string):void {
        console.log(`hallo,${msg},ich bin ${this.name}`);
        Konsole.log(dieses.Alter);
    }
}

11. Klassen und Schnittstellen

Einige Klassen haben einige gemeinsame Funktionen, die in Schnittstellen abstrahiert werden können.

Beispielsweise sind Person und die Klasse „Animal“ unterschiedliche Klassen, aber sowohl Menschen als auch Tiere essen und gehen, und diese gemeinsamen Merkmale können durch Schnittstellen definiert werden. Das letzte Feature definiert eine Schnittstelle.

//Essen Schnittstelle Schnittstelle Essen {
    essen(Nahrung:Zeichenfolge):leer
}
//Schnittstelle ausführen Schnittstelle Ausführen {
    ausführen (Verhalten: Zeichenfolge): void
}
//Klasse Menschen implementiert Eat,Run {
    essen(Essen: Zeichenfolge){
       console.log(`Iss ${food} auf dem Tisch`);
    }
    ausführen(Verhalten:Zeichenfolge){
       console.log(`Stehendes ${behavior}`);
    }
}
//Tierklasse Tier implementiert Essen, Laufen {
    essen(Essen: Zeichenfolge){
       console.log(`iss ${food} auf dem Boden`);
    }
    ausführen(Verhalten:Zeichenfolge){
       console.log(`crawlt ${behavior}`);
    }
}

12. Abstrakte Klasse

Die Einschränkung von Unterklassen auf bestimmte Mitglieder ähnelt einer Schnittstelle, mit dem Unterschied, dass abstrakte Klassen bestimmte Implementierungen enthalten können. Beispielsweise sollte die Tierklasse eine abstrakte Klasse sein und ihre Unterklassen umfassen Katzen, Hunde, Pandas usw. Sie sind alle Tiere und haben einige gemeinsame Merkmale. Nachdem eine Klasse als abstrakte Klasse definiert wurde, können keine neuen Instanzen mehr erstellt werden und sie kann nur noch an ihre Unterklassen vererbt werden.

Abstract definiert eine abstrakte Klasse und wird verwendet, um eine abstrakte Methode in der Klasse zu definieren. Unterklassen müssen die abstrakte Methode implementieren.

abstrakte Klasse Tier {
    essen(Essen: Zeichenfolge){
       console.log(`iss ${food} auf dem Boden`);
    }
    abstrakter Lauf (Verhalten:Zeichenfolge):leer
}
//Katze Klasse Hund erweitert Tier {
    ausführen(Verhalten:Zeichenfolge):void{
        console.log(Verhalten);
    }
}
const d1 = neuer Hund();
d1.essen('Knochen')
d1.run('auf vier Beinen krabbeln') 
//Kaninchen Klasse Kaninchen erweitert Tier {
    ausführen(Verhalten:Zeichenfolge):void{
        console.log(Verhalten);
    }
}
const r1 = neues Kaninchen();
d1.eat('Rettich')
d1.run('springen') 

13. Generika

Generika bedeuten, dass beim Definieren einer Funktion, Schnittstelle oder Klasse kein spezifischer Typ angegeben wird, der spezifische Typ jedoch bei der Verwendung angegeben wird. Code weitgehend wiederverwenden.

Beispielsweise gibt es eine identity , die jeden ihr übergebenen Wert zurückgibt. Der übergebene Typ sollte mit dem zurückgegebenen Typ übereinstimmen. Wenn Sie eine Nummer ohne Generika eingeben,

Diese Funktion könnte wie folgt aussehen:

 Funktion Identität(Argument:Zahl):Zahl{
     Rückgabeargument
 }
Wenn eine Zeichenfolge übergeben wird, kann die Funktion folgendermaßen aussehen:

 Funktionsidentität (Argument: Zeichenfolge): Zeichenfolge {
     Rückgabeargument
 }
Dies ist zu umständlich, daher können Sie Generika verwenden, die im Allgemeinen durch ein großes T dargestellt werden. Generika können auf mehrere Typen angewendet werden und der eingehende Typ und der Rückgabetyp sind identisch.

 Funktion Identität<T>(arg:T):T{
     Rückgabeargument
 }
 

Dies ist das Ende dieses Artikels über die Weitergabe der 14 grundlegenden Syntax von Typescript. Weitere Informationen zu den 14 grundlegenden Syntax von Typescript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!