javascript - react & typescript : Property 'id' does not exist on type 'number'

Question

前来帮忙的大家好。代码可以编译并运行，但 TypeScript 会抛出一个错误，指出属性“id”在类型“number”上不存在。如果深入查看钩子(Hook)，您会发现 step 属性在其接口(interface)中是 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,
}

1. 编辑

来自

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

给

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

特别感谢 Tomas Gonzalez

Answer 1

所以问题是您将步骤设置为对象而不是数字，

要解决这个问题，请为类型步骤创建一个新接口(interface):

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

然后尝试将步骤设置为这种类型

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