Zusammenfassung der Verwendung von TypeScript in React-Projekten

Vorwort

Dieser Artikel konzentriert sich auf die Verwendung von TypeScript (im Folgenden als TS bezeichnet) in Verbindung mit React in Projekten und nicht auf die grundlegenden Konzepte von TS. Zur TS-Typprüfung können Sie Online-TS-Tools verwenden 👉TypeScript Playground

Reagieren Sie auf Element bezogen

Zu den mit React-Elementen verbundenen Typen zählen hauptsächlich ReactNode , ReactElement und JSX.Element .

• ReactNode . Stellt jeden beliebigen Typ von React-Knoten dar. Dies ist ein Union-Typ, der viele Situationen abdeckt.
• ReactElement/JSX . Aus Leistungssicht können die beiden als konsistent betrachtet werden, da sie zur Teilmenge von ReactNode gehören und „native DOM-Komponenten“ oder „Ausführungsergebnisse von benutzerdefinierten Komponenten“ darstellen.

Nachfolgend sind einige Anwendungsbeispiele aufgeführt:

const MyComp: React.FC<{ title: string; }> = ({title}) => <h2>{title}</h2>;

// ReagierenNode
const a: React.ReactNode =
  null ||
  undefiniert || <div>Hallo</div> || <MyComp title="Welt" /> ||
  "abc" ||
  123 ||
  WAHR;

// ReactElement und JSX.Element
const b: React.ReactElement = <div>Hallo Welt</div> || <MyComp title="gut" />;

const c: JSX.Element = <MyComp title="good" /> || <div>Hallo Welt</div>;

Bezogen auf natives DOM

Zu den nativen DOM-bezogenen Typen gehören hauptsächlich die folgenden: Element , HTMLElement , HTMLxxxElment .

Einfach ausgedrückt: Element = HTMLElement + SVGElement .

SVGElement wird in der allgemeinen Entwicklung selten verwendet, HTMLElement hingegen sehr häufig. Zu seinen Untertypen zählen HTMLDivElement , HTMLInputElement , HTMLSpanElement usw.

Daher wissen wir, dass die Beziehung lautet: Element > HTMLElement > HTMLxxxElement . Grundsätzlich ist es besser, so detailliert wie möglich zu schreiben.

Reagieren Sie auf synthetische Ereignisse

In React werden native Ereignisse in React-Ereignisse verarbeitet, die den Speicher intern optimieren und die DOM-Ereignisbindung durch Ereignisdelegation reduzieren. Zurück zum Thema: Das allgemeine Format von React-Ereignissen ist [xxx]Event, gängige sind MouseEvent , ChangeEvent , TouchEvent , ein generischer Typ, und die generische Variable ist der Typ des DOM-Elements, das das Ereignis auslöst.

Hier ist ein Beispiel:

// Text in das Eingabefeld eingeben const handleInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
  Konsole.log(evt);
};

// Schaltflächenklick const handleButtonClick = (evt: React.MouseEvent<HTMLButtonElement>) => {
  Konsole.log(evt);
};

// Mobiles Terminal Touch-Div
const handleDivTouch = (evt: React.TouchEvent<HTMLDivElement>) => {
  Konsole.log(evt);
};

Kombination mit Haken

Nicht alle Hooks sind eng mit TS verknüpft. Beispielsweise verlässt sich useEffect bei der Typdefinition nicht auf TS. Sehen wir uns einige gängige Hooks an, die eng mit TS verknüpft sind.

Verwendungsstatus

Wenn der Anfangswert den Typ beschreiben kann, muss für useState keine generische Variable angegeben werden.

// ❌Dies ist unnötig, da der Anfangswert 0 bereits den Zähltyp beschreibt const [count, setCount] = useState<number>(0);

// ✅Das ist besser const [count, setCount] = useState(0);

Wenn der Anfangswert null oder undefiniert ist, müssen Sie den erwarteten Typ manuell über Generika übergeben und Syntaxfehler durch optionale Verkettung beim Zugriff auf Eigenschaften vermeiden.

Schnittstelle IUser {
  Name: Zeichenfolge;
  Alter: Anzahl;
}

const [Benutzer, setUser] = React.useState<IUser | null>(null);

console.log(Benutzer?.Name);

useRef

Dieser Haken ist etwas ganz Besonderes. Normalerweise hat er zwei Verwendungszwecke:

Wird verwendet, um eine Verbindung mit DOM herzustellen und DOM-Elemente zu erhalten.

// Mit DOM verbinden, der Anfangswert ist null, nicht undefiniert. Wenn Sie eine generische Variable angeben möchten, müssen Sie HTMLxxxElement angeben
// Wenn wir sicher sind, dass inputRef.current beim Aufruf einen Wert haben muss, können wir eine nicht-Null-Assertion verwenden und sie nach Null hinzufügen!
const inputRef = useRef<HTMLInputElement>(null!);

const handleClick = () => {
  inputRef.current.focus(); // Natürlich brauchen Sie keine Nicht-Null-Assertion, Sie können auch inputEl.current?.focus() optionale Verkettung verwenden}

zurückkehren (
  <input ref={inputRef} />
  <button onClick={handleClick}>Klick</button>
)

2. Wird zum Speichern von Variablen verwendet. Da es außerhalb der Funktionskomponente gespeichert wird, gibt es im Vergleich zu useState weder das Problem asynchroner Aktualisierungen noch das Problem veralteter Variablen, das durch capture-value verursacht wird. Es ist jedoch zu beachten, dass nach der Zuweisung kein erneutes Rendern erfolgt, da sich die Ref-Referenz nicht geändert hat.

// Automatische Festlegung des generischen Variablentyps durch den Initialwert const sum = useRef(0);

// Direkte Zuweisung von sum.current = 3 über .current;
// Es liegt kein asynchrones Update-Problem vor console.log(sum.current); // 3

verwendenSelector

useSelector wird verwendet, um den Status im Store abzurufen. Sein erster fester Parameter ist eine Funktion, und der Eingabeparameter der Funktion ist der Store. Der Typ des Stores, RootState, muss im Voraus im Store definiert werden. Eine gängige Definition lautet wie folgt:

Im store.ts:

Konstantenspeicher = createStore(rootReducer);

Exporttyp RootState = ReturnType<Typ des RootReducer>;

Bei Verwendung von:

const { var1, var2 } = useSelector((store: RootState) => store.xxx);

Benutzerdefinierte Haken

Wenn wir ein Array auf die gleiche Weise wie useState zurückgeben müssen, müssen wir am Ende des Rückgabewerts „as const“ verwenden, um ihn als Konstante zu kennzeichnen. Andernfalls wird davon ausgegangen, dass der zurückgegebene Wert ein Union-Typ ist.

const useInfo = () => {
  const [Alter, Alter festlegen] = useState(0);

  return [Alter, Alter festlegen] als Konstante; // Der Typ ist ein Tupel, [Zahl, React.Dispatch<React.SetStateAction<Zahl>>]
};

Redux-bezogen

Für die Definition einer Aktion können wir die offiziell freigegebene AnyAction verwenden und die Einschränkungen für die Schlüssel-Wert-Paare innerhalb der Aktion wie folgt lockern:

importiere { AnyAction } von "redux";

const DEF_STATE = {
  Anzahl: 0,
  Typ: "Ganzzahl"
};

// Verwenden Sie AnyAction von Redux, um Einschränkungen zu lockern. Funktion countReducer(state = DEF_STATE, action: AnyAction) {
  Schalter (Aktion.Typ) {
    Fall "INCREASE_COUNT":
      zurückkehren {
        ...Zustand,
        Anzahl: Status.Anzahl + 1,
      };
    Fall "DECREASE_COUNT":
      zurückkehren {
        ...Zustand,
        Anzahl: Status.Anzahl - 1,
      };
    Standard:
      Rückgabezustand;
  }
}

Standard-CountReducer exportieren;

Vorschriften

Die Eingabeparameter der Unterkomponente werden als [Komponentenname]-Props bezeichnet, beispielsweise:

// Der aktuelle Komponentenname lautet beispielsweise InfoCard
Schnittstelle InfoCardProps exportieren {
  Name: Zeichenfolge;
  Alter: Anzahl;
}

Schnittstellentypen beginnen mit einem Großbuchstaben;

Schreiben Sie Schnittstellen für die Eingabe- und Ausgabeparameter der Backend-Schnittstelle und verwenden Sie den jsdoc-Stil, um Kommentare zu verfassen, die für Editor-Eingabeaufforderungen praktisch sind, wie zum Beispiel:

Exportschnittstelle GetUserInfoReqParams {
    /** Name*/
    Name: Zeichenfolge;
    /** Alter*/
    Alter: Anzahl;
    /** Geschlecht*/
    Geschlecht: Zeichenfolge;
}

andere

Sie wissen nicht genau, was Sie mit dem Schlüsselnamen oder -wert tun sollen?

// Gibt an, dass der Schlüsselname unsicher ist und der Schlüsselwert auf den Zahlentyp beschränkt ist. Exportschnittstelle NotSureAboutKey {
  [Schlüssel: Zeichenfolge]: Zahl;
}

// Wenn der Schlüsselname und der Wert unsicher sind, ist die folgende Schnittstelle auf jede Objektexportschnittstelle anwendbar: AllNotSure {
  [Schlüssel: Zeichenfolge]: beliebig;
}

Wie verwende ich generische Variablen in Schnittstellen?

Bei den sogenannten Generics handelt es sich um vordefinierte Typen. Sein Zweck besteht darin, lokale Flexibilität bei der Typdefinition zu erreichen und die Wiederverwendbarkeit zu verbessern. Wir verwenden in Schnittstellen üblicherweise Generika wie:

// Normalerweise geben wir einen Standardtyp für die generische Variable der Schnittstelle interface IHuman<T = unknown> {
  Name: Zeichenfolge;
  Alter: Anzahl;
  Geschlecht: T;
}

// Bei Verwendung an anderer Stelle const youngMan: IHuman<string> = {
    Name: 'zhangsan',
    Alter: 18,
    Geschlecht: 'männlich'
}

Damit ist dieser Artikel über die Verwendung von TypeScript in React-Projekten abgeschlossen. Weitere Informationen zur Verwendung von TypeScript in React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!