TypeScript Academy · Pelajaran

Jenis Nyahstruktur Objek

Jeniskan sifat objek yang dinyahstruktur tanpa mengelirukan sintaks penamaan semula.

Pelajaran 1 daripada 413 langkah

Jenis Nyahstruktur Objek ialah pelajaran TypeScript Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran TypeScript Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.

Penyahstrukturan Bertemu Jenis

Penyahstrukturan objek mengeluarkan sifat daripada objek ke dalam pemboleh ubah setempat. Dengan TypeScript, anda boleh menyatakan bentuk jenis yang dinyahstrukturkan — tetapi sintaksnya mempunyai perangkap yang terkenal. Mari kita lakukannya dengan betul.

Penyahstrukturan Objek Asas

Penyahstrukturan biasa mengekstrak sifat mengikut nama. TypeScript membuat inferens terhadap jenis setiap pemboleh ubah daripada objek sumber.

const user = { name: "Ada", age: 36 }
const { name, age } = user
console.log(name, age) // Ada 36

Menyatakan Jenis Seluruh Corak

Untuk menyatakan jenis pemboleh ubah yang dinyahstrukturkan, letakkan jenis tersebut selepas seluruh corak, dengan menerangkan bentuk objek — bukan selepas setiap pemboleh ubah.

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

Menyahstruktur Parameter Fungsi

Ini corak yang sangat biasa: nyahstrukturkan objek parameter secara terus dalam pengisytiharan fungsi sambil menyatakan bentuknya. Di dalam isi fungsi, name dan id ialah pemboleh ubah setempat yang ditaip.

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

Perangkap Kekeliruan Tanda Titik Bertindih

Dalam penyahstrukturan, tanda titik bertindih bermaksud menamakan semula, bukan menyatakan jenis. Menulis { name: string } mencipta pemboleh ubah bernama string yang menyimpan nilai name — hampir tidak pernah menjadi perkara yang anda mahukan.

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

Menamakan Semula dan Menganotasi Bersama

Jika anda perlu menamakan semula dan menetapkan jenis kedua-duanya, gunakan titik bertindih untuk menamakan semula, kemudian buat anotasi pada keseluruhan corak. Anotasi bentuk masih menggunakan nama sifat asal.

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

Menggunakan Jenis Bernama

Untuk sesuatu yang lebih kompleks, utamakan antara muka bernama berbanding bentuk sebaris. Kodnya lebih mudah dibaca dan boleh digunakan semula.

interface User {
  name: string
  age: number
}
function show({ name, age }: User) {
  console.log(name + " is " + age)
}
show({ name: "Ada", age: 36 })

Nyahstruktur Hanya Sesetengah Sifat

Anda tidak perlu mengekstrak setiap medan. Pilih perkara yang diperlukan; jenis objek yang selebihnya diabaikan untuk pemboleh ubah setempat yang anda cipta.

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

Menyahstruktur Nilai Pulangan

Apabila fungsi memulangkan objek, anda boleh menyahstruktur hasilnya dengan serta-merta. Jenis mengalir daripada jenis pulangan kepada pemboleh ubah setempat anda.

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

Mengumpulkan Baki

Corak baki mengumpulkan sifat yang tinggal ke dalam objek baharu. TypeScript memberikan jenis sumber tanpa kunci yang diekstrak kepadanya.

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

Imbas Kembali Bentuk Sebaris berbanding Jenis Bernama

Bentuk sebaris sesuai untuk corak kecil yang hanya digunakan sekali. Gunakan jenis bernama sebaik sahaja bentuk itu menjadi lebih besar atau digunakan berulang kali. Ingat: titik bertindih menamakan semula, manakala anotasi datang selepas pendakap keriting penutup.

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

Semakan Pantas

Uji pemahaman anda tentang nyahstruktur objek berjenis.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anotasi jenis pada nyahstruktur diletakkan selepas keseluruhan corak dan menerangkan bentuk objek. Titik bertindih di dalam corak menamakan semula pengikatan, bukannya memberikan anotasi kepadanya. Nyahstruktur parameter fungsi dan nilai pulangan dengan anotasi bentuk atau jenis bernama, ekstrak hanya medan yang diperlukan, dan gunakan corak baki untuk mengumpulkan selebihnya.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 101
Pelajaran: 352

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Jenis Nyahstruktur Objek” percuma?

Ya — teks penuh “Jenis Nyahstruktur Objek” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus TypeScript Academy, tingkat taraf kepada CoddyKit PRO. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Jenis Nyahstruktur Objek”?

Jeniskan sifat objek yang dinyahstruktur tanpa mengelirukan sintaks penamaan semula. Anda berlatih TypeScript Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan TypeScript Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran TypeScript Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Jenis Nyahstruktur Objek” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy