Klassen in TypeScript

Klassen in TypeScript

1. Übersicht

Das Konzept der Klasse ist ein Konzept, das grundsätzlich alle objektorientierten Programmiersprachen haben, wie etwa Java und Python . In JavaScript gab es vor ES6 kein Konzept der Klasse, was für Programmierer, die mit objektorientierter Programmierung vertraut sind, etwas knifflig ist, da sie alle klassenbasierte Vererbung verwenden und Objekte durch Klassen erstellt werden. Das Konzept der Klasse wurde in ES6 hinzugefügt. Obwohl es nur eine syntaktische Vereinfachung ist, ermöglicht es Programmierern, auf der Grundlage von Klassen zu arbeiten. Das Klassenkonzept wird auch in TS unterstützt.

2. Definieren Sie eine einfache Klasse

In TS wird das Schlüsselwort class auch zum Definieren einer Klasse verwendet. Der Beispielcode lautet wie folgt:

;(Funktion () {
  // Klasse definieren class Person {
    // Öffentliche Attribute, können standardmäßig weggelassen werden öffentlicher Name: Zeichenfolge
    // Konstruktor Konstruktor(Name: Zeichenfolge) {
      // Initialisiere die Namenseigenschaft this.name = name
    }
  }
  //Klasse instanziieren const person = new Person('Yiwan Zhou')
  Konsole.log(Person.Name) // Yiwan Zhou})()

Die oben definierte Klasse hat einen Konstruktor und einen öffentlichen Attributnamen. Wenn die Klasse instanziiert wird, wird der Konstruktor aufgerufen, um die funktionalen Attribute zu initialisieren.

Es gibt auch eine Kurzform des oben genannten, wie unten gezeigt:

;(Funktion () {
  Klasse Person {
    Konstruktor (öffentlicher Name: Zeichenfolge) {}
  }
  //Klasse instanziieren const person = new Person('Yiwan Zhou')
  Konsole.log(Person.Name) // Yiwan Zhou})()

Dies entspricht dem obigen.

3. Vererbung

Eines der wichtigsten Merkmale objektorientierter Programmiersprachen ist die Vererbung. Vererbung dient der Erweiterung einer bestehenden Klasse auf Basis einer bestimmten Klasse.

Wenn beispielsweise ein Vater ein Hofhaus in Peking besitzt, kann sein Sohn das Hofhaus seines Vaters erben und zusätzlich für sich selbst eine Villa kaufen; am Ende besitzt der Sohn ein Hofhaus und eine Villa in Peking.

In TS wird für die Vererbung das Schlüsselwort extends verwendet. Der Beispielcode lautet wie folgt:

;(Funktion () {
  // Definieren Sie eine Basisklasse, auch Superklasse genannt class Person {
    // Definieren Sie eine Namenseigenschaft im Konstruktor der Basisklasse (öffentlicher Name: Zeichenfolge) {}
  }
  // Definieren Sie eine abgeleitete Klasse, auch Unterklasse genannt, die von der Basisklasse erbt class Programmer extends Person {
    Konstruktor(Name: Zeichenfolge, öffentliches Hobby: Zeichenfolge) {
      // Rufen Sie den Basisklassenkonstruktor super(name) über super auf
    }
  }
  // Unterklasse instanziieren const programmer = new Programmer('Programmierer', 'coding')
  console.log(programmer.name, programmer.hobby) // Eine Schüssel wöchentliches Coding
})()

Im obigen Beispielcode wird Person als Basisklasse oder Superklasse bezeichnet und Programmer ist eine abgeleitete Klasse oder Unterklasse.

Im obigen Beispiel erbt Programmer von Person mithilfe des Schlüsselworts extends . Die Unterklasse verfügt über alle Eigenschaften und Methoden der übergeordneten Klasse.

Im Konstruktor der Unterklasse müssen wir die Methode super() aufrufen, um den Konstruktor der Basisklasse auszuführen. Das ist notwendig.

Durch die Klassenvererbung können Sie nicht nur Klassen erben, sondern auch die Eigenschaften oder Methoden der übergeordneten Klasse in der untergeordneten Klasse überschreiben. Der Beispielcode lautet wie folgt:

//Definiere eine Personenklasse class Person {
    Konstruktor (öffentlicher Name: Zeichenfolge) {}
    //Definiere eine Methode sayMy() {
        console.log(`Mein Name: ${this.name}`)
    }
}
// Definieren Sie eine Erwachsenenklasse, die von der Personenklasse erbt class Adult extends Person {
    Konstruktor(öffentliches Alter: Zahl) {
        super('die andere Seite ist wohlhabend')
    } // Überschreibe die Methode der übergeordneten Klasse sayMy() {
        console.log(`Mein Name: ${this.name} Alter: ${this.age}`)
    }
}
// Definieren Sie eine Programmierer-Klasse, die von der Erwachsenen-Klasse erbt class Programmer extends Adult {
    Konstruktor(öffentliches Hobby: Zeichenfolge) {
        super(18)
    } // Überschreibe die Methode der übergeordneten Klasse sayMy() {
        konsole.log(
            `Mein Name: ${this.name} Alter: ${this.age} Hobby: ${this.hobby}`
        )
    }
}
// Klasseninstanzierung const programmer = new Programmer('coding')
programmer.sayMy() // Mein Name: Bi'an Fanhua Alter: 18 Hobbys: Programmieren

Zuerst haben wir eine Person definiert, die ein Attribut und eine Methode in der Klasse definiert hat; dann haben wir eine Adult definiert, die von der Personenklasse erbt und die Methoden in Person überschreibt; schließlich haben wir eine Programmer definiert, die von Adult erbt und die Methoden in der Erwachsenenklasse überschreibt. Das heißt, Programmer hat alle Attribute und Methoden der Personenklasse und der Erwachsenenklasse, aber die Methode sayMe() wurde zweimal überschrieben, was bedeutet, dass Programmer 3 Attribute und 1 Methode hat.

4. öffentliche, private und geschützte Modifikatoren

Der Unterschied zwischen öffentlichen, privaten und geschützten Modifikatoren:

  • public : Öffentlich, wir können frei auf die in der Klasse definierten Mitglieder zugreifen. TS ist standardmäßig public
  • private : privat, auf in der Klasse definierte Mitglieder kann nur innerhalb der Klasse zugegriffen werden, nicht außerhalb der Klasse
  • protected : geschützt, auf in dieser Klasse oder ihren Unterklassen definierte Mitglieder kann zugegriffen werden.

Der Beispielcode lautet wie folgt:

// Definieren Sie eine Personenklasse, die öffentliche, private und geschützte Mitglieder enthält.
Klasse Person {
  öffentlicher Name: Zeichenfolge
  // Es besteht allgemein Einigkeit darüber, dass private Mitglieder mit _ private _age: number beginnen.
  geschütztes Hobby: Schnur
  // Initialisierungskonstruktor der Eigenschaft (Name: Zeichenfolge, Alter: Zahl, Hobby: Zeichenfolge) {
    dieser.name = Name
    this._age = Alter
    dieses.hobby = hobby
  }
  sagMein() {
    console.log(dieser.Name, dieses._Alter, dieses.Hobby)
  }
}

// Instanziieren Sie die Klasse „Person“ const person = new Person('Person', 18, 'coding')

console.log(person.name) // Zurück zur Klasse//Der Zugriff auf private Member außerhalb der Klasse löst eine Ausnahme aus// console.log(person._age) // Fehler melden//Der Zugriff auf geschützte Member außerhalb der Klasse löst eine Ausnahme aus// console.log(person.hobby) // Fehler melden//Auf private und geschützte Member kann innerhalb der Klasse zugegriffen werden person.sayMy() // Zurück zur Klasse18 Codierung

// Definiere eine Klasse die von der Klasse Person erbt class Programmer extends Person {
  Konstruktor(Name: Zeichenfolge, Alter: Zahl, Hobby: Zeichenfolge) {
    super(Name, Alter, Hobby)
  }
  sagMein() {
    console.log(this.name) // Fehlerbericht// Auf private Member der Elternklasse kann in der Unterklasse nicht zugegriffen werden // console.log(this._age) // Fehlerbericht// Auf geschützte Member kann in der Unterklasse zugegriffen werden console.log(this.hobby) // coding
  }
}

// Instanziieren Sie die Klasse „Programmer“ const programmer = new Programmer('Programmierer', 18, 'coding')
programmierer.sayMy()

// Stellen Sie sicher, dass kein Konflikt mit Mitgliedern in anderem Code auftritt. Export {}

Wie im obigen Code gezeigt, können wir in der Basisklasse auf öffentliche Mitglieder, private Mitglieder und geschützte Mitglieder zugreifen, außerhalb der Klasse können wir jedoch nur auf öffentliche Mitglieder zugreifen. Wenn wir eine Unterklasse definieren, die von der Klasse Person erbt, können wir auf geschützte Mitglieder in der Unterklasse zugreifen, aber nicht auf private Mitglieder.

4.1Getter und Setter

Wir können private und geschützte Mitglieder einer Klasse lesen und schreiben. TS bietet getters und setters , mit denen wir den Zugriff auf Objektmitglieder effektiv steuern können.

Der Beispielcode lautet wie folgt:

//Definiere eine Personenklasse class Person {
  // Es wird vereinbart, dass private Mitglieder normalerweise mit _ private _name: string beginnen
  // Initialisierungskonstruktor der Eigenschaft (Name: Zeichenfolge) {
    dieser._name = Name
  }
  // Den privaten Wert des Attributs _name abrufen get getName(): string {
    gib dies zurück._name
  }
  // Setze den privaten _name-Eigenschaftswert set setName(name: string) {
    dieser._name = Name
  }
}
// Instanziieren Sie die Klasse const person = new Person('eine Schüssel Haferbrei')
// Mit getName abrufen console.log(person.getName) // Eine Schüssel Haferbrei // Den Wert von _name mit setName festlegen person.setName = 'Eine Schüssel Haferbrei'
// Console.log(person.getName) erneut abrufen // Yiwan Zhou

5. Nur-Lese-Modifikator

Mit dem Modifikator readonly können wir eine Eigenschaft schreibgeschützt machen. Schreibgeschützte Eigenschaften müssen bei der Deklaration oder in einem Konstruktor initialisiert werden.

Der Beispielcode lautet wie folgt:

// Definieren Sie eine Klasse mit einem schreibgeschützten Attribut class Person {
  // schreibgeschützter Name: Zeichenfolge
  // entspricht // öffentlichem schreibgeschütztem Namen: Zeichenfolge
  // Konstruktor(Name: Zeichenfolge) {
  // dieser.name = Name
  // }
  // oder Konstruktor (öffentlicher schreibgeschützter Name: Zeichenfolge) {}
}
// Instanziierung const person = new Person('Person')
console.log(person.name) // person.name// Wert von „name“ ändern// person.name = „person.name“ // Fehler! „name“ ist schreibgeschützt.

6. Statische Mitglieder

In TS können wir auch statische Mitglieder erstellen. Diese Eigenschaften oder Methoden existieren in der Klasse selbst und nicht in der Instanz der Klasse. Das Definieren statischer Mitglieder in TS ist dasselbe wie in ES6, beide verwenden zur Anzeige das Schlüsselwort static .

Der Beispielcode lautet wie folgt:

Klasse Held {
  // Zähler statisch count = 0
  Konstruktor (öffentlicher Name: Zeichenfolge) {
    // Jedes Mal eine Eigenschaftsanzahl erstellen ++
    ++Heldenzahl
  }
}
// Instanziieren Sie eine Heldenklasse const hero1 = new Hero('Sun Wukong')
konsole.log(Hero.count) // 1
const hero2 = neuer Held('Nezha')
Konsole.log(Hero.count) // 2

Hier verwenden wir statische Eigenschaften, um einen Zähler zu implementieren, der mehrere instanziierte Klassen aufzeichnet.

7. Abstrakte Klasse

Um zu verstehen, was eine abstrakte Klasse ist, müssen Sie zunächst verstehen, was Abstraktion ist. Die sogenannte Abstraktion besteht darin, gemeinsame und wesentliche Merkmale aus vielen Dingen zu extrahieren und ihre nicht wesentlichen Merkmale zu verwerfen. Beispielsweise haben Äpfel, Bananen, rohe Birnen, Weintrauben, Pfirsiche usw. alle das gemeinsame Merkmal, dass es sich um Früchte handelt. Der Prozess der Entwicklung des Fruchtbegriffs ist ein abstrakter Prozess.

Eine abstrakte Klasse extrahiert die gemeinsamen Funktionen aus vielen Klassen und erstellt eine separate Klasse, die als Basisklasse für andere abgeleitete Klassen verwendet werden kann. Sie dürfen nicht instanziiert werden und abstrakte Klassen werden mit dem Schlüsselwort abstract definiert.

Eine abstrakte Methode hat nur die Definition der Methode, aber keinen Methodenkörper. Der Methodenkörper muss in der Unterklasse implementiert werden.

Der Beispielcode lautet wie folgt:

// Verwenden Sie das Schlüsselwort abstract, um eine abstrakte Klasse zu definieren, die nicht initialisiert werden muss und nur als Basisklasse verwendet wird. abstract class Department {
  // Initialisieren Sie das Namenselement, Parameterattributkonstruktor (öffentlicher Name: Zeichenfolge) {}

  Druckname(): void {
    console.log('Abteilungsname: ' + dieser.name)
  }
  // Abstrakte Methoden müssen das Schlüsselwort abstract enthalten abstract printMeeting(): void // Muss in abgeleiteten Klassen implementiert werden}

Klasse AccountingDepartment erweitert Department {
  Konstruktor() {
    super('Buchhaltungsabteilung') // Sie müssen super() im Konstruktor einer abgeleiteten Klasse aufrufen
  }

  druckeMeeting(): void {
    console.log('Die Buchhaltungsabteilung ist für die Verwaltung des Geldes verantwortlich.')
  }
}

// const department = new Department() // Löst eine Exception aus: Es kann keine Instanz einer abstrakten Klasse erstellt werden // Instanziiere abstrakte Unterklasse const department = new AccountingDepartment()
// Rufen Sie die Methode in der abstrakten Klasse department.printName() auf. // Name der Abteilung: Buchhaltungsabteilung. // Rufen Sie die abstrakte Methode auf, die in der abgeleiteten Klasse department.printMeeting() implementiert ist. // Die Buchhaltungsabteilung ist die Abteilung, die für die Verwaltung des Geldes zuständig ist.

8. Klassen und Schnittstellen

Die Klassendefinition erstellt zwei Dinge: den Instanztyp der Klasse und einen Konstruktor. Da Klassen Typen erstellen können, ähnelt dies der Schnittstelle, die wir zuvor kennengelernt haben. Daher können wir Klassen dort verwenden, wo Schnittstellen verwendet werden.

Der Beispielcode lautet wie folgt:

//Definiere eine Klasse class Point {
    x: Zahl
    y: Zahl
}
// Definieren Sie eine Schnittstellenvererbung und eine Klassenschnittstelle Point3d extends Point {
    z: Zahl
}

lass point3d: Point3d = { x: 1, y: 2, z: 3 }

Eine Klasse kann eine Schnittstelle implementieren, indem sie diese implementiert. Der Beispielcode lautet wie folgt:

// definiere Schnittstelle Eat {
  essen(Nahrung: Zeichenfolge): void
}
Schnittstelle Ausführen {
  Lauf(Entfernung: Zahl): void
}

// Klasse definieren um Schnittstellenklasse zu implementieren Person implements Eat, Run {
  essen(Nahrung: Zeichenfolge): void {
    console.log(Essen)
  }
  lauf(Entfernung: Zahl) {
    console.log(Entfernung)
  }
}
exportieren {}

Dies ist das Ende dieses Artikels über Klassen in TypeScript. Weitere relevante Inhalte zu TypeScript-Klassen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Funktionsüberladung in TypeScript
  • Funktionen in TypeScript
  • Tutorial zur TypeScript-Funktionsdefinition und zu Anwendungsfällen
  • Erklärung der gängigen TypeScript-Typen und Anwendungsbeispiele
  • Verstehen Sie Funktionen und Klassen in TypeScript?

<<:  So schreiben Sie mithilfe von Filtern transparentes CSS für Bilder

>>:  Zwei Verwendungen von iFrame-Tags in HTML

Artikel empfehlen

Verwendung des Linux-Befehls „cal“

1. Befehlseinführung Mit dem Befehl cal (Kalender...

Detaillierte Erklärung der Routenkonfiguration von Vue-Router

Inhaltsverzeichnis einführen Objektattribute in R...

So verwenden Sie die Vue-Cache-Funktion

Inhaltsverzeichnis Cache-Funktion in vue2 Transfo...

Vue-pdf implementiert eine Online-Vorschau von PDF-Dateien

Vorwort In den meisten Projekten werden Sie auf e...

Unglaubliche CSS-Navigationsleiste unterstreiche folgenden Effekt

Der erste Cutter in China github.com/chokcoco Hie...

MySql 8.0.16-win64 Installations-Tutorial

1. Entpacken Sie die heruntergeladene Datei wie u...

Konfigurationsmethode für das Nginx-Anforderungslimit

Nginx ist ein leistungsstarker, leistungsstarker ...

Wie stellt MySQL eine Verbindung zum entsprechenden Clientprozess her?

Frage Wie können wir bei einer bestimmten MySQL-V...