TypeScript: JavaScripts Superhelden-Cape

Warum Typen zu JavaScript hinzufügen?

Stellen Sie sich Folgendes vor: Sie sind gerade dabei, in JavaScript zu programmieren, als plötzlich „Eigenschaft ‚Name‘ von undefiniert kann nicht gelesen werden.“ Ugh, das haben wir alle schon erlebt! TypeScript ist wie ein Freund, der diese Fehler erkennt, bevor sie passieren.

Die Ursprungsgeschichte

JavaScript ist wie Peter Parker vor dem Spinnenbiss – großes Potenzial, aber anfällig für Unfälle. TypeScript ist der Spinnenbiss, der JavaScript Superkräfte verleiht. Es fügt ein Typsystem hinzu, das hilft, Fehler frühzeitig zu erkennen und Ihren Code zuverlässiger zu machen.

Ihr erstes TypeScript-Abenteuer

Beginnen wir mit einer einfachen JavaScript-Funktion und wandeln sie in TypeScript um:

// JavaScript
function greet(name) {
    return "Hello, " + name + "!";
}

Jetzt fügen wir etwas TypeScript-Magie hinzu:

// TypeScript
function greet(name: string): string {
    return "Hello, " + name + "!";
}

Sehen Sie das: Zeichenfolge? Das ist TypeScript, das uns sagt: „Diese Funktion nimmt einen String und gibt einen String zurück“. Versuchen Sie jetzt Folgendes:

greet(123); // Error: Argument of type 'number' is not assignable to parameter of type 'string'

TypeScript hat uns gerade vor einem möglichen Fehler gerettet! ?

Grundtypen: Ihre neuen Superkräfte

Lassen Sie uns einige grundlegende TypeScript-Typen erkunden:

// Basic types
let heroName: string = "Spider-Man";
let age: number = 25;
let isAvenger: boolean = true;
let powers: string[] = ["web-slinging", "wall-crawling"];

// Object type
let hero: {
    name: string;
    age: number;
    powers: string[];
} = {
    name: "Spider-Man",
    age: 25,
    powers: ["web-slinging", "wall-crawling"]
};

Schnittstellen: Eigene Typen erstellen

Schnittstellen sind wie Baupläne für Objekte. Sie sind sehr nützlich, um die Form Ihrer Daten zu definieren:

interface Hero {
    name: string;
    age: number;
    powers: string[];
    catchPhrase?: string; // Optional property
}

function introduceHero(hero: Hero): void {
    console.log(`I am ${hero.name}, and I'm ${hero.age} years old!`);
    if (hero.catchPhrase) {
        console.log(hero.catchPhrase);
    }
}

const spiderMan: Hero = {
    name: "Spider-Man",
    age: 25,
    powers: ["web-slinging", "wall-crawling"]
};

introduceHero(spiderMan);

Typ-Aliase: Ihre benutzerdefinierten Typen

Manchmal möchten Sie Ihre eigenen Typkombinationen erstellen:

type PowerLevel = 'rookie' | 'intermediate' | 'expert';

interface Hero {
    name: string;
    powerLevel: PowerLevel;
}

const batman: Hero = {
    name: "Batman",
    powerLevel: "expert" // TypeScript will ensure this is one of the allowed values
};

Generika: Die ultimative Flexibilität

Generika sind wie Platzhalter, die Ihren Code wiederverwendbar machen:

function createHeroTeam<t>(members: T[]): T[] {
    return [...members];
}

interface Superhero {
    name: string;
    power: string;
}

interface Villain {
    name: string;
    evilPlan: string;
}

const heroes = createHeroTeam<superhero>([
    { name: "Iron Man", power: "Technology" },
    { name: "Thor", power: "Lightning" }
]);

const villains = createHeroTeam<villain>([
    { name: "Thanos", evilPlan: "Collect infinity stones" }
]);
</villain></superhero></t>

Beispiel aus der Praxis: Eine Todo-App

Lassen Sie uns eine einfache Aufgaben-App mit TypeScript erstellen:

interface Todo {
    id: number;
    title: string;
    completed: boolean;
    dueDate?: Date;
}

class TodoList {
    private todos: Todo[] = [];

    addTodo(title: string, dueDate?: Date): void {
        const todo: Todo = {
            id: Date.now(),
            title,
            completed: false,
            dueDate
        };
        this.todos.push(todo);
    }

    toggleTodo(id: number): void {
        const todo = this.todos.find(t => t.id === id);
        if (todo) {
            todo.completed = !todo.completed;
        }
    }

    getTodos(): Todo[] {
        return this.todos;
    }
}

// Usage
const myTodos = new TodoList();
myTodos.addTodo("Learn TypeScript with baransel.dev");
myTodos.addTodo("Build awesome apps", new Date("2024-10-24"));

TypeScript mit React

TypeScript und React sind wie Erdnussbutter und Gelee. Hier ist ein kurzes Beispiel:

interface Props {
    name: string;
    age: number;
    onSuperPower?: () => void;
}

const HeroCard: React.FC<props> = ({ name, age, onSuperPower }) => {
    return (
        <div>
            <h2 id="name">{name}</h2>
            <p>Age: {age}</p>
            {onSuperPower && (
                <button onclick="{onSuperPower}">
                    Activate Super Power!
                </button>
            )}
        </div>
    );
};
</props>

Tipps und Tricks

1. Einfach beginnen: Beginnen Sie mit Grundtypen und fügen Sie nach und nach komplexere hinzu.
2. Verwenden Sie den Compiler: Der Compiler von TypeScript ist Ihr Freund – achten Sie auf seine Fehler.
3. Nicht zu viel eingeben: Manchmal ist alles in Ordnung (aber verwenden Sie es sparsam!).
4. Strikten Modus aktivieren: Fügen Sie „strict“: true zu Ihrer tsconfig.json hinzu, um maximalen Schutz zu gewährleisten.

Häufige Fallstricke und wie man sie behebt

// Problem: Object is possibly 'undefined'
const user = users.find(u => u.id === 123);
console.log(user.name); // Error!

// Solution: Optional chaining
console.log(user?.name);

// Problem: Type assertions
const input = document.getElementById('myInput'); // Type: HTMLElement | null
const value = input.value; // Error!

// Solution: Type assertion or type guard
const value = (input as HTMLInputElement).value;
// or
if (input instanceof HTMLInputElement) {
    const value = input.value;
}

Zusammenfassung

TypeScript mag auf den ersten Blick wie zusätzliche Arbeit erscheinen, aber es ist, als hätte man eine Superkraft, die einem hilft, Fehler zu erkennen, bevor sie auftreten. Fangen Sie klein an, fügen Sie nach und nach weitere Typen hinzu, und bevor Sie es merken, werden Sie sich fragen, wie Sie jemals ohne gelebt haben!

Denken Sie daran:

• Typen sind deine Freunde
• Der Compiler ist Ihr Kumpel
• Übung macht den Meister

Das obige ist der detaillierte Inhalt vonTypeScript: JavaScripts Superhelden-Cape. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!