Eine Zusammenfassung einiger Orte, an denen ich Zeit mit TypeScript verbracht habe

Eine Zusammenfassung einiger Orte, an denen ich Zeit mit TypeScript verbracht habe

Notieren Sie einige der Orte, an denen Sie Zeit verbracht haben.

(Zuerst möchte ich mich beschweren: Stackoverflow hat wirklich alles, aber Baidu ist wirklich nutzlos.)

Grube

Bei einem Kompatibilitätsmissverständnis einer AS-Behauptung wie etwa „a“ als „b“ wird kein Fehler gemeldet.

Inkonsistentes Verhalten zwischen Schnittstelle und Typ (als ich es zum ersten Mal bemerkte, dachte ich, ich hätte den falschen Typ geschrieben und war verwirrt):

Typ Typ = {
  Schlüssel: „Wert“
}
Schnittstelle Schnittstelle {
  Schlüssel: „Wert“
}

Der Typ scheint nicht unterschiedlich zu sein, beide sind wahr = Typ erweitert Schnittstelle? Typ erweitert Schnittstelle? wahr : falsch : falsch

Typ Grubenpunkt = {
  [Schlüssel: Zeichenfolge]: Grubenpunkt} | Zeichenfolge

Typtest<T> = T erweitert Fallstrick? true : false
Typ Dies ist wahr = Test <Typ>
Typ Dies ist falsch = Test <Schnittstelle>

Auf GitHub gibt es eine offizielle Erklärung, dass diese Grube absichtlich hinterlassen wurde. Es wird gesagt, dass die Erkennung aufgrund der Erweiterbarkeit der Schnittstelle (derselbe Name wird automatisch zusammengeführt) unpraktisch ist.

Wenn Generika zum Implementieren einer Funktionsüberladung verwendet werden, müssen bei der Implementierung der Funktion häufig so viele Behauptungen wie erzwungen verwendet werden, da für Generika keine spezifischen Einschränkungen gelten.

//Das ist alles. Ich bin zu faul, den folgenden Code tatsächlich zu testen 🙃

//fns ist eine Funktionsindextabelle, TFns ist der Konstantentyp der Indextabelle. Funktionsüberladung fehlgeschlagen <T extends keyof TFns>(fn:T, params: Parameters<fns[T]>){
    fns[fn](...params) //Bei der Implementierung wird der Union-Typ nicht eingegrenzt, daher wird ein Fehler gemeldet //Der Fehler sollte etwa lauten: „Die Parameter von Methode 1 konnten nicht an Methode 2 übergeben werden“}
//Aber bei externer Verwendung spielt es keine Rolle, ob die Semantik des Typs erfüllt ist

Der Spread-Operator ist nicht intuitiv: [...string[], number] ist intuitiv zu verwenden (erfordert ein Zahlenelement am Ende des Arrays), aber [...string[], null, ...object[], number] ist nicht intuitiv und meldet keinen Fehler. Die neue Version von ts fügt eine Regel hinzu, die kontinuierliche Dekonstruktion verbietet, daher ist diese Art des Schreibens nicht zulässig.

Eigentlich gibt es hier eine Lösung, aber der geschriebene Typ ist einfach unlesbar (Dutzende von Zeilen, darunter eine große Anzahl von Erweiterungen, die als Typ-If-Urteile fungieren), also werde ich sie nicht veröffentlichen. Der Code ist unten aufgeführt:

// Erforderliche Typen: [...number[], "middle-element", ...boolean[]] 
//Das Obige ist ungültig, es gibt nur an, wofür der folgende Typcode verwendet wird (um die oben angegebenen Typbeschränkungen zu implementieren)

Typ Elem = Zahl | Boolesch | „mittleres Element“;

Typ Last<T erweitert beliebig[]> = T erweitert [infer _]
  ? niemals
  : T erweitert [...schließe _, schließe Tl]
  ? Tl
  : niemals

Typ HandleEmpty<T erweitert beliebig[], ​​Daten> = T['Länge'] erweitert 0 ? nie : Daten

Typ Validierung<Params erweitert beliebig[], ​​Cache erweitert Elem[] = []> =
  Parameter erweitert []
  ? Cache['Länge'] erstreckt sich 0
  ? niemals
  : Zwischenspeicher
  : Parameter erweitert [Fst ableiten, ...Rest ableiten]
  ? Cache erweitert []
  ? Fst erweitert Nummer
  ? HandleEmpty<Rest, Validierung<Rest, [...Cache, Fst]>>
  : niemals
  : Fst erweitert Nummer
  ? Last<Cache> erweitert Nummer
  ? HandleEmpty<Rest, Validierung<Rest, [...Cache, Fst]>>
  : niemals
  : Fst erweitert "Mittelelement"
  ? Last<Cache> erweitert Nummer
  ? HandleEmpty<Rest, Validierung<Rest, [...Cache, Fst]>>
  : niemals
  : "mittleres Element" erweitert Cache[Zahl]
  ? Fst erweitert Boolean
  ? Validierung<Rest, [...Cache, Fst]>
  : niemals
  : niemals
  : niemals

Typ IsNever<T> = [T] erweitert [nie]? true : false;

Funktionskontrolle<
  Params erweitert Elem[],
  IsValid erweitert Validation<Params>
>(...arr: IsNever<IsValid> erweitert true ? [nie] : [...Params]) {
  Rückflug an
}

const normal = check(1, 'Mittelelement', false)
const error = check(false, "mittleres Element", 2)

Erweiterte Operationen

Neuzuordnung von Objektnamen:

//{ "new-a":beliebig; "new-b":beliebig }
Typ neu zuordnen = {
    [K in "a" | "b" als `new-${K}`]: beliebig
}

Aufteilen von Union-Typen: Das Schlüsselwort infer kann zum Aufteilen von Union-Typen verwendet werden.

//"a1"|"b2"
Typaufteilung erfolgreich <_Keys = keyof { a: 1, b: 2 }> = _Keys erweitert Infer K?
    `${Extrahieren<K, string>}${{ a: 1, b: 2 }[Extrahieren<K, _Keys>]}`
    : niemals

// Hinweis: (ab ts4.4.4) Direkt kann „keyof Obj extends infer K“ den Union-Typ nicht aufteilen, der Grund ist unbekannt (zu faul, das zu überprüfen 😁).
//Das Ergebnis ist "a1"|"a2"|"b1"|"b2"
Typaufteilung fehlgeschlagen = keyof { a: 1, b: 2 } erweitert Infer K?
    `${Extrahieren<K, string>}${{ a: 1, b: 2 }[Extrahieren<K, "a" | "b">]}`
    : niemals

Tupeltypen:

  • Die tatsächlichen (nicht typbezogenen) Parameter müssen manchmal explizit mit „as const“ als Tupeltypen deklariert werden.
  • Tupeltypen können über tuple["length"] die exakte Länge statt der Zahl ermitteln.
  • Wenn ein Tupeltyp über einen generischen Parameter verwendet wird, ist es manchmal notwendig, []| hinzuzufügen und es als „Tupel erweitert []|any[]“ zu schreiben, um zu vermeiden, dass es als normaler Array-Typ mit unbestimmter Länge analysiert wird.

Rekursive Typen: Verwenden Sie ...infer More, um Rekursion auf Array-Typen zu implementieren.

Typ Konverter<T> = T erweitert Zeichenfolge ? "str" ​​​​: null
//Es geht als [Zeichenfolge,Zahl,Zeichenfolge] hinein und kommt als ["str",null,"str"] heraus.
Typrekursion<
        Eingabequelle erweitert any[],
        Der interne Typcache erweitert any[] = []
    > = Eingabequelle erweitert [beliebig, ... verbleibende Elemente ableiten]?
        Rekursion <restliche Elemente, [...interner Typcache, Konverter <Eingabequelle [0]>]>
        : Eingangsquelle

Krimskrams

  • & kann anstelle von extends für den Typ verwendet werden. Die Schnittstelle weist keinen weiteren Unterschied auf, außer dass sie Typen mit demselben Namen zusammenführen kann.
  • ts verfügt über einen umfangreichen Satz integrierter Typen. Hier sind einige Beispiele:
    • ReturnType<Funktionstyp>, ruft den Typ des Rückgabewerts des Funktionstyps ab.
    • <Zeichenfolge> kleinschreiben, den ersten Buchstaben des Eingabezeichenfolgentyps auf Kleinschreibung fixieren (weitere Optionen sind Großschreibung des ersten Buchstabens, alles Kleinschreiben und alles Großschreiben).

Anfängern wird empfohlen, die offizielle Website aufzurufen und die Dokumente zu lesen.

Nachdem Sie sich mit ts befasst haben, können Sie auf die neuen Funktionen (Gameplay) achten, die durch die Versionsaktualisierungen bereitgestellt werden.

Zusammenfassen

Dies ist das Ende dieses Artikels, in dem ich die Orte zusammenfasse, an denen ich Zeit mit TypeScript verbracht habe. Weitere relevante Inhalte zu den Orten, an denen ich Zeit mit TypeScript verbracht habe, 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!

<<:  Detaillierte Erklärung zum Schreiben mehrerer Bedingungen von CSS: nicht

>>:  Zusammenfassung der Tests für logische MySQL-Sicherungen und -Wiederherstellungen

Artikel empfehlen

Zusammenfassung gängiger Begriffe in CSS (Cascading Style Sheet)

Wenn Sie CSS verwenden, vergessen Sie nicht, DOCTY...

So laden Sie Komponentenbibliotheken von Drittanbietern bei Bedarf in Vue3

Vorwort Nehmen Sie Element Plus als Beispiel, um ...

So verstecken Sie RAR-Dateien in Bildern

Sie können dieses Logo lokal als .rar-Datei speic...

JavaScript-Selektorfunktionen querySelector und querySelectorAll

Inhaltsverzeichnis 1. querySelector fragt ein ein...

Zusammenfassung der drei Regeln für die React-Statusverwaltung

Inhaltsverzeichnis Vorwort Nr.1 Ein Fokus Nr. 2 E...

Ein Beispiel zum Schreiben eines großen Sonnenwettersymbols in reinem CSS

Wirkung Das Wirkungsdiagramm sieht wie folgt aus ...

Verwendung des MySQL-Stresstesttools Mysqlslap

1. MySQLs eigenes Stresstest-Tool Mysqlslap mysql...

Implementierung eines einfachen Timers in JavaScript

In diesem Artikelbeispiel wird der spezifische Ja...

Detaillierte Erklärung der Grundkonzepte von HTML

Was ist HTML? HTML ist eine Sprache zur Beschreib...

Vue verwendet Canvas-Handschrifteingabe, um Chinesisch zu erkennen

Effektbild: Vorwort: Kürzlich arbeitete ich an ei...