TypeScript: Cape Superhero JavaScript

Mengapa Tambah Jenis pada JavaScript?

Gambar ini: Anda gembira mengekod dalam JavaScript, apabila tiba-tiba - "Tidak boleh membaca 'nama' sifat yang tidak ditentukan". Ugh, kita semua pernah ke sana! TypeScript adalah seperti mempunyai rakan yang menangkap kesilapan ini sebelum ia berlaku.

Kisah Asal Usul

JavaScript adalah seperti Peter Parker sebelum gigitan labah-labah - berpotensi besar, tetapi terdedah kepada kemalangan. TypeScript ialah gigitan labah-labah yang memberikan kuasa besar JavaScript. Ia menambahkan sistem jenis yang membantu menangkap pepijat lebih awal dan menjadikan kod anda lebih dipercayai.

Pengembaraan TypeScript Pertama Anda

Mari kita mulakan dengan fungsi JavaScript yang mudah dan mengubahnya menjadi TypeScript:

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

Sekarang, mari tambah beberapa keajaiban TypeScript:

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

Nampak itu : rentetan? Itu TypeScript memberitahu kami "fungsi ini mengambil rentetan dan mengembalikan rentetan". Sekarang cuba ini:

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

TypeScript baru sahaja menyelamatkan kami daripada pepijat yang berpotensi! ?

Jenis Asas: Kuasa Besar Baru Anda

Mari terokai beberapa jenis TypeScript asas:

// 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"]
};

Antara Muka: Mencipta Jenis Anda Sendiri

Antara muka adalah seperti cetak biru untuk objek. Ia sangat berguna untuk menentukan bentuk data anda:

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);

Jenis Alias: Jenis Tersuai Anda

Kadangkala anda ingin mencipta kombinasi jenis anda sendiri:

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
};

Generik: Fleksibiliti Terbaik

Generik adalah seperti kad bebas yang menjadikan kod anda lebih boleh digunakan semula:

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>

Contoh Dunia Sebenar: A Todo App

Mari bina apl todo ringkas dengan TypeScript:

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 dengan React

TypeScript dan React adalah seperti mentega kacang dan jeli. Berikut ialah contoh ringkas:

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>

Petua dan Trik

1. Mulakan Mudah: Mulakan dengan jenis asas dan tambah yang lebih kompleks secara beransur-ansur.
2. Gunakan Pengkompil: Pengkompil TypeScript ialah rakan anda - perhatikan ralatnya.
3. Jangan Terlalu Jenis: Kadang-kadang mana-mana pun boleh (tetapi gunakannya dengan berhati-hati!).
4. Dayakan Mod Ketat: Tambahkan "ketat": benar pada tsconfig.json anda untuk perlindungan maksimum.

Gotcha Biasa dan Cara Membaikinya

// 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;
}

Membungkus

TypeScript mungkin kelihatan seperti kerja tambahan pada mulanya, tetapi ia seperti mempunyai kuasa besar yang membantu anda menangkap pepijat sebelum ia berlaku. Mulakan secara kecil-kecilan, tambah lebih banyak jenis secara beransur-ansur dan sebelum anda mengetahuinya, anda akan tertanya-tanya bagaimana anda pernah hidup tanpanya!

Ingat:

• Jenis ialah rakan anda
• Penyusun ialah teman anda
• Amalan menjadikan sempurna

Atas ialah kandungan terperinci TypeScript: Cape Superhero JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!