6 praktische Tipps für die TypeScript-Entwicklung

Dieser Artikel fasst einige meiner Erfahrungen bei der Entwicklung von Anwendungen mit TypeScript zusammen. Bevor ich das sage, empfehle ich ein VSCODE-Plugin namens quokka.js, mit dem Sie TS-Code sofort ausführen können.

Wie man es benutzt, ctrl+shipt+p, geben Sie das Schlüsselwort quokka ein

Nach dem Drücken der Eingabetaste wird der Code sofort nach der Eingabe ausgeführt

1. Bestimmen Sie den Entitätstyp vor der Entwicklung

Wenn vor der formalen Codierung kein Schnittstellendokument vorhanden ist, ist es am besten, das Datenwörterbuch abzurufen und die Entitätstypen im Projekt entsprechend dem Datenwörterbuch zu definieren. Wenn das Datenwörterbuch beispielsweise Benutzertabellen und Unternehmenstabellen enthält, können wir einen Typenordner erstellen und die entsprechenden Typen in verschiedene Dateien einfügen. Das Verzeichnis lautet wie folgt:

Typen
    Benutzer.ts
    corp.ts
    ...

Es wird empfohlen, zum Definieren von Entitätstypen eine Schnittstelle zu verwenden, die semantischer ist als ein Typ.

Schnittstelle Benutzer{
    ID:Zeichenfolge
    Name:Zeichenfolge
}

2. Bei der Anforderung einer Schnittstelle müssen Sie nur die Felder definieren, die Sie verwenden möchten

Beim Definieren eines Typs müssen Sie nur die Felder definieren, die Sie verwenden müssen. Nicht verwendete Felder müssen nicht definiert werden. Denn der Typ der vom Backend zurückgegebenen Daten erfordert, dass das Frontend den Typ angibt und TS dann eine Beurteilung vornimmt. Wenn das Frontend den Typ nicht angibt, kann TS ihn nicht beurteilen.

Die vom Backend zurückgegebenen Daten lauten beispielsweise wie folgt:

Benutzer:{
    Ich würde: 1,
    Name: „Xiaoming“,
    Geschlecht:0
}

Die definierten Typen sind wie folgt:

Schnittstelle Benutzer{
    id:Nummer,
    Name:Zeichenfolge
}

In diesem Fall prüft TS nur, ob der Benutzer eine ID und einen Namen hat, und ignoriert das Geschlecht.

3. Verwenden Sie Aufzählungstypen

Zur Definition mittels Aufzählungstypen eignen sich Datenstrukturen wie Geschlecht (männlich und weiblich), Administratortyp (Superadministrator, normaler Benutzer) und Mitgliedstyp (normaler Benutzer, VIP, Super-VIP), die auch als Werte verwendet werden können.

Zum Beispiel:

//Verwenden Sie den Enumerationstyp, um den Mitgliedstyp enum UserType zu definieren{
    Gemeinsam = 0,
    VIP=1,
    SuperVIP=2
}
Klasse Benutzer{
    ID:Zeichenfolge
    Name:Zeichenfolge
    Typ:Benutzertyp
}
let Benutzerliste:Benutzer[]=[]

Benutzerliste.push({
    ID:'001',
    Name:'Jack',
    Typ:UserType.SuperVIP //Als Wert kann der durch den Aufzählungstyp definierte Typ verwendet werden})

Enumerationstypen können auch Zeichenfolgen sein, wie unten gezeigt. Die Verwendung ist die gleiche wie oben.

enum Benutzertyp{
    Allgemein = 'DiaoSi',
    VIP = "LowBVIP",
    SuperVIP='SuperVIP'
}

4. Der Typ des DOM-Elements sollte normalerweise angegeben werden

Verwenden Sie für DOM-Elemente keine, sie haben Typen.
Im Allgemeinen erben alle Tags von HTMLElement und verschiedene Tags haben unterschiedliche Typen. Dieser Typ ist oft Routine. Beispielsweise ist der Typ des Videoelements HTMLVideoElement, der Typ des Div-Elements ist HTMLDivElement, der Typ des Canvas-Elements ist HTMLCanvasElement und so weiter. Tatsächlich gibt es nicht viele häufig verwendete Typen. Listen Sie sie einfach kurz auf:

let-Element:HTMLElement=null

let video:HTMLVideoElement=null

let div:HTMLDivElement=null

let canvas:HTMLCanvasElement = null

let e:Event =null //Ereignisobjekt e.target

Geben Sie unbedingt DOM-Elementtypen an, damit Sie Codehinweise erhalten

Hier ist eine Ergänzung, wie Sie den Typ beim Hochladen einer Datei angeben. Binden Sie die Methode onChange an das Input-Element. Die Methode lautet wie folgt:

beiÄnderung(Ereignis: Ereignis): void {
  wenn ((event.target als HTMLInputElement).files und (event.target als HTMLInputElement).files.Länge) {
    const [Datei] = Ereignis.Ziel.Dateien;
  }
}

5. So geben Sie den Typ des Objekts an

Es gibt eine Funktion, die ein Objekt als Parameter erhält. Wie muss der Typ angegeben werden?

Geben Sie zunächst nichts preis, geben Sie nicht bei jeder Gelegenheit etwas preis, es ist auf einer niedrigeren Ebene. Überlegen Sie, was das Objekt enthält, einen Schlüssel, einen Wert. Der Schlüssel muss ein String-Typ sein. Der Wert hängt von den jeweiligen Anforderungen ab. Vielleicht kann Ihr Wert nur eine Zahl oder ein String sein, dann verwenden Sie Zahl|String. Wenn alles akzeptabel ist, verwenden Sie alles.

//Definiere den Typ des Objekts, der Schlüssel ist normalerweise eine Zeichenfolge und der Wert kann der Schnittstelle ObjType übergeben werden{
	[Schlüssel:Zeichenfolge]:beliebig
}
Funktion deepCopy(obj:ObjType){
    für (let key in obj){
        console.log(Objekt[Schlüssel])
    }

}

let obj={name:"Jack"}
deepCopy(Objekt)

6. So geben Sie den Typ an, wenn Sie einer Struktur einen Wert zuweisen

Sie haben eine Funktion, die ein Objekt empfängt und die Parameter im Objekt dekonstruiert. Wie geben Sie der Struktur den Typ der Objekteigenschaft, die sie erhalten? Der Code lautet wie folgt:

const Benutzer={
    Name:'Jack',
    Alter: 10,
    Freunde: [{id:0,name:'Peter',connect:100},{id:1,name:'Alice',connect:69}]
}

Schnittstelle Freund{
    id:Nummer,
    Name: Zeichenfolge,
    verbinden:Nummer
}


Funktion handleFriends({friends}){//So geben Sie den Freundestyp an friends.map(item=>item.connect)
}

Denken Sie 10 Sekunden nach.

10

9

8

7

6

5

4

3

2

1

Poste die Antwort:

Schnittstelle Freund{
    id:Nummer,
    Name: Zeichenfolge,
    verbinden:Nummer
}

Funktion handleFriends({Freunde}:{Freunde:Freund[]}){
    Freunde.Karte(Element=>Element.Verbinden)
}

Dies wird häufiger in React-Hooks verwendet.

Zusammenfassen

Dies ist das Ende dieses Artikels über Tipps zur TypeScript-Entwicklung. Weitere relevante Tipps zur TypeScript-Entwicklung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!