TypeScript中使用useState报错：Cannot find name 'useState'问题排查

首先，导致Cannot find name 'useState'这个错误的直接原因是你的import语句语法错误，同时代码里还有几处TypeScript类型缺失的问题，我来一步步帮你解决：

1. 修复useState的导入错误 #

你当前的导入写法import * as React, { useState } from 'react'不符合ES模块语法规范，正确的导入方式有两种：

• 方式一：直接导入React核心对象和useState钩子

import React, { useState } from 'react'

• 方式二：导入整个React对象，通过命名空间调用useState

import * as React from 'react'
// 后续使用时写成：const [inputs, setInputs] = React.useState({})

2. 补充TypeScript类型定义 #

为了让代码符合TypeScript的类型安全要求，还需要补充以下类型约束：

• 给useState添加泛型，明确inputs的类型（这里假设输入值都是字符串，你可以根据实际业务调整）
• 给handleInputChange的event参数指定具体类型React.ChangeEvent<HTMLInputElement>，避免类型模糊
• 优化callback的类型，替换宽泛的any为更具体的(() => void) | undefined

修正后的完整代码 #

import React, { useState } from 'react'

// 自定义输入值类型，可根据实际需求扩展字段类型
type InputValues = Record<string, string>

const useForm = (callback?: () => void) => {
  const [inputs, setInputs] = useState<InputValues>({})
  
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.persist()
    setInputs(prevInputs => ({
      ...prevInputs,
      [event.target.name]: event.target.value,
    }))
  }

  return {
    handleInputChange,
    inputs,
  }
}

export default useForm

这样修改后，不仅能解决useState找不到的错误，还能让代码拥有完整的类型检查，避免后续可能出现的类型相关问题。

内容的提问来源于stack exchange，提问作者Jennifer