Cara untuk menguatkuasakan jenis untuk ahli diindeks objek Typescript

Bahasa pengaturcaraan TypeScript adalah berdasarkan JavaScript, yang ditaip dengan kuat, berorientasikan objek dan disusun. Bahasa ini dipertingkatkan dengan alatan seperti penaipan statik, kelas dan antara muka, yang membantu dalam pengesanan ralat awal dan menjadikan JavaScript lebih mudah diurus. Ciri TypeScript ialah keupayaan untuk menguatkuasakan jenis ahli yang diindeks objek, dan proses ini juga dikenali sebagai tandatangan indeks.

Tandatangan indeks ialah satu set pasangan nilai kunci yang menerangkan banyak sifat yang mungkin ada pada objek. Tentukan jenis nama harta dan jenis nilai harta masing-masing menggunakan nilai dan kunci. Untuk menguatkuasakan jenis sifat objek, pengguna boleh memanfaatkan ciri tandatangan indeks TypeScript.

Tandatangan indeks boleh menguatkuasakan sifat objek tertentu dengan berkesan, tetapi juga boleh membuat kod sukar difahami dan dikekalkan. Oleh itu, adalah sangat penting untuk hanya menggunakan tandatangan indeks apabila perlu.

Tatabahasa

let objectName: {
   [key: string]: string
}

Dalam sintaks di atas, 'objectName' ialah nama objek kami dan kami memaksa kunci untuk menjadi rentetan jenis dan nilai menjadi rentetan.

Contoh 1

Dalam contoh ini, kami mempunyai dua antara muka, Orang dan Buku Telefon. Antara muka Orang mentakrifkan struktur objek seseorang, termasuk dua atribut: nama (rentetan) dan umur (nombor). Antara muka Buku Telefon mentakrifkan tandatangan indeks menggunakan jenis rentetan sebagai kunci dan antara muka Orang sebagai nilai. Ini bermakna mana-mana objek yang melaksanakan antara muka Buku Telefon hanya boleh mempunyai sifat yang jenis kuncinya ialah String dan jenis nilainya ialah Person.

Kemudian kami mentakrifkan Buku telefon berubah dengan jenis Buku Telefon dan menetapkannya sebagai objek kosong. Kemudian kami menambah beberapa entri pada buku telefon di mana kekunci haruslah nama dan nilainya hendaklah objek Orang. Akhir sekali, kami mengesahkan melalui log konsol bahawa jika kami cuba meletakkan sebarang jenis pembolehubah lain selain jenis di atas, pengkompil akan melaporkan ralat.

// Person interface
interface Person {
   name: string
   age: number
}

// PhoneBook interface
interface PhoneBook {
   [key: string]: Person
}

let phoneBook: PhoneBook = {}

phoneBook['Person 1'] = { name: 'ABC', age: 30 }
phoneBook['Person 2'] = { name: 'XYZ', age: 25 }
phoneBook['Person 3'] = { name: 'MNO', age: 10 }

console.log(phoneBook)

Apabila disusun, ia akan menjana kod JavaScript berikut −

var phoneBook = {};
phoneBook['Person 1'] = { name: 'ABC', age: 30 };
phoneBook['Person 2'] = { name: 'XYZ', age: 25 };
phoneBook['Person 3'] = { name: 'MNO', age: 10 };
console.log(phoneBook);

Output

Kod di atas akan menghasilkan output berikut -

{ 'Person 1': { name: 'ABC', age: 30 },
  'Person 2': { name: 'XYZ', age: 25 },
  'Person 3': { name: 'MNO', age: 10 } }

Contoh 2

Dalam contoh ini, kami mempunyai antara muka Produk, yang mentakrifkan struktur objek produk dengan dua sifat: nama (rentetan) dan harga (nombor). Kemudian kami mempunyai antara muka ShoppingCart lain yang mewakili tandatangan indeks menggunakan jenis angka sebagai kunci dan antara muka Produk sebagai nilai. Mana-mana objek yang melaksanakan antara muka ShoppingCart hanya boleh mempunyai sifat dengan jenis utama Nombor dan jenis nilai Produk.

Kemudian kami mentakrifkan troli berubah jenis ShoppingCart dan menetapkan objek kosong padanya. Kemudian kami menambah beberapa entri pada troli beli-belah di mana kuncinya hendaklah id produk dan nilainya hendaklah objek produk. Kita dapat melihat bahawa item ditambahkan pada troli dengan betul, jika nilainya bukan dari jenis Produk atau objek produk kehilangan mana-mana sifat yang ditakrifkan dalam antara muka Produk, ralat akan berlaku.

interface Product {
   name: string
   price: number
}

// ShoppingCart interface
interface ShoppingCart {
   [key: number]: Product
}

let cart: ShoppingCart = {}

cart[1] = { name: 'Shirt', price: 20 }
cart[2] = { name: 'Pants', price: 30 }
cart[3] = { name: 'Shoes', price: 40 }

console.log(cart[1])
console.log(cart[2])
console.log(cart[3])

Apabila disusun, ia akan menghasilkan kod JavaScript berikut −

var cart = {};
cart[1] = { name: 'Shirt', price: 20 };
cart[2] = { name: 'Pants', price: 30 };
cart[3] = { name: 'Shoes', price: 40 };
console.log(cart[1]);
console.log(cart[2]);
console.log(cart[3]);

Output

Kod di atas akan menghasilkan output berikut -

{ name: 'Shirt', price: 20 }
{ name: 'Pants', price: 30 }
{ name: 'Shoes', price: 40 }

Contoh ini menggambarkan cara menggunakan tandatangan indeks untuk menguatkuasakan jenis sifat objek. Tandatangan indeks ialah ciri berkuasa yang boleh membantu anda menulis kod yang lebih mantap dan boleh diselenggara, tetapi penting untuk menggunakannya dengan bijak dan hanya apabila perlu.

Atas ialah kandungan terperinci Cara untuk menguatkuasakan jenis untuk ahli diindeks objek Typescript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!