Typescript - 類型“{}”上不存在屬性“名稱”

Question

我正在關注 React 中的教程，該教程創建了一個 useForm 掛鈎以將表單輸入掛鈎到 state

鈎子看起來像

const useForm = (initial = {}) => {
    const [inputs, setInputs] = useState(initial)

    const handleChange = (e:any) => {
        let {value,name,type} = e.target
        if(type === 'number'){
             value = parseInt(value)
        }
        if(type === 'file'){
            value[0] = e.target.files
        }
        setInputs({
            ...inputs,
            [name]: value
        })
    }
    
    return{
        inputs,
        handleChange,
        resetForm,
        clearForm
    }
}

export default useForm

它在頁面中使用

import useForm from "../lib/useForm";

const CreateProduct = () => {

    const {inputs, handleChange, clearForm, resetForm} = useForm({
        name: 'name test',
        price: 1234,
        description: 'description test'
    })

    return (
        <form>
            <label htmlFor="name">
                Name: 
                <input 
                    type="text" 
                    id="name" 
                    name="name" 
                    placeholder="name" 
                    value={inputs.name}
                    onChange={handleChange}
                />
            </label>
            <label htmlFor="name">
                Name: 
                <input 
                    type="number" 
                    id="price" 
                    name="price" 
                    placeholder="price" 
                    value={inputs.price}
                    onChange={handleChange}
                />
            </label>
        </form>
    );

};

export default CreateProduct;   

該教程是 js，但我希望它在 typescript 中。

在 typescript 中，這里value={inputs.name}我收到以下錯誤Property 'name' does not exist on type '{}'.

我怎樣才能停止這個錯誤

我試圖為輸入添加一個接口，但這只是錯誤，我在這里隱藏接口是否錯誤

import { string } from "prop-types";
import useForm from "../lib/useForm";

interface inputProps{
    name: string,   
    price: number,
    decription: string 
}

const CreateProduct = () => {

    const {(inputs):inputProps, handleChange, clearForm, resetForm} = useForm({
        name: 'name test',
        price: 1234,
        description: 'description test'
    })

    return (
        <form>
            <label htmlFor="name">
                Name: 
                <input 
                    type="text" 
                    id="name" 
                    name="name" 
                    placeholder="name" 
                    value={inputs.name}
                    onChange={handleChange}
                />
            </label>
            <label htmlFor="name">
                Name: 
                <input 
                    type="number" 
                    id="price" 
                    name="price" 
                    placeholder="price" 
                    value={inputs.price}
                    onChange={handleChange}
                />
            </label>
            <button type="button" onClick={clearForm}>Clear Form</button>
            <button type="button" onClick={resetForm}>Reset Form</button>
        </form>
    );

};

export default CreateProduct;

Answer 1

這是因為你沒有正確輸入你的鈎子。

我建議在定義鈎子時創建一個輸入類型並將其作為泛型類型傳遞，我將向您展示一個示例。

type InputType = {
    name: string,   
    price: number,
    decription: string 
}

    const {inputs, handleChange, clearForm, resetForm} = useForm<InputType>({
        name: 'name test',
        price: 1234,
        description: 'description test'
    })

const useForm = <T>(initial: T) => {
    const [inputs, setInputs] = useState(initial)

    const handleChange = (e:any) => {
        let {value,name,type} = e.target
        if(type === 'number'){
             value = parseInt(value)
        }
        if(type === 'file'){
            value[0] = e.target.files
        }
        setInputs({
            ...inputs,
            [name]: value
        })
    }
    
    return{
        inputs,
        handleChange,
        resetForm,
        clearForm
    }
}

export default useForm

我已將其作為通用類型完成，因此如果您將來最終在其他地方使用它，您將能夠將 go 的道具更改為該鈎子。