TypeScript: Cape Superhero JavaScript

Susan Sarandon
Lepaskan: 2024-10-27 20:45:29
asal
946 orang telah melayarinya

TypeScript: 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 + "!";
}
Salin selepas log masuk

Sekarang, mari tambah beberapa keajaiban TypeScript:

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

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'
Salin selepas log masuk

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"]
};
Salin selepas log masuk

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);
Salin selepas log masuk

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
};
Salin selepas log masuk

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" }
]);
Salin selepas log masuk

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"));
Salin selepas log masuk

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>{name}</h2>
            <p>Age: {age}</p>
            {onSuperPower && (
                <button onClick={onSuperPower}>
                    Activate Super Power!
                </button>
            )}
        </div>
    );
};
Salin selepas log masuk

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;
}
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!