TypeScript: Erlernen der Grundlagen von React

In diesem Artikel werden die Vorteile von Typenkript und deren grundlegende Verwendung untersucht, insbesondere in der React -Entwicklung. Ein früherer Artikel (Link, der für die Kürze weggelassen wurde) umfasste die Einführung und Umgebungs -Setup von TypeScript.

Warum wählen Sie TypeScript?

Die anfängliche Stärke von

JavaScript, Flexibilität, wird in größeren Projekten häufig zu einer Schwäche. Die dynamische Typisierung kann zu Wartungsschwierigkeiten und Skalierbarkeitsproblemen führen. TypeScript befasst sich mit der Einführung statischer Tippen und bietet mehrere wichtige Vorteile:

Frühe Fehlererkennung: Die statische Typisierung ermöglicht eine frühzeitige Identifizierung potenzieller Fehler während der Entwicklung. Der Compiler verhindert die Kompilierung, wenn Typfehler erkannt werden, wodurch die Codezuverlässigkeit verbessert wird.

Verbesserte Skalierbarkeit und Wartbarkeit: Typen und Schnittstellen gewährleisten Codekonsistenz und ordnungsgemäße Verwendung über Module hinweg, was für größere Anwendungen von entscheidender Bedeutung ist. In React garantiert dies die Zuverlässigkeit der Komponenten durch die Durchsetzung der erwarteten Proptypen.

Verbesserte Code -Lesbarkeit und -dauer: Explizite Typisierung verbessert die Code -Klarheit und kommt sowohl dem ursprünglichen Entwickler als auch dem zukünftigen Mitwirkenden zugute. Das Verständnis von Datentypen vereinfacht das Debuggen und Wartung.

Explizite Typing: Die Kernstärke

Die Leistung von

TypeScript liegt in seiner Fähigkeit, variable Typen explizit zu definieren. Während implizite Typisierung möglich ist, erhöht es das Risiko eines unerwarteten Verhaltens. Betrachten Sie diese Beispiele:

<code class="language-typescript">let author: string = "Tyler Meyer";
author = 32; // Error: Type 'number' is not assignable to type 'string'.
console.log(author); // Will not execute due to the error above.</code>

Hier wird author explizit als Zeichenfolge eingegeben, wodurch die Zuordnung einer Zahl verhindert wird.

<code class="language-typescript">let studentGrades: number[] = [80, 85, 93];
studentGrades.push(88); // Valid
studentGrades.push("A"); // Error: Type 'string' is not assignable to type 'number'.
studentGrades.push("97"); // Error: Type 'string' is not assignable to type 'number'.</code>

Das Array ist definiert, um nur Zahlen zu halten. studentGrades

Aliase und Schnittstellen: Verwalten komplexer Typen

Wenn Projekte wachsen, werden Aliase und Schnittstellen für die Verwaltung komplexer Datenstrukturen unerlässlich.

<code class="language-typescript">type Author = {
  firstName: string;
  lastName: string;
  age: number;
  lovesCoding: boolean;
};

const coolAuthor: Author = {
  firstName: "Tyler",
  lastName: "Meyer",
  age: 32,
  lovesCoding: true,
};</code>

Aliase (

) kann mit verschiedenen Datentypen verwendet werden. Schnittstellen (type) sind jedoch speziell für Objekttypen und unterstützen die Vererbung: interface

<code class="language-typescript">interface Book {
  title: string;
  numberOfPages: number;
}

interface Textbook extends Book {
  subject: string;
}

const calculusBook: Textbook = {
  title: "Calculus 4 Dummies",
  numberOfPages: 58,
  subject: "Calculus",
};</code>

TypeScript in React

Für React -Projekte mit

Dateien verbessert TypeScript die Datenflussverwaltung in Komponenten. .tsx

Typ-Safe-Funktionen:

<code class="language-typescript">type Person = {
  name: string;
  age: number;
};

function greeting({ name, age }: Person) {
  return `My name is ${name}, and I am ${age} years old.`;
}

greeting({ name: 'Tyler', age: 32 }); // Valid
greeting({ name: 'Ash', profession: 'Photographer' }); // Error: Missing 'age' property
greeting({ name: 'Sadie', age: '1' }); // Error: Type 'string' is not assignable to type 'number'.</code>

Die Sicherheitstypsicherung

sorgt für die korrekte Parameterverwendung. greeting

typ-safe reag-Komponenten:

<code class="language-typescript">import React from 'react';

type ChildProps = {
  name: string;
  age: number;
  profession: string;
};

function Child({ name, age, profession }: ChildProps) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Profession: {profession}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>This is my child:</h1>
      <Child name="Tyler" age={32} profession="Software Developer" />
    </div>
  );
}</code>

Dieses Beispiel zeigt Typ-sicherer Requisiten in einer React-Komponente.

Quellen: (Links für die Kürze weggelassen) Die Originalquellen wurden zitiert, die Links werden jedoch entfernt, um der Anfrage zu entsprechen, keine externen Links einzuschließen.

Das obige ist der detaillierte Inhalt vonTypeScript: Erlernen der Grundlagen von React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!