Saya sedang membuat pustaka komponen Bereaksi dengan TypeScript dan memiliki pertanyaan. Apakah saya harus mendeklarasikan setiap properti input tunggal dalam tipe/antarmuka saat membuat komponen yang dapat digunakan kembali?

Saya memiliki bidang input yang dibuat dengan komponen bergaya seperti ini:

import React from 'react';

import { StyledInput } from './styles';

interface Props {
  type?: 'text' | 'password' | 'number' | 'tel' | 'time';
  name: string;
}

const Input: React.FC<Props> = ({ type = 'text', name, ...rest }) => {
  return <StyledInput type={type} name={name} {...rest} />;
};

export default Input;

Saya mencoba menggunakan ini dengan placeholder, misalnya. TypeScript melempar kesalahan ini:

Type '{ name: string; placeholder: string; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.
Property 'placeholder' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.ts(2322)

Karena placeholder adalah properti Input intrinsik, saya pikir itu diselesaikan ketika saya menyebarkan props {...rest}. Input belum tahu bahwa placeholder adalah penyangga string? Atau onChange adalah sebuah fungsi, atau onFocus?

Beri tahu saya jika pertanyaan ini tidak masuk akal.

Bersulang!

0
Fabio Montone 4 Juli 2020, 22:31

1 menjawab

Jawaban Terbaik

Anda harus eksplisit saat mendeklarasikan tipe. Menyebarkan props {...rest} tidak menyelesaikan jenis komponen Input kustom.

interface IProps extends React.HTMLProps<HTMLInputElement> {
   // type any custom props you want to pass other than-
   // existing props for a input like "placeholder", "name" or "type"
}

React.HTMLProps<HTMLInputElement> akan menyertakan tipe untuk semua atribut default yang dapat diteruskan ke elemen input. Tetapi jika Anda ingin komponen Input khusus menerima beberapa alat peraga khusus lainnya, Anda juga harus mendeklarasikan jenisnya di antarmuka.

1
subashMahapatra 4 Juli 2020, 19:47