In React mit TypeScript können wir zwei Hauptansätze zum Erstellen von Komponenten verwenden: Funktions- und Klassenkomponenten. Beide Ansätze ermöglichen die Arbeit mit Requisiten und Zuständen, verwenden jedoch leicht unterschiedliche Paradigmen. TypeScript erhöht die Entwicklungssicherheit weiter, indem es eine statische Typisierung bereitstellt, die es uns ermöglicht, die Form von Requisiten und Zuständen präzise zu definieren.

Im Folgenden sehen wir uns Beispiele verschiedener Komponenten an, die Schnittstellen zum Definieren von Typen verwenden, um die Konsistenz und Lesbarkeit des Codes sicherzustellen.

F-1. Funktionskomponente ohne Requisiten und Zustand

In diesem Fall sieht eine einfache funktionale Komponente, die weder Requisiten noch Status verwendet, so aus:

import React from 'react';

const FunctionalComponent: React.FC = () => {
  return 
Hello, DEV.to!
;
};

Diese Komponente zeigt nur statischen Text an.

F-2. Funktionskomponente mit Requisiten

Wenn wir Daten über Requisiten weiterleiten möchten, verwenden wir Schnittstellen, um die Form dieser Daten zu definieren:

import React from 'react';

interface IMyProps {
  name: string;
}

const FunctionalComponentWithProps: React.FC = ({ name }) => {
  return 
Hello, {name}!
;
};

Hier enthält IMyProps den Namen, der zur Anzeige der personalisierten Begrüßung verwendet wird.

F-3. Funktionskomponente mit Zustand

Bei der Verwendung von Status in Funktionskomponenten verwenden wir den useState-Hook von React:

import React, { useState } from 'react';

const FunctionalComponentWithState: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

Diese Komponente verwendet den lokalen Status, um Zähler zu verfolgen.

F-4. Eine funktionale Komponente mit Requisiten und Status

Durch die Kombination von Requisiten und Status können wir flexible Komponenten haben, die Daten über Requisiten empfangen und den Status intern manipulieren:

import React, { useState } from 'react';

interface IMyProps {
  initialCount: number;
}

const FunctionalComponentWithPropsAndState: React.FC = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

Diese Komponente verwendet initialCount als Requisite und einen internen Status für die dynamische Zählerverfolgung.

K-1. Klassenkomponente ohne Requisiten und Status

Eine Klassenkomponente ohne Requisiten und Status in React sieht so aus:

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return 
Hello, DEV.to!
;
  }
}

Dies ist eine einfache Klassenkomponente, die statischen Text anzeigt.

K-2. Klassenkomponente mit Requisiten

Wenn eine Klassenkomponente Requisiten empfängt, definieren wir sie über die Schnittstelle:

import React from 'react';

interface IMyProps {
  name: string;
}

class ClassComponentWithProps extends React.Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

Wie bei der Funktionskomponente verwenden wir hier Requisiten, um personalisierte Daten anzuzeigen.

K-3. Klassenkomponente mit Status

Für Klassenkomponenten mit Status definieren wir den Status innerhalb des Konstruktors:

• Leere Klammern im Konstruktor

Wenn Sie keine Requisiten verwenden, können Sie die Klammern im Konstruktor einfach leer lassen:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor() {
    super({});
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

• Geben Sie {} explizit als Typ für Requisiten an

Wenn Sie Requisiten explizit angeben möchten, können Sie {} als Typ angeben:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

-> In beiden Fällen funktionieren TypeScript und React korrekt. Wenn Ihre Komponente keine Requisiten verwendet, können Sie im Konstruktor einfach leere Klammern verwenden. Achten Sie jedoch darauf, {} im Superaufruf zu übergeben, um Initialisierungsfehler zu vermeiden.

Diese Komponente verwendet den Status, um Zähleränderungen zu verfolgen.

K-4. Eine Klassenkomponente mit Requisiten und Status

Für Klassenkomponenten, die sowohl Requisiten als auch Status verwenden, können wir beide Konzepte kombinieren:

import React from 'react';

interface IMyProps {
  initialCount: number;
}

interface IMyState {
  count: number;
}

class ClassComponentWithPropsAndState extends React.Component {
  constructor(props: IMyProps) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

Diese Komponente erhält einen anfänglichen Zähler durch Requisiten und manipuliert den Status intern weiter.

Die Verwendung von Schnittstellen in TypeScript sorgt für eine bessere Eingabe und eine einfachere Lesbarkeit des Codes, insbesondere bei der Arbeit mit komplexeren Datenstrukturen. Mit diesen grundlegenden Beispielen verfügen Sie über eine Grundlage für das Schreiben von Funktions- und Klassenkomponenten mit React und TypeScript.