Eine kurze Einführung in TypeScript

TypeScript ist eine von Microsoft entwickelte Obermenge von JavaScript. Typescript ist mit JavaScript kompatibel und kann JavaScript-Code laden und dann ausführen. Im Vergleich zu js wurde ts durch das Hinzufügen von Kommentaren verbessert, damit der Compiler die vom Speicher unterstützten Objekte und Funktionen verstehen kann. Die Compiler-Kommentare werden ohne zusätzlichen Overhead entfernt; das Hinzufügen einer vollständigen Klassenstruktur bringt es auf den neuesten Stand traditioneller objektorientierter Sprachen.

Warum gibt es TypeScript?

JavaScript ist lediglich eine Skriptsprache und nicht für die Entwicklung umfangreicher Webanwendungen konzipiert. JavaScript bietet kein Konzept von Klassen und Modulen, und TypeScript erweitert JavaScript, um diese Funktionen zu implementieren. Zu den Hauptfunktionen von TypeScript gehören:

• TypeScript ist eine Open-Source-Sprache, die von Microsoft unter Verwendung der Apache-Lizenzvereinbarung eingeführt wurde
• TypeScript ist eine Obermenge von JavaScript.
• TypeScript fügt optionale Typen, Klassen und Module hinzu
• TypeScript wird zu lesbarem Standard-JavaScript kompiliert
• TypeScript unterstützt die Entwicklung umfangreicher JavaScript-Anwendungen
• TypeScript ist für die Entwicklung umfangreicher Anwendungen konzipiert und gewährleistet die Kompatibilität von kompiliertem JavaScript-Code
• TypeScript erweitert die Syntax von JavaScript, sodass vorhandener JavaScript-Code ohne Änderungen direkt mit TypeScript ausgeführt werden kann
• Die TypeScript-Dateierweiterung ist ts und der TypeScript-Compiler kompiliert sie in eine js-Datei
• Die TypeScript-Syntax ist dieselbe wie die von JScript .NET
• TypeScript ist leicht zu erlernen und zu verstehen

Unterschied zwischen JavaScript und TypeScript

TypeScript ist eine Obermenge von JavaScript, die die Syntax von JavaScript erweitert, sodass vorhandener JavaScript-Code ohne Änderungen mit TypeScript funktionieren kann. TypeScript bietet eine statische Typprüfung zur Kompilierungszeit durch Typanmerkungen. TypeScript übernimmt vorhandenen JavaScript-Code und kompiliert nur den darin enthaltenen TypeScript-Code.

Vorteile von TypeScript

Problempunkte lösen
Das Design von TypeScript löst die „Problempunkte“ von JavaScript: schwache Typen und kein Namespace; dies erschwert die Modularisierung von Programmen und ist nicht für die Entwicklung umfangreicher Programme geeignet.

Syntax-Tipps
Beim Schreiben eines Programms stellt der Editor präzise Syntax-Tipps zur Verfügung, damit Sie die objektorientierte Programmierung bequemer üben können.

Einfacher Einstieg
Eines der Design-Highlights von TypeScript besteht darin, dass es die Syntax von JavaScript nicht aufgibt und von vorne beginnt. Stattdessen handelt es sich um eine Obermenge von JavaScript. Jede zulässige JavaScript-Anweisung ist unter TypeScript zulässig und folgt den Verwendungsgewohnheiten und -gewohnheiten von JavaScript Konventionell kann man sagen, dass die Lernkosten sehr gering sind .

Beseitigung von Schmerzpunkten

Starkes Tippen zur Kompilierungszeit

TypeScript hat eine Reihe von Typmechanismen entwickelt, um eine starke Typbeurteilung zur Kompilierungszeit sicherzustellen.

Einfaches Beispiel: Nachdem Sie den Typ der Variablen deklariert haben, führen andere Zuweisungstypen zu Kompilierungsfehlern.

Interessanterweise leitet TypeScript ähnlich wie die var-Variablendeklaration von C# den Typ der zugewiesenen Variablen ab.

Zum Beispiel:

Modular

Durch die Verwendung des Schlüsselwortmoduls von TypeScript kann ein ähnlicher Effekt wie bei einem Namespace erzielt werden, und der Export kann steuern, ob extern darauf zugegriffen wird.
Zum Beispiel:

Aus dem obigen Beispiel ist Folgendes ersichtlich:

Module können verschachtelt sein, beim Zugriff . als Trennzeichen verwenden oder . als Trennzeichen verwenden, um die Verschachtelung von Modulen abzukürzen; nur auf diejenigen
mit dem Schlüsselwort export kann extern zugegriffen werden;
Module können zusammengeführt werden, aber nicht exportierte Objekte befinden sich in anderen Auf Module wie funcA() kann nicht zugegriffen werden, auch wenn sie denselben Namen haben.

Grundlegende TypeScript-Syntax

Die Datentypen von TypeScript sind in sieben Typen unterteilt : Boolean, Number, String, Array, Enum, Any und Void .

Boolescher Typ

NumberType

String-Typ

Array-Typ

Enum-Aufzählungsklasse

Jeder unbestimmte Typ

Leerer Typ

Art

Grundgrammatik

// 通过class创建类
class Animal {
    
    
    // 类的属性
    name: string;
    // 类的构造器
    constructor(name: string) {
    
    
        this.name = name;
    }
    // 类的方法
    sayHello():void{
    
    
        alert("hello animal:"+this.name);
    }
}
// 实例化类
var tom = new Animal("tom");
tom.sayHello();

Klassenvererbung

// 通过class创建类
class Animal {
    
    
    // 类的属性
    name: string;

    // 类的构造器
    constructor(name: string) {
    
    
        this.name = name;
    }

    // 类的方法
    sayHello(): void {
    
    
        alert("hello animal:" + this.name);
    }
}

// 继承Animal
class Cat extends Animal {
    
    
    // 重写方法
    sayHello(): void {
    
    
        alert("hello cat:" + this.name);
    }
}

class Dog extends Animal {
    
    
    sayHello(): void {
    
    
        alert("hello dog:" + this.name);
    }
}

Modifikator

class Animal {
    
    
    private name: string; // 这里把name修饰符改为private

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

    sayHello(): void {
    
    
        alert("hello animal:" + this.name);
    }
}

class Cat extends Animal {
    
    
    sayHello(): void {
    
    
        alert("hello cat:" + this.name); //这里会报错，因为无法引用父类private修饰的属性
    }
}

class Dog extends Animal {
    
    
    sayHello(): void {
    
    
        alert("hello dog:" + this.name); //这里会报错，因为无法引用父类private修饰的属性
    }
}

Wenn der Modifikator des Attributs in „privat“ geändert wird, wird nach der Erbung der Unterklasse ein Fehler gemeldet. Wie kann man es also lösen? Siehe den nächsten Abschnitt.

Get/Set-Accessor

class Animal {
    
    
    private name: string;

    get name(): string {
    
     //通过get和set解决子类不能引用父类private修饰的属性的问题
        return this.name;
    }

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

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

    sayHello(): void {
    
    
        alert("hello animal:" + this.name);
    }
}

class Cat extends Animal {
    
    
    sayHello(): void {
    
    
        alert("hello cat:" + this.name); 
    }
}

class Dog extends Animal {
    
    
    sayHello(): void {
    
    
        alert("hello dog:" + this.name); 
    }
}

statische Eigenschaft

class Table {
    
    
    static width: Number = 100;
    static height: Number = 50
}

var width: Number = Table.width;

Schnittstelle

Grundgrammatik

interface Graphic {
    
    
    width: Number;
    height: Number;
}

class Square implements Graphic {
    
    
    width: Number;
    height: Number;

    constructor() {
    
    
        this.width = 100;
        this.height = 100;
    }

    constructor(width: Number, height: Number) {
    
    
        this.height = height;
        this.width = width;
    }
}

Schnittstelle erben

interface Graphic {
    
    
    width: Number;
    height: Number;
}

interface PenStroke {
    
    
    penWidth: Number;
}

interface Square extends Graphic, PenStroke {
    
    
    sideLength: number;
}

Modul

Die Rolle des Moduls

Um Namespace-Konflikte zu vermeiden,
ist es einfach, ein Funktionsmodul in verschiedene Dateien aufzuteilen, was einfacher zu warten ist.

Grundgrammatik

module MyDemo{
    
    
    export class Animal {
    
    
        private name: string;

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

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

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

        sayHello(): void {
    
    
            alert("hello animal:" + this.name);
        }
    }

    export class Cat extends Animal {
    
    
        sayHello(): void {
    
    
            alert("hello cat:" + this.name);
        }
    }
}

alias

module Shapes {
    
    
    export module Polygons{
    
    
        export class Square{
    
    }
        export class Triangle{
    
    }
    }
}

import polygons = Shapes.Polygons;
var sq = new polygons.Square(); //类似于 new Shapes.Polygons.Square()
var sq1 = new Shapes.Polygons.Square();

Funktion

Grundgrammatik

function add(x:number,y:number):number{
    
    
    return x+y;
}

var myAdd = function(x:number,y:number):number{
    
    
    return x+y;
}