Bagaimana Cara Mengetahui Tipe Props Komponen React Tertentu di TypeScript?

Question

Bagaimana Cara Mengetahui Tipe Props Komponen React Tertentu di TypeScript?

Dibuat18 Februari 2024

·

Dilihat24 kali

0

Saya biasanya menggunakan JavaScript saat menggunakan React, saat ini pengen pindah ke TypeScript, ketika mencobanya saya kebingungan bagaimana caranya mengetahui tipe props dari sebuah komponen JSX misalnya <button> apakah harus menghafal satu per satu atau adakah cara untuk melihatnya?

Misalnya kode di bawah ini, bagaimana cara mengetahui tipe props agar tidak error ketika diteruskan ke <button>.

function Button(
  props: any
  // ^ apa tipe props ini?
) {
  return <button {...props} />;
}

React TypeScript

Eca

890

1 Jawaban

Urutkan berdasarkan:

Kamu tau jawabannya?

Ayo bergabung bersama lebih dari 200.000 pengguna lainnya!

Pertanyaan Terkait

kicut 928 · Accepted Answer · 2024-02-19T10:26:54.362Z

Ada tipe helper generic yang bisa mengetahui tipe berdasarkan nama tag html/jsx nya, yaitu ComponentProps<T>, kalau button bisa pakai ComponentProps<'button'>, seperti ini:

import type { ComponentProps } from "react";

function Button(
  props: ComponentProps<'button'>
) {
  return <button {...props} />;
}

Kalau pakai VS Code, arahkan kursor ke nama komponen atau nama tag nya nanti akan muncul popup berisi detail tipenya. Misalnya, kalau <button> akan terlihat seperti ini:

(property) JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>

Kalau sudah keliatan, tinggal disalin mulai dari sebelah kanan tanda : ke kanan, jadinya seperti ini:

function Button(
  props: DetailedHTMLProps<
    ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  >
) {
  return <button {...props} />;
}

Kalau DetailedHTMLProps dan ButtonHTMLAttributes error, tinggal tambahkan React. dibelakangnya, jadinya React.DetailedHTMLProps dan React.ButtonHTMLAttributes. Atau bisa juga dengan mengimpor tipe tersebut dari react, seperti ini: import type { ButtonHTMLAttributes, DetailedHTMLProps } from "react";