Typescript - 类型“{}”上不存在属性“名称”

Question

I'm following a tutorial in React that creates a useForm hook to hook form input to state

The hook looks like

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

And it's used in the page like

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;   

The tutorial is is js but I want it in typescript.

In the typescript here value={inputs.name} I get the following error Property 'name' does not exist on type '{}'.

How can I stop this error

I have tried to add an interface for inputs but this just errors, am I hiding the interface wrong here

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

This is because you haven't typed your hook properly.

I would suggest creating an input type and passing it in as a generic type when you define the hook, i'll show you an example.

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

I've done this as a generic type so you will be able to change the props that go into that hook if you end up using it somewhere else in the future.