Rumah  >  Artikel  >  hujung hadapan web  >  Taip ✔ Vs Antara Muka ❌: Mengapa anda perlu memilih taip berbanding antara muka dalam skrip taip.

Taip ✔ Vs Antara Muka ❌: Mengapa anda perlu memilih taip berbanding antara muka dalam skrip taip.

WBOY
WBOYasal
2024-08-09 07:18:52496semak imbas

Type ✔ Vs Interface ❌: Why you should chose type over interface in typescript.

Saya telah menemui penyelesaian yang anda harus sentiasa menggunakan jenis berbanding antara muka. Jom pecahkan kenapa!!

  • Antara muka hanya boleh menentukan objek, tetapi jenis alias boleh menentukan objek dan semua yang lain. Katakan kita mempunyai satu medan Alamat dan dengan jenis anda akan menentukan jenisnya seperti ini:
type Address = string;
const address: Address = '123 Hallway'

Tetapi anda tidak boleh melakukan perkara sedemikian dengan antara muka seperti:

interface Address = string; //error
const address: Address = '123 Hallway'

Kerana alias antara muka hanya boleh mentakrifkan objek. Kita perlu menukar struktur sama sekali jika kita mahu menggunakan antara muka seperti:

interface Address {
    address: string;
}
const address: Address = {
    address: '12 3 Hallway'
}

Itulah masalah pertama dengan antara muka.

  • alias jenis boleh menentukan jenis Kesatuan dan alias antara muka tidak boleh: Mari pengguna boleh mempunyai berbilang atau satu alamat:
type Address = string | string[] ;
const address: Address = '123 Hallway'
const newAddress: Address= ['123 Hallway', 'Flag Plaza']

rentetan | string[] dipanggil jenis Union, alamat boleh rentetan atau tatasusunan rentetan.

Anda boleh melakukan perkara sedemikian dengan alias antara muka.

  • jenis alias boleh menggunakan jenis utiliti dengan mudah. Antara muka boleh lakukan tetapi ia akan kelihatan hodoh, contohnya pertimbangkan Objek Pengguna:
type User = {
    name: string;
    age: number;
    created_at: Date;
}

Sekarang, katakan kita mempunyai Objek tetamu, yang tidak dilog masuk tetapi kita boleh menyemak apabila ia dicipta (pertama kali mendarat di halaman). Dalam senario ini, tetamu adalah seperti pengguna tetapi bukan pengguna sebenar. Kami ingin membuat_at hartanah dalam Guest daripada jenis User In alias kami melakukannya seperti:

     type Guest = Omit<User, 'name' | 'age'>

Secara teknikal ia boleh dilakukan dengan antara muka tetapi lihat cara ia berfungsi:

type Guest extends Omit<User, 'name' | 'age'> {}

Ia berfungsi tetapi ia adalah sintaks yang hodoh, bukan?

  • Kadangkala anda perlu menerangkan tupel. Berikut ialah cara kami menerangkannya dengan jenis alias
type Address = [string, number, string] ;
const address: Address = ['Hallway', 2, 'Abdul Plaza']

Tetapi dengan antara muka, lihat cara kami melakukannya:

type Address extends Array<number | string> {
    0: string
    1: number;
    2: string;
}

const address: Address = ['Hallway', 2, 'Abdul Plaza']

Sintaks hodoh lagi.

  • Dengan jenis alias kita boleh mengekstrak jenis dengan sangat mudah.
const love_bonito ={
    level: 1,
    store_id: 'scad_12hdedhefgfeaa',
    country: ['US','PK','IND'],
    user: {
        user_id: "blah',
        username: 'nishat',
        likes: 421,
    },
};

// let's extract type for love_bonito
type LoveBonito = typeOf love_bonito;

// or even something inside love_bonito
type User = typeOf love_bonito.user;  

Bonus untuk ini ialah jika kita sudah berada pada tahap yang sentiasa satu dan tiada yang lain, kita juga boleh melakukannya:

const love_bonito ={
    level: 1,
    store_id: 'scad_12hdedhefgfeaa',
    country: ['US','PK','IND'],
    user: {
        user_id: "blah';
        username: 'nishat';
        likes: 421;
    },
} as const

// let's extract type for love_bonito
type LoveBonito = typeOf love_bonito

// or even something inside love_bonito
type User = typeOf love_bonito.user

Sekarang tahap akan disimpulkan sebagai 1, bukan sebagai sebarang nombor.

  • Dengan alias antara muka anda boleh mengisytiharkan semula antara muka,
interface Home {
    rooms: number;
    light_bulbs: 12;
    rented_to: "Abu Turab";
}

interface Home {
   fans: 16;
}

// final type 

interface Home {
    rooms: 3;
    light_bulbs: 12;
    rented_to: "Abu Turab";
    fans: 16;
}

Kami tidak boleh mengisytiharkan semula alias jenis. Anda mungkin berkata, "Oh! Sheraz, ini, ini adalah titik tambah antara muka", tetapi sebenarnya tidak!!!

Kedengarannya mengelirukan, untuk mempunyai berbilang pengisytiharan dengan pengecam yang sama di seluruh pangkalan kod anda. Nampak sangat mengelirukan saya.

Andaikan anda bekerja dengan pasukan, anda tahu tentang jenis objek (jenis yang diisytiharkan dengan antara muka), tetapi seseorang dalam pasukan anda mengisytiharkan semula dan mengubahnya, apakah yang akan anda lakukan.

Tetapi dengan jenis alias masalah ini diselesaikan juga. Jika anda mengisytiharkan semula jenis ia akan menimbulkan ralat

pengecam pendua

  • Nama perpustakaan ialah TYPESCRIPT bukan INTERFACESCRIPT. Itu mungkin lucu tetapi ya, mengapa syarikat memilih untuk menamakan perpustakaan mereka TYPESCRIPT dan bukan IBTERFACESCRIPT. Jika syarikat lebih suka jenis berbanding antara muka, jadi mengapa anda tidak? ?

Kesimpulan

Sentiasa mengutamakan jenis berbanding antara muka. Sesetengah pembangun mengatakan bahawa antara muka dimuatkan lebih cepat daripada jenis... Tetapi itu berlaku pada masa lalu. Sekarang tidak ada perbezaan mengenai prestasi. Terdapat beberapa kes penggunaan di mana anda mungkin memerlukan antara muka, tetapi ini tidak bermakna anda perlu membuat antara muka sepanjang masa.

Atas ialah kandungan terperinci Taip ✔ Vs Antara Muka ❌: Mengapa anda perlu memilih taip berbanding antara muka dalam skrip taip.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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