Rumah > hujung hadapan web > tutorial js > 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
Lepaskan: 2024-08-09 07:18:52
asal
574 orang telah melayarinya

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

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

interface Address = string; //error
const address: Address = '123 Hallway'
Salin selepas log masuk

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

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

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

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

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

type Guest extends Omit<User, 'name' | 'age'> {}
Salin selepas log masuk

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

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

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

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

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

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!

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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan