React & Typescript：“数字”类型上不存在属性“id”

Question

Hello everyone who came to help. The code compiles and works, but TypeScript throws an error that Property 'id' does not exist on type 'number'. If you look deep into the hook, you can see that the step property is of type number in its interface.

The error occurs in this entry: step. id

import React, { useEffect, useState } from 'react'
import FirstStep from './steps/firstStep'
import {useForm, useStep} from 'react-hooks-helper'

interface IDefaultData2 {
    id: string
}

const steps : any = [
    {id: 'firstStep'},
    {id: 'secondStep'},
    {id: 'thirdStep'},
    {id: 'confirm'},
    {id: 'success'}
]

const UserForm: React.FC = () => {
    const {step, navigation} = useStep({
        steps,
        initialStep: 0
    })
    
    console.log(typeof(step))       // object
    console.log(typeof(step.id))    // string
    console.log(step.id)            // "firstStep"
    
    return (
        <>
        {
            (() => {
                switch(step.id){
                    case 'firstStep': return <FirstStep/>
                }
            })()
        }
        </>
    )
}

export default UserForm

What doesn't it like?

SOLUTION :

1. Add

interface useStepType {
    step: any,
    navigation: any,
}

2. Edit

From

const { step, navigation } = useStep({
        steps,
        initialStep: 0
    })

To

const { step, navigation }: useStepType = useStep({
        steps,
        initialStep: 0
    })

Special thanks to Tomas Gonzalez

Answer 1

So the issue is that you are setting step as an object and not as a number,

to solve this create a new interface for type step:

interface stepType {
    id: string,
}
interface useStepType {
   step: stepType,
   navigation: any,
}

and then try to set the step to this type

    const {step, navigation}: useStepType = useStep({
    steps,
    initialStep: 0
})