Bauen mit TypeScript: Ein Lego-basierter Leitfaden

TypeScript: Der reibungslose Übergang von JavaScript zu TypeScript ist wie ein Upgrade Ihres Lego-Bauprozesses!

„Tu, was du kannst, nutze, was du hast“ – das ist eines meiner Mottos. Dieser Satz spiegelt auch einen Teil der Wachstumsmentalität wider. Die meisten von uns Frontend- oder JavaScript-Entwicklern haben bereits mit TypeScript begonnen oder sind vollständig auf TypeScript umgestiegen. Einige Leute haben jedoch möglicherweise immer noch Schwierigkeiten, die Konzepte zu verstehen oder ihre Denkweise von JavaScript auf TypeScript umzustellen. Um dieses Problem zu lösen, werden wir eines meiner Lieblingswerkzeuge verwenden: Legos. Beginnen wir hier: „Stellen Sie sich JavaScript als einen grundlegenden Satz von Legosteinen vor, den Sie frei erstellen können. TypeScript ist derselbe Satz von Bausteinen, jedoch mit detaillierten Anweisungen und Qualitätskontrollprüfungen.“ kann hier, hier und auf dieses Video verwiesen werden. Dieser Leitfaden soll zeigen, wie jedes JavaScript-Konzept in TypeScript übersetzt werden kann. Dabei werden Lego-Analogien verwendet, um Ihnen das Verständnis der Konzepte zu erleichtern.

Variabler Umfang und Heben: Einen Raum bauen

Konzeptdefinition

Variablenbereich bezieht sich auf den Kontext, in dem auf Variablen zugegriffen und diese in einem Programm verwendet werden können. Es gibt zwei Haupttypen von Bereichen: lokaler Bereich und globaler Bereich. Eine außerhalb einer Funktion deklarierte Variable befindet sich im globalen Gültigkeitsbereich, was bedeutet, dass auf sie überall im Code zugegriffen und sie geändert werden kann. Andererseits befinden sich innerhalb einer Funktion deklarierte Variablen im lokalen Gültigkeitsbereich und können nur innerhalb dieser Funktion aufgerufen werden. JavaScript verwendet die Schlüsselwörter var, let und const zum Deklarieren von Variablen, und jedes Schlüsselwort hat eine andere Auswirkung auf den Bereich. Mit let und const deklarierte Variablen sind blockbezogen, was bedeutet, dass auf sie nur innerhalb des nächstgelegenen umschließenden Blocks {} zugegriffen werden kann. Im Gegensatz dazu ist var funktionsbezogen, sodass es in der gesamten Funktion verfügbar ist, in der es deklariert wird. Ein klares Verständnis des Variablenbereichs hilft, Probleme wie Variablennamenkonflikte und unerwartete Nebenwirkungen in JavaScript-Programmen zu vermeiden.

Beim Hochziehen werden Variablen- und Funktionsdeklarationen an den Anfang ihres enthaltenden Bereichs verschoben, bevor der Code ausgeführt wird (Kompilierungsphase). Dies bedeutet, dass Variablen und Funktionen verwendet werden können, bevor sie deklariert werden. Funktionsdeklarationen werden vollständig hochgehoben, sodass sie bereits aufgerufen werden können, bevor sie im Code definiert werden. Mit var deklarierte Variablen werden jedoch angehoben, aber nicht auf ihren Anfangswert initialisiert, sodass ein Zugriff auf sie vor der Zuweisung zu undefined führt. Mit let und const deklarierte Variablen werden ebenfalls angehoben, aber nicht initialisiert, was zu ReferenceError führen würde, wenn vor der Deklaration darauf zugegriffen würde. Das Verständnis von Promotion hilft Entwicklern, häufige Fallstricke zu vermeiden, indem sie Variablen- und Funktionsdeklarationen korrekt erstellen.

Lego-Analogie

Stellen Sie sich Scopes als verschiedene Lego-Räume vor:

• Globaler Geltungsbereich: Alle Bauherren haben Zugang zum gemeinsamen Wohnzimmer der Bausteine.
• Funktionsumfang: persönlicher Bautisch.
• Blockbereich: Erstellen Sie einen bestimmten Bereich der Tabelle.

JavaScript-Implementierung

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

TypeScript-Evolution

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

Funktionen und Verschlüsse: Bauanleitung

Konzeptdefinition

Funktionen sind wiederverwendbare Codeblöcke, die zur Ausführung einer bestimmten Aufgabe entwickelt wurden. Dies verbessert die Modularität und Code-Effizienz. Sie können mit dem Schlüsselwort function definiert werden, gefolgt von einem Namen, Klammern () und einem in geschweiften Klammern eingeschlossenen Codeblock {}. Argumente können in Klammern oder geschweiften Klammern an eine Funktion übergeben werden, die als Platzhalter für die beim Aufruf der Funktion bereitgestellten Werte dienen. JavaScript unterstützt auch anonyme Funktionen (ohne Namen) und Pfeilfunktionen (für eine sauberere Syntax). Funktionen können die return-Anweisung verwenden, um einen Wert zurückzugeben, oder Vorgänge ausführen, die keinen Wert zurückgeben. Darüber hinaus sind Funktionen in JavaScript erstklassige Objekte, was bedeutet, dass sie Variablen zugewiesen, als Argumente übergeben und von anderen Funktionen zurückgegeben werden können, wodurch das funktionale Programmiermuster ermöglicht wird.

Abschlüsse sind eine leistungsstarke Funktion, die es einer Funktion ermöglicht, sich ihren lexikalischen Bereich zu merken und darauf zuzugreifen, selbst wenn die Funktion außerhalb dieses Bereichs ausgeführt wird. Abschlüsse können erstellt werden, wenn eine Funktion innerhalb einer Funktion definiert wird und auf Variablen in der äußeren Funktion verweist. Auch nachdem die Ausführung der äußeren Funktion abgeschlossen ist, kann die innere Funktion weiterhin auf diese Variablen zugreifen. Diese Funktion ist nützlich für die Datenkapselung und die Aufrechterhaltung des Status in Umgebungen wie Ereignishandlern oder Rückrufen. Abschlüsse unterstützen Muster wie private Variablen, bei denen Funktionen bestimmtes Verhalten offenlegen und Implementierungsdetails verbergen können.

Lego-Analogie

• Funktionen sind wie Bauanleitungen.
• Parameter sind wie erforderliche Bausteine.
• Der Rückgabewert ist wie eine fertige Struktur.
• Ein Verschluss ist wie ein versiegelter Bausatz mit ein paar fest enthaltenen Bausteinen.

JavaScript-Implementierung

<code class="language-javascript">function buildHouse(floors, color) {
    const foundation = "concrete";

    return function addRoof(roofStyle) {
        return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
    };
}</code>

TypeScript-Evolution

<code class="language-typescript">// 带有类型的基本函数
interface House {
    floors: number;
    color: string;
    roofStyle: string;
    foundation: string;
}

// 为我们的搭建者添加类型安全
function buildHouse(
    floors: number,
    color: string
): (roofStyle: string) => House {
    const foundation = "concrete";

    return (roofStyle: string): House => ({
        floors,
        color,
        roofStyle,
        foundation
    });
}

// 真实世界的例子：组件工厂
interface ComponentProps {
    id: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

function createComponent<T extends ComponentProps>(
    baseProps: T
): (additionalProps: Partial<T>) => React.FC<T> {
    return (additionalProps) => {
        // 组件实现
        return (props) => <div></div>;
    };
}</code>

Objekte und Prototypen: Bautipps

Konzeptdefinition

Objekte in JavaScript sind grundlegende Datenstrukturen, die als Container für verwandte Daten und Funktionen dienen. Sie bestehen aus Schlüssel-Wert-Paaren, wobei jeder Schlüssel (Eigenschaft) einem Wert zugeordnet ist, der ein beliebiger gültiger JavaScript-Typ sein kann, einschließlich Funktionen (Methoden). Objekte können auf verschiedene Arten erstellt werden:

• Objektliteral: const obj = {}
• Konstrukteur: new Object()
• Object.create()Methode

Das Prototypsystem ist der in JavaScript integrierte Vererbungsmechanismus. Jedes Objekt verfügt über eine interne Verbindung zu einem anderen Objekt, die als Prototyp bezeichnet wird. Beim Versuch, auf eine Eigenschaft zuzugreifen, die in einem Objekt nicht vorhanden ist, sucht JavaScript automatisch danach in seiner Prototypenkette. Diese Objektkette wird fortgesetzt, bis sie ein Objekt mit dem null-Prototyp erreicht, normalerweise Object.prototype. Das Verständnis von Prototypen ist entscheidend für:

• Vererbung implementieren
• Methoden zwischen Instanzen teilen
• Speichereffizienz verwalten
• Objekthierarchie erstellen

Lego-Analogie

Stellen Sie sich solche Objekte und Prototypen vor:

• Objekte sind wie spezielle LEGO-Bausätze mit ihren eigenen einzigartigen Steinen und Anweisungen.
• Ein Prototyp ist wie eine Mastervorlage, auf die mehrere Kits verweisen können.
• Vererbung ist wie eine Basis-Suite, aus der erweiterte Suiten erstellt werden können.
• Eigenschaften sind wie spezifische Bausteine ​​in jedem Kit.
• Methoden sind wie spezielle Bautipps, die in jedem Kit enthalten sind.

JavaScript-Implementierung

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

TypeScript-Evolution

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

Asynchrone Programmierung: Ein Team aufbauen

Konzeptdefinition

Asynchrone Funktionen und Programmierung

Asynchrone Funktionen sind ein spezieller Funktionstyp in JavaScript, der eine elegante Möglichkeit zur Handhabung asynchroner Vorgänge bietet. Wenn diese Funktionen mit dem Schlüsselwort async deklariert werden, geben sie automatisch ein Promise zurück und ermöglichen die Verwendung des Schlüsselworts await in ihrem Hauptteil. Der await-Operator unterbricht die Ausführung einer Funktion, bis das Versprechen aufgelöst oder abgelehnt wird, sodass asynchroner Code in einem synchroneren und lesbareren Stil geschrieben werden kann. Diese Syntax reduziert effektiv die Komplexität von Rückrufen und macht verschachtelte Promise-Ketten überflüssig. In async function fetchData() { const response = await fetch(url); } wartet die Funktion beispielsweise auf den Abschluss des fetch-Vorgangs, bevor sie mit der Ausführung fortfährt. Dadurch wird das Verhalten des Codes vorhersehbarer und gleichzeitig sichergestellt, dass der Hauptthread nicht blockiert bleibt. Dieses Muster ist besonders nützlich, wenn es um mehrere voneinander abhängige asynchrone Vorgänge geht, da es Entwicklern ermöglicht, Code zu schreiben, der die Reihenfolge der Vorgänge klar zum Ausdruck bringt, ohne die Leistung zu beeinträchtigen.

Versprochen

Versprechen stellt einen Wert dar, der jetzt, in der Zukunft oder nie verfügbar sein kann. Es handelt sich um ein Objekt mit drei möglichen Status: Ausstehend, Abgeschlossen oder Abgelehnt. Es wird zur Abwicklung asynchroner Vorgänge verwendet. Versprechen verfügen über Methoden wie .then(), .catch() und .finally() zum Verketten von Aktionen basierend auf dem Ergebnis. Dies macht sie zu einer leistungsstarken Alternative zu verschachtelten Rückrufen und verbessert die Lesbarkeit des Codes und die Fehlerbehandlung.

Lego-Analogie

• Asynchrone Funktionen sind wie Teammitglieder, die an verschiedenen Teilen arbeiten.
• Versprechen ist wie eine Vereinbarung zur Lieferung des fertigen Teils.

JavaScript-Implementierung

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

TypeScript-Evolution

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

Moderne Funktionen: Fortschrittliche Bautechniken

Konzeptdefinition

Dekonstruktion

Dies ist eine praktische Möglichkeit, Werte aus einem Array oder Eigenschaften aus einem Objekt in verschiedene Variablen zu extrahieren. Bei der Array-Destrukturierung werden eckige Klammern [] verwendet, während bei der Objektdestrukturierung geschweifte Klammern {} verwendet werden. Diese Syntax reduziert den Bedarf an doppeltem Code, indem Werte direkt in Variablen entpackt werden, was den Umgang mit komplexen Datenstrukturen erleichtert. Beispielsweise weist const [a, b] = [1, 2] a 1 und b 2 zu, während const { name } = person das Namensattribut aus dem Personenobjekt extrahiert.

Operator erweitern

Der Spread-Operator wird durch drei Punkte (...) dargestellt. Es ermöglicht die Erweiterung iterierbarer Objekte wie Arrays oder Objekte, wenn mehrere Elemente oder Schlüssel-Wert-Paare erforderlich sind. Es kann zum Kopieren, Kombinieren oder Übergeben von Array-Elementen als Funktionsargumente verwendet werden. Zum Beispiel const arr = [1, 2, ...anotherArray].

Optionale Kette

Optionale Ketten werden durch ?. dargestellt. Es bietet eine sichere Möglichkeit, auf tief verschachtelte Objekteigenschaften zuzugreifen, ohne Fehler zu verursachen, wenn die Eigenschaft undefiniert oder null ist. Wenn die Referenz null ist, wird sie kurzgeschlossen und sofort undefiniert zurückgegeben. Beispielsweise prüft user?.address?.street, ob Benutzer und Adresse vorhanden sind, bevor auf die Straße zugegriffen wird. Diese Syntax verhindert Laufzeitfehler und macht die Arbeit mit verschachtelten Datenstrukturen sauberer und weniger fehleranfällig, insbesondere bei APIs oder Daten, die auf Benutzereingaben basieren.

Lego-Analogie

• Dekonstruktion ist wie das Sortieren von Bausteinen in Behälter.
• Der Spread-Operator ist wie das Kopieren von Bausteinen zwischen Suiten.
• Optionale Verkettung ist so, als würde man prüfen, ob ein Block existiert, bevor man ihn verwendet.

JavaScript-Implementierung

<code class="language-javascript">function buildHouse(floors, color) {
    const foundation = "concrete";

    return function addRoof(roofStyle) {
        return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
    };
}</code>

TypeScript-Evolution

<code class="language-typescript">// 带有类型的基本函数
interface House {
    floors: number;
    color: string;
    roofStyle: string;
    foundation: string;
}

// 为我们的搭建者添加类型安全
function buildHouse(
    floors: number,
    color: string
): (roofStyle: string) => House {
    const foundation = "concrete";

    return (roofStyle: string): House => ({
        floors,
        color,
        roofStyle,
        foundation
    });
}

// 真实世界的例子：组件工厂
interface ComponentProps {
    id: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

function createComponent<T extends ComponentProps>(
    baseProps: T
): (additionalProps: Partial<T>) => React.FC<T> {
    return (additionalProps) => {
        // 组件实现
        return (props) => <div></div>;
    };
}</code>

Zusammenfassung

Der Übergang von JavaScript zu TypeScript ist wie ein Upgrade Ihres Lego-Bauprozesses:

1. JavaScript (Grundkonstruktion):

   • Freiformkonstruktion
   • Flexibler Einsatz von Bausteinen
   • Laufzeitfehlererkennung

2. TypeScript (professionell erstellt):

   • Detaillierte und spezifische Anweisungen
   • Steinkompatibilitätsprüfung
   • Fehlervermeidung vor dem Bau

Wichtige Übergangstipps:

1. Beginnen Sie mit grundlegenden Typanmerkungen.
2. Fügen Sie nach und nach Schnittstellen und Typdefinitionen hinzu.
3. Verwenden Sie den Compiler, um Fehler frühzeitig zu erkennen.
4. Verwenden Sie nach Möglichkeit Typinferenz.
5. Strikte Nullprüfung und andere Compileroptionen werden nach und nach hinzugefügt.

Denken Sie daran: TypeScript baut auf Ihren JavaScript-Kenntnissen auf und sorgt für mehr Sicherheit und Klarheit, anstatt den grundlegenden Erstellungsprozess zu ändern. Trotzdem ist mein Rat immer noch: Lernen Sie zuerst JavaScript und dann TypeScript.

Referenzen

Abgerufen am 12. Januar 2025 von
• https://www.php.cn/link/84b184211c5d929d9435a371eb505cad Mozilla. Variablen – JavaScript
Abgerufen am 14. Januar 2025
• https://www.php.cn/link/646e69d6e105d351e4e31a2e02a69b0e

Das obige ist der detaillierte Inhalt vonBauen mit TypeScript: Ein Lego-basierter Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!