Gunakan TypeScript untuk membuat komponen reaksi polimorfik yang lebih baik Oleh Chisom Okoye | Juni 2022

Programming

[ad_1]
Selamat datang Teman-teman di suratpembaca.web.id. Hari ini kita akan membahas tentang Linux yakni Gunakan TypeScript untuk membuat komponen reaksi polimorfik yang lebih baik Oleh Chisom Okoye | Juni 2022

.

Mudah-mudahan postingan mengenai Gunakan TypeScript untuk membuat komponen reaksi polimorfik yang lebih baik Oleh Chisom Okoye | Juni 2022

bisa memberikan manfaat bagi Teman-teman semua. Mari baca postingan ini
hingga tuntas.

Tulis komponen fleksibel

Komponen yang dapat digunakan kembali adalah salah satu konsep kunci dalam React – di mana Anda menulis komponen sekali dan Anda dapat menggunakannya kembali beberapa kali.

Pada dasarnya komponen Anda menerima beberapa proposal, kemudian Anda terus menggunakannya secara internal, dan akhirnya Anda menyediakan beberapa elemen React yang menerjemahkan ke elemen DOM yang sesuai.

Jadi bagaimana jika komponen saya dapat memberi saya fleksibilitas untuk mengontrol setiap elemen / node wadah? Inilah yang menciptakan pola yang dikenal sebagai polimorfisme.

Menurut definisi, kata Polimorfik berarti ada dalam lebih dari satu bentuk.

Dalam dunia komponen React, komponen polimorfik adalah komponen yang dapat dirender dengan elemen container yang berbeda.

Meskipun demikian, Anda mungkin belum pernah mendengar tentang komponen polimorfik sebelumnya. Ini adalah template untuk penggunaan kembali kode, seperti kait khusus, komponen kelas yang lebih tinggi, dan sebagainya.

Misalkan kita memiliki bagian <Box /> Komponen dan kami ingin memutuskan apa elemen sebenarnya dalam 2 mode berbeda,

  • Kami ingin merender komponen Box dengannya sebagai elemen jangkar href Kata sifat
  • Kami ingin komponen Box menjadi elemen dari judul h1.

Sekarang dengan konsep polimorfisme di React, kita dapat membuatnya menjadi mungkin dengan menambahkan satu as Membantu komponen memungkinkan pemanggil menjadi fleksibel dalam mendefinisikan tag HTML yang mereka inginkan.

<Box as="a" href="https://www.linkedin.com/in/chisom-okoye-399112122/">
Home page
</Box>

<Box as="h1">Main heading</Box>

Membangun komponen polimorfik pertama Anda cukup sederhana, berikut adalah implementasi dasarnya:

export const Box =(as, children, ...others)=> 

Poin yang perlu diperhatikan di sini adalah bahwa kita secara default as Aksesoris menjadi span Jika pengguna tidak melalui alat peraga, ia harus bekerja dengan rentang sebagai elemen HTML.

Dan kedua, kita tidak bisa menggunakannya as Langsung seperti yang dianggap React sebagai nama tag HTML (<as>) Yang mana bukan. Jadi kita harus menetapkannya ke variabel besar terlebih dahulu dan kemudian merendernya.

juga ...others Ini penting karena kami telah memperluasnya <Component> juga. Ini memungkinkan kita untuk mentransfer fitur atau atribut tambahan yang tidak kita ketahui ke elemen utama. Contoh atribut href diperlukan untuk <a> Tag alt atau atribut yang digunakan untuk gambar <img>.

Itu saja yang kita butuhkan untuk membuat komponen polimorfik dasar.

Namun, masalah dengan pendekatan ini adalah tidak ada cara atau sarana untuk mencegah pengguna melewati props yang tidak didukung atau melewatkan elemen HTML yang tidak valid. Artinya, ketika kita menggunakan komponen ini sebagai h1 Pengguna mungkin tergoda untuk melewatkannya href Fitur atau pengguna dalam nilai apa pun untuk as props yang bukan merupakan elemen HTML yang valid.

Berikut adalah manfaat TypeScript di React.

Untuk menggunakan mesin tik untuk membangun komponen polimorfik tanpa masalah dan pengalaman yang lebih baik, Anda harus terlebih dahulu memastikan bahwa program reaksi memiliki mesin ketik. Anda dapat menggunakan perintah untuk membuat proyek TypeScript reaksi npx create-react-app project-name --template typescript Atau Anda dapat menggunakan npm atau yarn untuk menambahkan skrip yang diketik ke program reaksi yang ada npm install --save typescript @types/node @types/react @types/react-dom @types/jest. Kemudian, dengan pemahaman umum tentang mengetik, kita dapat mengencangkan bagian-bagian yang ditransfer ke komponen.

Implementasi yang lebih baik

import  ComponentPropsWithoutRef, ElementType, ReactNode  from "react";

type BoxProps<T extends ElementType > =
as?: T;
children: ReactNode;
;

export const Box =<T extends ElementType = "span">(
as,
children,
...others
: BoxProps<T> & ComponentPropsWithoutRef<T>) =>
let Component = as

Apa yang kami lakukan di sini adalah membuat tipe untuk Kotak Komponen

type BoxProps<T extends ElementType> = 
as?: T;
children: ReactNode;
;

Keterangan:

Di mana T extends ElementType Merupakan tipe umum dan menyatakan bahwa T adalah tipe khusus dari variabel untuk argumen tentang kita as Kemudian extends ElementType Ini berarti bahwa kami membatasi keseluruhan sebagai elemen HTML yang valid as Tidak bisa mendapatkan nilai bahwa elemen HTML salah.

Hal ini juga baik untuk dicatat bahwa ? Operator terhubung ke as Ini untuk membuatnya opsional agar mesin tik tidak meneriakkan kesalahan sampai komponen menerimanya. as Aksesoris sementara aksesoris bayi harus menjadi satu ReactNode Jenis

Kemudian pada titik penciptaan Box Komponen Anda dapat melihat tipe umum kami T Ditugaskan ke “rentang”, yang berarti elemen default untuk as Aksesoris akan span Ketika pengguna tidak lulus apapun. Kemudian kita menggunakannya BoxProps Jenis yang kami buat menjadi jenis argumen yang kami harapkan.

Sintaks aneh berikutnya dari kami Box Merupakan komponen & ComponentPropsWithoutRef<T>.

Jika Anda berasal dari komponen Gaya, sintaks ini tidak akan asing bagi Anda, karena sebenarnya ini adalah format sintaks untuk menata kode semu:

a 
color : blue;
&:hover
color: red;

Jadi di TypeScript kami mengekstrak template ini dan memperkenalkan sesuatu yang disebut persimpangan, yang berarti tipe BoxProps Merupakan tipe objek yang mencakup askan children Dan menurut jenisnya as props Kami mengembalikan komponen yang valid terkait dengan atribut string yang dikirim.

Dengan itu, jika kita melanjutkan ujian kita <Box /> Komponen yang salah misalnya dengan melewati valid as Anda akan menemukan kesalahan dengan aksesori lain yang tidak kompatibel.

<Box as="h1" href="https://www.linkedin.com/in/chisom-okoye-399112122/">
Main heading
</Box>

h1 Elemen HTML lengkap untuk as Aksesoris, tapi a h1 Elemen tidak boleh memilikinya href Kata sifat. Ini adalah kesalahan, dan selama runtime, mengetik skrip membantu mendapatkan kesalahan ini: Properti 'href' Tidak ada dalam jenis …

Ini bagus karena kami memiliki pengalaman pengembang yang lebih baik dan solusi yang lebih kuat.

Demikian materi mengenai Gunakan TypeScript untuk membuat komponen reaksi polimorfik yang lebih baik Oleh Chisom Okoye | Juni 2022

, terimakasih telah mengunjungi website saya, semoga postingannya ada manfaatnya ya.

[ad_2]

Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.