Details zum TypeScript-Mapping-Typ

Details zum TypeScript-Mapping-Typ

Vorwort:

Die offizielle Dokumentation von TypeScript wurde vor langer Zeit aktualisiert, aber die chinesische Dokumentation, die ich finden kann, ist noch in einer älteren Version. Daher wurden einige der neuen und überarbeiteten Kapitel übersetzt und aussortiert.

Diese Übersetzung wurde aus dem Kapitel „Zugeordnete Typen“ im TypeScript-Handbuch zusammengestellt.

Dieser Artikel ist nicht streng dem Originaltext entsprechend übersetzt, es werden jedoch einige Erklärungen und Ergänzungen bereitgestellt.

1. Zugeordnete Typen

Manchmal muss ein Typ auf einem anderen Typ basieren, Sie möchten aber keine Kopie erstellen. In diesem Fall können Sie die Verwendung eines Zuordnungstyps in Betracht ziehen.

Zuordnungstypen basieren auf der Syntax von Indexsignaturen. Sehen wir uns zunächst die Indexsignaturen an:

// Wenn Sie den Typ der Eigenschaft im Voraus deklarieren müssen, geben Sie OnlyBoolsAndHorses = { ein.
  [Schlüssel: Zeichenfolge]: Boolesch | Pferd;
};
 
const entspricht: OnlyBoolsAndHorses = {
  del: wahr,
  rodney: falsch,
};


Der Zuordnungstyp ist ein generischer Typ, der PropertyKeys verwendet, wobei PropertyKeys normalerweise über keyof erstellt wird, und dann die Schlüsselnamen durchläuft, um einen Typ zu erstellen:

Typ OptionsFlags<Typ> = {
  [Eigenschaft im Keyof-Typ]: Boolean;
};


In diesem Beispiel iteriert OptionsFlags über alle Eigenschaften des Typs und setzt sie auf den Booleschen Typ.

Typ FeatureFlags = {
  dunkler Modus: () => ungültig;
  neuesBenutzerprofil: () => void;
};
 
Typ FeatureOptions = OptionsFlags<FeatureFlags>;
// Typ FeatureOptions = {
// Dunkelmodus: Boolesch;
// neuesBenutzerprofil: boolean;
// }


2. Mapping-Modifikatoren

Bei Verwendung eines zugeordneten Typs können zwei zusätzliche Modifikatoren verwendet werden: einer ist „readonly“, mit dem die Eigenschaft auf schreibgeschützt festgelegt wird, und der andere ist „?“, mit dem die Eigenschaft auf optional festgelegt wird.

Sie können diese Modifikatoren entfernen oder hinzufügen, indem Sie ihnen - oder + voranstellen. Wenn kein Präfix angegeben ist, entspricht dies der Verwendung des Präfixes +.

// Lösche den schreibgeschützten Attributtyp im Attribut CreateMutable<Type> = {
  -readonly [Eigenschaft im Schlüssel des Typs]: Typ[Eigenschaft];
};
 
Typ GesperrtesKonto = {
  schreibgeschützte ID: Zeichenfolge;
  schreibgeschützter Name: Zeichenfolge;
};
 
Typ UnlockedAccount = CreateMutable<LockedAccount>;

// Typ UnlockedAccount = {
// ID: Zeichenfolge;
// Name: Zeichenfolge;
// }
// Lösche das optionale Attribut type im Attribut Concrete<Type> = {
  [Eigenschaft im Schlüssel des Typs]-?: Typ[Eigenschaft];
};
 
Typ VielleichtBenutzer = {
  ID: Zeichenfolge;
  Name?: Zeichenfolge;
  Alter?: Zahl;
};
 
Typ Benutzer = Konkret<VielleichtBenutzer>;
// Typ Benutzer = {
// ID: Zeichenfolge;
// Name: Zeichenfolge;
//Alter: Zahl;
// }

3. Tastenbelegung über as

In TypeScript 4.1 und höher können Sie Schlüssel in zugeordneten Typen mit der as-Anweisung neu zuordnen:

Typ MappedTypeWithNewProperties<Typ> = {
    [Eigenschaften im Schlüssel des Typs als NewKeyType]: Typ [Eigenschaften]
}


Sie können beispielsweise Template Literal Types verwenden, um einen neuen Eigenschaftsnamen auf Grundlage eines vorherigen Eigenschaftsnamens zu erstellen:

Typ Getter<Typ> = {
    [Eigenschaft im Schlüssel des Typs als `get${Capitalize<string & Property>}`]: () => Typ[Eigenschaft]
};
 
Schnittstelle Person {
    Name: Zeichenfolge;
    Alter: Anzahl;
    Standort: Zeichenfolge;
}
 
Typ LazyPerson = Getters<Person>;

// Typ LazyPerson = {
// getName: () => Zeichenfolge;
// getAge: () => Zahl;
// getLocation: () => Zeichenfolge;
// }

Sie können auch den bedingten Typ verwenden, um ein „Niemals“ zurückzugeben und so bestimmte Attribute herauszufiltern:

// Entfernen Sie die Eigenschaft „kind“
Typ RemoveKindField<Typ> = {
    [Eigenschaft im Schlüssel des Typs als Exclude<Eigenschaft, "kind">]: Typ[Eigenschaft]
};
 
Schnittstelle Kreis {
    Art: "Kreis";
    Radius: Zahl;
}
 
Typ KindlessCircle = RemoveKindField<Kreis>;

// Typ KindlessCircle = {
// Radius: Zahl;
// }

Sie können auch über jeden Vereinigungstyp iterieren, nicht nur über string | number | symbol , sondern über jeden Vereinigungstyp:

Typ EventConfig<Events erweitert { Art: Zeichenfolge }> = {
    [E in Ereignissen als E["Art"]]: (Ereignis: E) => ungültig;
}
 
Typ SquareEvent = { Art: "Quadrat", x: Zahl, y: Zahl };
Typ CircleEvent = { Art: "Kreis", Radius: Zahl };
 
Typ Konfiguration = EventConfig<Quadratereignis | Kreisereignis>
// Typ Konfiguration = {
// Quadrat: (Ereignis: Quadratereignis) => void;
// Kreis: (Ereignis: Kreisereignis) => void;
// }

4. Weitere Erkundung

Mapping-Typen können auch mit anderen Funktionen verwendet werden. Dies ist beispielsweise ein Mapping-Typ, der bedingte Typen verwendet und true oder false zurückgibt, je nachdem, ob das Objekt ein pii-Attribut hat:

Typ ExtractPII<Typ> = {
  [Eigenschaft im Schlüssel des Typs]: Typ [Eigenschaft] erweitert { pii: true } ? true : false;
};
 
Typ DBFields = {
  ID: {Format: "inkrementierend"};
  Name: { Typ: Zeichenfolge; pii: true };
};
 
Typ ObjectsNeedingGDPRDeletion = ExtractPII<DBFields>;
// Typ ObjectsNeedingGDPRDeletion = {
// ID: falsch;
// Name: wahr;
// }

Das könnte Sie auch interessieren:
  • Erklärung der gängigen TypeScript-Typen und Anwendungsbeispiele
  • Bringen Sie Ihnen bei, Typescript-Typen zur Berechnung von Fibonacci zu verwenden
  • Detaillierte Erklärung der grundlegenden Typen von TypeScript
  • TypeScript-Aufzählungstyp
  • Einführung in die grundlegenden TypeScript-Typen
  • Lassen Sie uns gemeinsam TypeScript-Typen lernen

<<:  Detaillierter Prozess zum Upgrade von gcc (Version 10.2.0) in der CentOS7-Umgebung

>>:  So zeigen Sie Webseiten in verschiedenen Auflösungen und Browsern richtig an

Artikel empfehlen

Wie wirkt sich der zusammengesetzte Index von MySQL aus?

Inhaltsverzeichnis Hintergrund Zusammengesetzte I...

Detaillierte Erklärung, wie Vue-Komponenten Werte untereinander übertragen

Inhaltsverzeichnis Überblick 1. Die übergeordnete...

Detaillierte Schritte zur vollständigen Deinstallation von MySQL 5.7

Dieser Artikel fasst hauptsächlich verschiedene P...

Detailliertes Tutorial zur Konfiguration von Docker nginx + https-Subdomains

Heute habe ich zufällig einem Freund beim Umzug s...

Was ist TypeScript?

Inhaltsverzeichnis 1. JavaScript-Probleme 2. Vort...

Detailliertes Tutorial zum Konfigurieren der lokalen Yum-Quelle in CentOS8

Die Centos8-Distribution wird über die BaseOS- un...

Bedingte Kommentare zur Bestimmung des Browsers (IE-Reihe)

<!--[if IE 6]> Nur IE6 kann erkennen <![e...

CSS-Syntax für Tabellenränder

<br /> CSS-Syntax für Tabellenränder Zu den ...

Tutorial zur Installation und Verwendung von virtualenv in Deepin

virtualenv ist ein Tool zum Erstellen isolierter ...

Das Submit-Ereignis des Formulars reagiert nicht

1. Problembeschreibung <br />Wenn JS verwen...