جاوااسکریپت - React و تایپسکریپت: ویژگی 'id' در نوع 'number' وجود ندارد

سلام به همه کسانی که آمدند کمک کنند. کد کامپایل میشود و کار میکند، اما تایپاسکریپت خطا میدهد که ویژگی 'id' در نوع 'number' وجود ندارد. اگر عمیقتر به هوک نگاه کنید، میتوانید ببینید که ویژگی step از نوع number در اینترفیس آن است.

خطا در این ورود رخ میدهد: 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

از چه چیزی خوشش نمیآید؟

راهحل:

1. اضافه کردن

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

2. ویرایش

از

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

به

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

تشکر ویژه از توماس گونزالس

پاسخ شماره ۱

پس مشکل این است که شما مقدار step را به صورت یک شیء تنظیم کردهاید و نه به صورت یک عدد.

برای حل این، یک رابط جدید برای نوع مرحله ایجاد کنید:

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

و سپس سعی کنید مرحله را به این نوع تنظیم کنید

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