Kapitel 1 Schnellstart

0. Einführung in TypeScript

TypeScript ist eine Obermenge von JavaScript.
Es erweitert JS, führt das Konzept der Typen in JS ein und fügt viele neue Funktionen hinzu.
TS-Code muss von einem Compiler in JS kompiliert und dann von einem JS-Parser ausgeführt werden.
TS ist voll JS-kompatibel, d. h. jeder JS-Code kann direkt als JS verwendet werden.
Im Vergleich zu JS hat TS statische Typen, eine strengere Syntax und leistungsfähigere Funktionen; TS kann die Codeinspektion vor der Codeausführung abschließen, wodurch die Wahrscheinlichkeit von Laufzeitausnahmen verringert wird; TS-Code kann kompiliert werden Für jede Version von JS-Code kann es das effektiv lösen Kompatibilitätsproblem verschiedener JS-Betriebsumgebungen; bei gleicher Funktion ist das Codevolumen von TS größer als das von JS, aber weil die Codestruktur von TS klarer ist und die Variablentypen klarer sind, ist TS in der späteren Codepflege weit entfernt besser als JS.

1. Aufbau der TypeScript-Entwicklungsumgebung

Laden Sie Node.js herunter

64-Bit: https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi

32-Bit: https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi

Installieren Sie Node.js

Typoskript global mit npm installieren

Geben Sie die Befehlszeile ein

Geben Sie Folgendes ein: npm i -g Typoskript

Erstellen Sie eine ts-Datei

Verwenden Sie tsc, um die ts-Datei zu kompilieren

Geben Sie die Befehlszeile ein

Geben Sie das Verzeichnis ein, in dem sich die ts-Datei befindet

Ausführungsbefehl: tsc xxx.ts

2. Grundtyp

Typ Deklaration
Die Typdeklaration ist ein sehr wichtiges Merkmal von TS

Der Typ von Variablen (Parameter, Formalparameter) in TS kann durch Typdeklaration angegeben werden

Nach Angabe des Typs prüft der TS-Compiler bei der Wertzuweisung an die Variable automatisch, ob der Wert der Typdeklaration entspricht, weist bei Übereinstimmung den Wert zu oder meldet einen Fehler

Kurz gesagt, eine Typdeklaration legt einen Typ für eine Variable fest, sodass sie nur Werte eines bestimmten Typs speichern kann
Grammatik:
let-Variable: Typ;

let-Variable: Typ = Wert;

Funktion fn(Parameter: Typ, Parameter: Typ): Typ {
    ...
}
Automatisches Typurteil

TS verfügt über einen automatischen Typbeurteilungsmechanismus

Bei gleichzeitiger Deklaration und Zuweisung von Variablen ermittelt der TS-Compiler automatisch den Typ der Variablen

Wenn also Ihre Variablendeklaration und -zuweisung gleichzeitig ausgeführt werden, können Sie die Typdeklaration weglassen

Typ:

Typ	Beispiel	beschreiben
Nummer	1, -33, 2,5	irgendeine Nummer
Schnur	'Hallo', "Hallo",`hi`	irgendeine Zeichenfolge
boolesch	wahr falsch	boolesch wahr oder falsch
Wörtlich	selbst	Der Wert der eingeschränkten Variablen ist der Wert des Literals
beliebig	*	jeder Typ
Unbekannt	*	typsicher beliebig
Leere	Nullwert (undefiniert)	kein Wert (oder undefiniert)
niemals	kein Wert	kann kein Wert sein
Objekt	{name:'Affenkönig'}	jedes JS-Objekt
Reihe	[1,2,3]	Beliebiges JS-Array
Tupel	[4,5]	Element, TS neuer Typ, Array fester Länge
Aufzählung	enum{A, B}	Aufzählung, ein neuer Typ in TS

Nummer

dezimal lassen: Zahl = 6;
hex lassen: Zahl = 0xf00d;
binär: Zahl = 0b1010;
oktal lassen: Zahl = 0o744;
groß lassen: bigint = 100n;

boolesch
- ```
let isDone: boolean = false;
```

Schnur

Farbe lassen: string = "blue";
Farbe = 'rot';

let fullName: string = `Bob Bobbington`;
Alter lassen: Zahl = 37;
let setze: string = `Hallo, mein Name ist ${fullName}.

Ich werde nächsten Monat ${age + 1} Jahre alt.`;

Wörtlich
- Sie können auch Literale verwenden, um den Typ von Variablen anzugeben, und Sie können den Wertebereich von Variablen durch Literale bestimmen
- ```
Farbe lassen: 'rot' | 'blau' | 'Schwarz';
let num: 1 | 2 | 3 | 4 | 5;
```

beliebig

sei d: beliebig = 4;
d = 'Hallo';
d = wahr;

Unbekannt

let notSure: unknown = 4;
notSure = 'Hallo';

Leere
- ```
unbrauchbar lassen: void = undefined;
```

niemals

Funktionsfehler (Nachricht: Zeichenfolge): nie {
  neuen Fehler (Nachricht) werfen;
}

Objekt (unnütz)
- ```
obj lassen: Objekt = {};
```

Reihe

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

Tupel

let x: [String, Zahl];
x = ["Hallo", 10];

Aufzählung

Aufzählung Farbe {
  Rot,
  Grün,
  Blau,
}
sei c: Farbe = Farbe.Grün;

Aufzählung Farbe {
  Rot = 1,
  Grün,
  Blau,
}
sei c: Farbe = Farbe.Grün;

Aufzählung Farbe {
  Rot = 1,
  Grün = 2,
  Blau = 4,
}
sei c: Farbe = Farbe.Grün;

Typ Behauptung
- In einigen Fällen ist uns der Typ der Variablen sehr klar, aber der TS-Compiler ist nicht klar. Zu diesem Zeitpunkt kann die Typzusicherung verwendet werden, um dem Compiler den Typ der Variablen mitzuteilen. Die Zusicherung hat zwei Formen:
  - Der erste
    - ```
    let someValue: unknown = "das ist eine Zeichenkette";
    let strLength: number = (someValue as string).length;
```
- der Zweite
  - ```
  let someValue: unknown = "das ist eine Zeichenkette";
  let strLength: number = (<string>someValue).length;
```

3. Optionen kompilieren

Dateien automatisch kompilieren
- Beim Kompilieren einer Datei überwacht der TS-Compiler nach Verwendung des Befehls -w automatisch die Änderung der Datei und kompiliert die Datei erneut, wenn sich die Datei ändert.
- Beispiel:
  - ```
  tsc xxx.ts -w
```
Kompilieren Sie automatisch das gesamte Projekt
- Wenn Sie den tsc-Befehl direkt verwenden, können Sie alle ts-Dateien unter dem aktuellen Projekt automatisch in js-Dateien kompilieren.
- Wenn Sie jedoch den tsc-Befehl direkt verwenden können, müssen Sie zuerst eine ts-Konfigurationsdatei tsconfig.json im Projektstammverzeichnis erstellen
- tsconfig.json ist eine JSON-Datei, nach dem Hinzufügen der Konfigurationsdatei brauchen Sie nur noch den tsc-Befehl zu verwenden, um die Kompilierung des gesamten Projekts abzuschließen
- Einstellmöglichkeiten:
  - enthalten
    - Definieren Sie das Verzeichnis, in das die Dateien kompiliert werden sollen
    - Voreinstellungen:["**/*"]
    - Beispiel:
      - "include":["src/**/*", "tests/**/*"]
      - Im obigen Beispiel werden alle Dateien im Verzeichnis src und tests kompiliert
  - ausschließen
    - Definieren Sie Verzeichnisse, die ausgeschlossen werden müssen
    - Standard: ["node_modules", "bower_components", "jspm_packages"]
    - Beispiel:
      - "ausschließen": [./src/hello/**/*"]
      - Im obigen Beispiel werden die Dateien im hello-Verzeichnis unter src nicht kompiliert
  - erweitert
    - Definieren Sie geerbte Konfigurationsdateien
    - Beispiel:
      - "erweitert": "./configs/base"
      - Im obigen Beispiel enthält die aktuelle Konfigurationsdatei automatisch alle Konfigurationsinformationen in base.json im Verzeichnis config
  - Dateien
    - Geben Sie die Liste der kompilierten Dateien an, die nur verwendet wird, wenn nur wenige Dateien zu kompilieren sind
    - Beispiel:
```
"files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]
```
      - Die Dateien in der Liste werden vom TS-Compiler kompiliert
    - CompilerOptionen
      - Kompilierungsoptionen sind sehr wichtige und komplexe Konfigurationsoptionen in der Konfigurationsdatei
      - Enthält mehrere Unteroptionen in „compilerOptions“, um die Konfiguration der Kompilierung abzuschließen
        
        Projektoptionen
        
        Ziel
        
        Legen Sie die Zielversion der TS-Code-Kompilierung fest
        
        Optionale Werte:
        
        ES3 (Standard), ES5, ES6/ES2015, ES7/ES2016, ES2017, ES2018, ES2019, ES2020, ESNext
        
        Beispiel:
        
        "compilerOptions": { "target": "ES6" }
        
        Wie oben angegeben, wird der von uns geschriebene ts-Code in die ES6-Version des js-Codes kompiliert
        
        lib
        
        Geben Sie die Bibliothek (Hosting-Umgebung) an, die beim Ausführen des Codes enthalten ist
        
        Optionale Werte:
        
        ES5, ES6/ES2015, ES7/ES2016, ES2017, ES2018, ES2019, ES2020, ESNext, DOM, WebWorker, ScriptHost ......
        
        Beispiel:
        
        "compilerOptions": { "target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js" }
        
        Modul
        
        Legt das vom kompilierten Code verwendete Modularitätssystem fest
        
        Optionale Werte:
        
        CommonJS, UMD, AMD, System, ES2020, ESNext, Keine
        
        Beispiel:
        
        "compilerOptions": { "module": "CommonJS" }
        
        outDir
        
        Das Verzeichnis, in dem sich die kompilierten Dateien befinden
        
        Standardmäßig befindet sich die kompilierte js-Datei im selben Verzeichnis wie die ts-Datei, und der Speicherort der kompilierten Datei kann nach dem Festlegen von Dir geändert werden
        
        Beispiel:
        
        "compilerOptions": { "outDir": "dist" }
        
        Nach der Einstellung wird die kompilierte js-Datei im dist-Verzeichnis generiert
        
        outFile
        
        Kompilieren Sie alle Dateien in eine js-Datei
        
        Standardmäßig wird der gesamte im globalen Bereich geschriebene Code in einer js-Datei zusammengeführt. Wenn das Modul None, System oder AMD angibt, wird das Modul zusammen in die Datei eingefügt.
        
        Beispiel:
        
        "compilerOptions": { "outFile": "dist/app.js" }
        
        rootDir
        
        Geben Sie das Stammverzeichnis des Codes an. Standardmäßig verwendet die Verzeichnisstruktur der kompilierten Datei das längste öffentliche Verzeichnis als Stammverzeichnis. Sie können das Stammverzeichnis manuell über rootDir angeben
        
        Beispiel:
        
        "compilerOptions": { "rootDir": "./src" }
        
        erlaubenJs
        
        Ob die js-Datei kompiliert werden soll
        
        checkJs
        
        Ob die js-Datei überprüft werden soll
        
        Beispiel:
        
        "compilerOptions": { "allowJs": true, "checkJs": true }
        
        Kommentare entfernen
        
        Ob Kommentare gelöscht werden sollen
        
        Standard: falsch
        
        neinEmit
        
        kompiliert den Code nicht
        
        Standard: falsch
        
        QuelleKarte
        
        Ob sourceMap generiert werden soll
        
        Standard: falsch
        
        Strenge Kontrolle
        
        strikt
        
        Alle strengen Prüfungen aktivieren, der Standardwert ist wahr, nach der Einstellung entspricht dies der Aktivierung aller strengen Prüfungen
        
        immerStreng
        
        Kompilieren Sie Code immer im strikten Modus
        
        noImplicitAny
        
        Implizit jeden Typ verbieten
        
        noImplicitThis
        
        Mehrdeutig ist dies verboten
        
        strictBindCallApply
        
        Prüfen Sie unbedingt die Argumentliste von bind, call und apply
        
        StrictFunctionTypes
        
        Überprüfen Sie unbedingt die Art der Funktion
        
        StrictNullChecks
        
        strenge Nullprüfung
        
        StrictPropertyInitialisierung
        
        Prüfen Sie unbedingt, ob die Eigenschaft initialisiert ist
        
        zusätzliche Prüfung
        
        noFallthroughCasesInSwitch
        
        Prüfen Sie, ob die switch-Anweisung den richtigen Break enthält
        
        noImplicitReturns
        
        Stellen Sie sicher, dass die Funktion keinen impliziten Rückgabewert hat
        
        noUnusedLocals
        
        Suchen Sie nach unbenutzten lokalen Variablen
        
        noUnusedParameters
        
        Suchen Sie nach unbenutzten Parametern
        
        fortschrittlich
        
        allowUnreachableCode
        
        Suchen Sie nach unerreichbarem Code
        
        Optionale Werte:
        
        true, nicht erreichbaren Code ignorieren
        
        falscher, nicht erreichbarer Code führt zu einem Fehler
        
        noEmitOnError
        
        Im Fehlerfall nicht kompilieren
        
        Standard: falsch

4. Webpaket

Normalerweise müssen wir in der tatsächlichen Entwicklung Build-Tools verwenden, um Code zu paketieren. TS kann auch in Verbindung mit Build-Tools verwendet werden. Im Folgenden wird Webpack als Beispiel verwendet, um vorzustellen, wie TS mit Build-Tools verwendet wird.

Schritt:

Initialisieren Sie das Projekt
- Geben Sie das Projektstammverzeichnis ein und führen Sie den Befehl ausnpm init -y
  - Hauptfunktion: Paket.json-Datei erstellen
Build-Tools herunterladen
```
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
```
- Webpaket
  - Tool-Webpack erstellen
- webpack-cli
  - Befehlszeilentool für Webpack
- webpack-dev-server
  - Entwicklungsserver von webpack
- Typoskript
  - ts-Compiler
- ts-Loader
  - ts-Loader zum Kompilieren von ts-Dateien im Webpack
- html-webpack-plugin
  - Das HTML-Plugin im Webpack wird verwendet, um automatisch HTML-Dateien zu erstellen
- clean-webpack-plugin
  - Das Bereinigungs-Plugin im Webpack, jeder Build löscht zuerst das Verzeichnis

Erstellen Sie die Webpack-Konfigurationsdatei webpack.config.js im Stammverzeichnis

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    optimization:{
        minimize: false // 关闭代码压缩，可选
    },
    // 指定文件入口
    entry: "./src/index.ts",
    
    devtool: "inline-source-map",
    
    devServer: {
        contentBase: './dist'
    },
    // 指定打包文件所在吗目录
    output: {
        // 指定打包文件所在吗目录
        path: path.resolve(__dirname, "dist"),
        //打包后文件得文件名
        filename: "bundle.js",
        //告诉webpack不适用箭头函数
        environment: {
            arrowFunction: false // 关闭webpack的箭头函数，可选
        }
    },
    // 用来设置引用模块
    resolve: {
        extensions: [".ts", ".js"]
    },
    // 指定webpack打包时要使用得模块
    module: {
        //指定要加载得规则
        rules: [
            {//test指定得时规则生效得文件
                test: /\.ts$/,
                //要使用得loader
                use: {
                   loader: "ts-loader"     
                },
                //要排除得文件
                exclude: /node_modules/
            }
        ]
    },
    // 配置webpackplugin
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            //title:'TS测试' 我是自定义title
            // 用来指定自定义模板
            template: "./src/index.html"
        }),
    ]

}

Erstellen Sie tsconfig.json im Stammverzeichnis, die Konfiguration kann Ihren Anforderungen entsprechen

{
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES2015",
        "strict": true
    }
}

Ändern Sie package.json, um die folgende Konfiguration hinzuzufügen

{
  ...略...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  },
  ...略...
}

Erstellen Sie eine ts-Datei unter src und führen Sie sie auf der Befehlszeile aus, npm run buildum den Code zu kompilieren, oder führen Sie sie aus, npm startum den Entwicklungsserver zu starten

5. Babel

Nach einer Reihe von Konfigurationen wurden TS und Webpack kombiniert. Zusätzlich zu Webpack ist es oft notwendig, babel zu kombinieren, um den Code zu konvertieren, um ihn mit mehr Browsern kompatibel zu machen. Übergeben Sie basierend auf den obigen Schritten die folgenden Schritte und führen Sie dann babel ein in das Projekt.

Abhängigkeiten installieren:
```
npm i -D @babel/core @babel/preset-env babel-loader core-js
```
- Insgesamt werden 4 Pakete installiert, nämlich:
  - @babel/core
    - Babels Kernwerkzeuge
  - @babel/preset-env
    - Vordefinierte Umgebungen für babel
  - @babel-loader
    - babels Loader im Webpack
  - core-js
    - core-js wird verwendet, damit alte Browser die neue ES-Syntax unterstützen

Ändern Sie die Konfigurationsdatei webpack.config.js

...略...
module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
                {
                    loader: "babel-loader",
                    options:{
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}
...略...

Auf diese Weise werden die mit ts kompilierten Dateien von babel wieder verarbeitet, sodass der Code in den meisten Browsern direkt verwendet werden kann und die kompatible Browserversion in den Zielen der Konfigurationsoption angegeben werden kann.

Kapitel 2: Objektorientierung

Objektorientierung ist eine sehr wichtige Idee beim Programmieren und wird von vielen Studenten als schwieriges und esoterisches Problem verstanden, ist es aber nicht. Objektorientiert ist sehr einfach, kurz gesagt, alle Operationen im Programm müssen über Objekte ausgeführt werden.

Zum Beispiel:
- Um den Browser zu bedienen, verwenden Sie das Fensterobjekt
- Um eine Webseite zu bedienen, verwenden Sie das document-Objekt
- Die Betriebskonsole muss das Konsolenobjekt verwenden

Alle Operationen müssen Objekte durchlaufen, das ist die sogenannte Objektorientierung, also was genau ist ein Objekt? Lassen Sie uns zuerst darüber sprechen, was ein Programm ist. Die Essenz eines Computerprogramms ist die Abstraktion von realen Dingen. Das Antonym von Abstraktion ist konkret. Zum Beispiel ist ein Foto eine Abstraktion einer bestimmten Person, und ein Automodell ist eine Abstraktion davon ein bestimmtes Auto. Ein Programm stellt auch eine Abstraktion von Dingen dar. In einem Programm können wir eine Person, einen Hund, eine Waffe, eine Kugel und alle anderen Dinge darstellen. Wenn ein Ding im Programm ankommt, wird es zu einem Objekt.

Alle Objekte im Programm sind in zwei Teile geteilt: Daten und Funktionen: Am Beispiel von Menschen gehören Name, Geschlecht, Alter, Größe, Gewicht usw. zu Daten, und Menschen können sprechen, gehen, essen und schlafen, die zu menschlichen Funktionen gehören. . Daten werden Eigenschaften in Objekten genannt und Funktionen werden Methoden genannt. Kurz gesagt, alles ist ein Objekt in einem Programm.

1. Klasse

Wenn Sie objektorientiert sein und Objekte manipulieren wollen, müssen Sie zuerst Objekte haben, also ist die nächste Frage, wie man Objekte erstellt. Um ein Objekt zu erstellen, müssen Sie zunächst eine Klasse definieren. Die sogenannte Klasse kann als Modell des Objekts verstanden werden. Im Programm können Sie entsprechend der Klasse einen bestimmten Objekttyp erstellen. Zum Beispiel: Sie können erstellen ein menschliches Objekt durch die Person-Klasse und einen Hund durch die Dog-Klasse Das Autoobjekt wird durch die Car-Klasse erstellt, und verschiedene Klassen können verwendet werden, um verschiedene Objekte zu erstellen.

Klasse definieren:

class 类名 {
    属性名: 类型;
    
    constructor(参数: 类型){
        this.属性名 = 参数;
    }
    
    方法名(){
        ....
    }

}

Beispiel:

class Person{
    name: string;
    age: number;

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

    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
}

Nutzungsklasse:

const p = new Person('孙悟空', 18);
p.sayHello();

2. Objektorientierte Funktionen

Verkapselung

Ein Objekt ist im Wesentlichen ein Container für Attribute und Methoden, und seine Hauptfunktion besteht darin, Attribute und Methoden zu speichern, was Kapselung genannt wird
Standardmäßig können die Eigenschaften eines Objekts beliebig verändert werden Um die Datensicherheit zu gewährleisten, können die Berechtigungen von Eigenschaften im TS gesetzt werden
Nur-Lese-Attribut (readonly):
- Wenn Sie beim Deklarieren einer Eigenschaft eine schreibgeschützte Eigenschaft hinzufügen, wird die Eigenschaft zu einer schreibgeschützten Eigenschaft und kann nicht geändert werden
Eigenschaften in TS haben drei Modifikatoren:
- public (Standard), kann in Klassen, Unterklassen und Objekten geändert werden
- protected , die in Klassen und Unterklassen geändert werden kann
- private , kann in der Klasse geändert werden

Beispiel:

öffentlich

class Person{
    public name: string; // 写或什么都不写都是public
    public age: number;

    constructor(name: string, age: number){
        this.name = name; // 可以在类中修改
        this.age = age;
    }

    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
}

class Employee extends Person{
    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //子类中可以修改
    }
}

const p = new Person('孙悟空', 18);
p.name = '猪八戒';// 可以通过对象修改

geschützt

class Person{
    protected name: string;
    protected age: number;

    constructor(name: string, age: number){
        this.name = name; // 可以修改
        this.age = age;
    }

    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
}

class Employee extends Person{

    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //子类中可以修改
    }
}

const p = new Person('孙悟空', 18);
p.name = '猪八戒';// 不能修改

Privatgelände

class Person{
    private name: string;
    private age: number;

    constructor(name: string, age: number){
        this.name = name; // 可以修改
        this.age = age;
    }

    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
}

class Employee extends Person{

    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //子类中不能修改
    }
}

const p = new Person('孙悟空', 18);
p.name = '猪八戒';// 不能修改

Attribut-Accessor
- Einige Eigenschaften, die nicht willkürlich geändert werden sollen, können auf privat gesetzt werden
- Wenn Sie es direkt auf privat setzen, können Sie seine Eigenschaften nicht mehr über das Objekt ändern
- Wir können eine Reihe von Methoden zum Lesen und Festlegen von Eigenschaften in einer Klasse definieren.Diese Art von Eigenschaft, die Eigenschaften liest oder festlegt, wird als Eigenschaftszugriff bezeichnet
- Die Methode zum Lesen einer Eigenschaft wird als Setter-Methode bezeichnet, und die Methode zum Festlegen einer Eigenschaft wird als Getter-Methode bezeichnet
- Beispiel:
```
class Person{
    private _name: string;

    constructor(name: string){
        this._name = name;
    }

    get name(){
        return this._name;
    }

    set name(name: string){
        this._name = name;
    }

}

const p1 = new Person('孙悟空');
console.log(p1.name); // 通过getter读取name属性
p1.name = '猪八戒'; // 通过setter修改name属性
```
statische Eigenschaft
- Statische Eigenschaften (Methoden), auch Klasseneigenschaften genannt. Durch die Verwendung statischer Eigenschaften muss keine Instanz erstellt werden, sie kann direkt über die Klasse verwendet werden
- Statische Eigenschaften (Methoden) beginnen mit static
- Beispiel:
```
class Tools{
    static PI = 3.1415926;
    
    static sum(num1: number, num2: number){
        return num1 + num2
    }
}

console.log(Tools.PI);
console.log(Tools.sum(123, 456));
```
Das
- Verwenden Sie dies in einer Klasse, um das aktuelle Objekt darzustellen

erben

Vererbung ist noch ein weiteres Merkmal der Objektorientierung

Eigenschaften und Methoden aus anderen Klassen können durch Vererbung in die aktuelle Klasse eingeführt werden

Beispiel:

class Animal{
    name: string;
    age: number;

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

class Dog extends Animal{

    bark(){
        console.log(`${this.name}在汪汪叫！`);
    }
}

const dog = new Dog('旺财', 4);
dog.bark();

Erweiterungen einer Klasse können vorgenommen werden, ohne die Klasse durch Vererbung zu modifizieren

umschreiben

Wenn bei einer Vererbung die Methode in der Unterklasse die gleichnamige Methode in der Elternklasse ersetzt, spricht man von Methodenumschreibung

Beispiel:

class Animal{
    name: string;
    age: number;

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

    run(){
        console.log(`父类中的run方法！`);
    }
}

class Dog extends Animal{

    bark(){
        console.log(`${this.name}在汪汪叫！`);
    }

    run(){
        console.log(`子类中的run方法，会重写父类中的run方法！`);
    }
}

const dog = new Dog('旺财', 4);
dog.bark();

Super kann in Unterklassen verwendet werden, um Verweise auf übergeordnete Klassen zu vervollständigen

abstrakte Klasse
- Eine abstrakte Klasse ist eine Klasse, die speziell dafür entwickelt wurde, von anderen Klassen geerbt zu werden, sie kann nur von anderen Klassen geerbt werden und kann nicht zum Erstellen von Instanzen verwendet werden
```
abstract class Animal{
    abstract run(): void;
    bark(){
        console.log('动物在叫~');
    }
}

class Dog extends Animals{
    run(){
        console.log('狗在跑~');
    }
}
```
- Eine Methode, die mit abstract beginnt, wird als abstrakte Methode bezeichnet. Eine abstrakte Methode hat keinen Methodenrumpf und kann nur in einer abstrakten Klasse definiert werden. Beim Erben einer abstrakten Klasse muss die abstrakte Methode implementiert werden.

3. Schnittstelle

Die Rolle der Schnittstelle ähnelt der abstrakten Klasse, der Unterschied besteht darin, dass alle Methoden und Eigenschaften in der Schnittstelle keinen wirklichen Wert haben, mit anderen Worten, alle Methoden in der Schnittstelle sind abstrakte Methoden. Das Interface ist hauptsächlich dafür zuständig, die Struktur einer Klasse zu definieren. Das Interface kann das Interface eines Objekts einschränken. Nur wenn das Objekt alle im Interface definierten Eigenschaften und Methoden enthält, kann es mit dem Interface übereinstimmen. Gleichzeitig können Sie eine Klasse die Schnittstelle implementieren lassen, und wenn Sie die Schnittstelle implementieren, müssen alle Eigenschaften in der Schnittstelle in der Klasse geschützt werden.

Beispiel (Objekttyp prüfen):

interface Person{
    name: string;
    sayHello():void;
}

function fn(per: Person){
    per.sayHello();
}

fn({name:'孙悟空', sayHello() {console.log(`Hello, 我是 ${this.name}`)}});

Beispiel (Implementierung)

interface Person{
    name: string;
    sayHello():void;
}

class Student implements Person{
    constructor(public name: string) {
    }

    sayHello() {
        console.log('大家好，我是'+this.name);
    }
}

4. Allgemein

Bei der Definition einer Funktion oder Klasse kann in einigen Fällen der zu verwendende spezifische Typ nicht bestimmt werden (die Typen von Rückgabewerten, Parametern und Eigenschaften können nicht bestimmt werden), und Generika können zu diesem Zeitpunkt eine Rolle spielen.

Zum Beispiel:
```
function test(arg: any): any{
    return arg;
}
```
- Im obigen Beispiel hat die Testfunktion einen Parametertyp, der unsicher ist, aber wenn er bestimmt werden kann, ist der Typ des Rückgabewerts derselbe wie der Typ des Parameters. Da der Typ unsicher ist, müssen sowohl der Parameter als auch die Rückgabewert verwenden Sie any, aber es ist offensichtlich, dies zu tun Es ist unangemessen.Erstens wird durch die Verwendung von any die Typprüfung von TS deaktiviert.Zweitens kann diese Einstellung nicht widerspiegeln, dass die Parameter und Rückgabewerte vom gleichen Typ sind.
- Generika verwenden:
```
function test<T>(arg: T): T{
    return arg;
}
```
Hier <T>ist der generische Typ, T ist der Name, den wir diesem Typ geben (nicht unbedingt T genannt), nachdem Sie den generischen Typ festgelegt haben, können Sie T verwenden, um den Typ in der Funktion darzustellen. Generika sind also eigentlich einfach zu verstehen und repräsentieren einen bestimmten Typ.
- Wie benutzt man also die obige Funktion?
  - Methode 1 (direkte Verwendung):
    - ```
    testen(10)
```
- Wenn Sie es verwenden, können Sie Parameter direkt übergeben, und der Typ wird automatisch von TS abgeleitet, aber manchmal müssen Sie die folgende Methode verwenden, wenn der Compiler nicht automatisch ableiten kann
- Methode 2 (Art angeben):
  - ```
  Test<Nummer>(10)
```
  - Sie können den generischen Typ auch manuell hinter der Funktion angeben
- Mehrere generische Typen können gleichzeitig angegeben werden, getrennt durch Kommas:
```
function test<T, K>(a: T, b: K): K{
    return b;
}

test<number, string>(10, "hello");
```
  - Wenn Sie Generics verwenden, können Sie Generics als gewöhnliche Klasse verwenden
- Generika können auch im Unterricht verwendet werden:
```
class MyClass<T>{
    prop: T;

    constructor(prop: T){
        this.prop = prop;
    }
}
```
- Darüber hinaus können Sie auch den Geltungsbereich von Generika einschränken
```
interface MyInter{
    length: number;
}

function test<T extends MyInter>(arg: T): number{
    return arg.length;
}
```
  - Die Verwendung von T erweitert MyInter bedeutet, dass das generische T eine Unterklasse von MyInter sein muss und es nicht notwendig ist, Schnittstellenklassen und abstrakte Klassen zu verwenden.

TypeScript-Eintrag und Konfiguration der Webpack-Umgebung

Kapitel 1 Schnellstart

0. Einführung in TypeScript

1. Aufbau der TypeScript-Entwicklungsumgebung

2. Grundtyp

3. Optionen kompilieren

4. Webpaket

5. Babel

Kapitel 2: Objektorientierung

1. Klasse

2. Objektorientierte Funktionen

3. Schnittstelle

4. Allgemein

Guess you like