TypeScript untuk pemula, Bahagian 4: Kelas

Siri tutorial ini akan membawa anda untuk mempelajari langkah demi langkah demi langkah. Bahagian pertama secara ringkas memperkenalkan TypeScript dan mengesyorkan beberapa IDE yang boleh digunakan untuk menulis TypeScript. Bahagian kedua memberi tumpuan kepada jenis data, dan bahagian ketiga membincangkan asas -asas antara muka TypeScript.

Seperti yang anda sudah tahu, JavaScript kini menyokong pengaturcaraan kelas dan berorientasikan objek secara asli. Walau bagaimanapun, TypeScript telah lama membolehkan pemaju menggunakan kelas dalam kod mereka. Kod ini kemudian disusun ke dalam kod JavaScript yang boleh dijalankan pada semua pelayar utama. Dalam tutorial ini, anda akan belajar tentang kelas dalam TypeScript. Mereka sama dengan rakan -rakan ES6 mereka, tetapi lebih ketat.

Buat Kelas Pertama Anda

Mari kita mulakan dengan asas -asas. Kelas adalah bahagian asas pengaturcaraan berorientasikan objek. Anda boleh menggunakan kelas untuk mewakili mana -mana entiti dengan sifat dan fungsi tertentu yang boleh bertindak pada harta tertentu. TypeScript memberi anda kawalan penuh ke atas sifat dan fungsi yang boleh diakses di dalam dan di luar kelas yang terkandung di dalamnya. Berikut adalah contoh asas cara membuat kelas.

Anda mungkin menyedari bahawa pembina adalah serupa dengan get dan name , serta get tetapi tidak readonly . Jika tidak ditentukan secara eksplisit, jenis parameter setter disimpulkan dari jenis pengembalian getter. Bermula dengan TypeScript 4.3, anda boleh mempunyai setter yang menerima jenis yang berbeza daripada jenis yang dikembalikan oleh Getter.

Melaksanakan kelas menggunakan antara muka

Dalam tutorial terdahulu kami mengenai antara muka Typescript, kami mengetahui bahawa antara muka pada dasarnya digunakan untuk menentukan struktur objek yang berbeza yang akan kami gunakan dalam kod kami. Sekarang, kita akan belajar bagaimana untuk melaksanakan kelas berdasarkan beberapa antara muka yang diisytiharkan sebelumnya.

 antara muka ipoint {
    x: nombor;
    y: nombor;
    kedudukan (x: nombor, y: nombor): tidak sah
}

Antara muka Irectangle memanjangkan ipoint {
    lebar: nombor;
    panjang: nombor;
    kawasan (lebar: nombor, panjang: nombor): Nombor
}

Titik kelas melaksanakan IPOINT {
    x: nombor;
    y: nombor;

    pembina (x: nombor, y: nombor) {
        this.x = x;
        this.y = y;
    }

    kedudukan (): tidak sah {
        console.log (`Titik adalah pada ($ {this.x}, $ {this.y}).`);
    }
}

Kelas Rectangle melaksanakan irectangle {
    lebar: nombor;
    panjang: nombor;
    x: nombor;
    y: nombor;

    Pembina (x: nombor, y: nombor, lebar: nombor, panjang: nombor) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.length = panjang;
    }

    kawasan (): nombor {
        kembali this.width * this.length;
    }

    kedudukan (): tidak sah {
        console.log (`Rectangle adalah pada ($ {this.x}, $ {this.y}).`);
    }
}

Biarkan MyPoint = titik baru (10, 20);

Biarkan MyRect = Rectangle Baru (0, 0, 20, 30);

mypoint.position ();

myRect.position ();

console.log (myrect.area ());

Kami mencipta antara muka IRectangle , seperti yang kita lakukan dalam tutorial sebelumnya. Perubahan tambahan di sini ialah kami juga menambah perisytiharan fungsi ke antara muka.

IRectangle , yang bermaksud ia akan mempunyai empat sifat ini dan dua kaedah untuk mengeluarkan kedudukannya dan memaparkan kawasannya.

Meringkaskan

Dalam tutorial ini, saya cuba memperkenalkan asas -asas kelas dalam TypeScript. Kami mula -mula mencipta kelas Person yang sangat asas yang mencetak nama seseorang ke dalam konsol. Selepas itu, anda mempelajari kata kunci private , yang boleh digunakan untuk mengelakkan mengakses ahli kelas pada bila -bila masa dalam program ini.

Akhirnya, anda belajar bagaimana untuk memperluaskan kelas yang berbeza dalam kod anda menggunakan kelas asas yang diwarisi. Anda boleh mengetahui lebih lanjut mengenai kelas dalam dokumentasi rasmi.

Atas ialah kandungan terperinci TypeScript untuk pemula, Bahagian 4: Kelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!