如何修复TypeScript TS2322错误及未使用变量问题？

问题1：TS2322类型不匹配错误 #

原因 #

你在Input组件上使用了字符串形式的ref='autoCompleteRef'，这是React的旧版字符串ref语法，函数组件不支持该写法，同时也不符合TypeScript对AntD Input组件Ref类型的要求——Input的ref需要接收Ref<InputRef>类型的值，而非字符串。

解决方法 #

直接将ref属性赋值为你通过useRef创建的autoCompleteRef变量，无需加引号：

<Input placeholder='Start typing or move the map' ref={autoCompleteRef} />

问题2：'autoComplete'已赋值但未使用 #

原因 #

你在组件顶层代码中直接初始化Google Places Autocomplete，此时autoCompleteRef.current还未指向真实DOM元素（组件尚未挂载）；同时初始化后的autoComplete变量没有被任何业务逻辑使用，导致TS/ESLint提示未使用。

解决方法 #

1. 使用useEffect钩子在组件挂载后初始化Autocomplete（此时ref的current才会指向真实DOM）
2. 给Autocomplete添加事件监听，让autoComplete变量被实际调用，同时实现业务逻辑

修改后的完整代码 #

import { Input } from "antd"
import React, { useRef, useEffect } from "react"

const PlacesAutocomplete = () => {
  // 给ref指定明确的TS类型，提升类型安全性
  const autoCompleteRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    // 校验DOM元素和Google API是否存在
    if (!autoCompleteRef.current || !(window as any).google) return

    const autoComplete = new (window as any).google.maps.places.Autocomplete(
      autoCompleteRef.current,
      { types: ["(cities)"], componentRestrictions: { country: "us" } }
    )

    // 添加地点选中事件监听，让autoComplete变量被使用
    autoComplete.addListener('place_changed', () => {
      const place = autoComplete.getPlace()
      // 这里可以根据业务需求处理选中的地点数据
      console.log('选中的地点信息:', place)
    })

    // 组件卸载时清理监听，避免内存泄漏
    return () => {
      if (autoComplete) {
        (window as any).google.maps.event.clearInstanceListeners(autoComplete)
      }
    }
  }, [])

  return (
    <Input placeholder='Start typing or move the map' ref={autoCompleteRef} />
  )
}

export default PlacesAutocomplete

补充说明 #

如果确实不需要监听事件，也可以将变量名改为_autoComplete，告诉ESLint该变量是故意不使用的，但更推荐利用该变量实现实际业务逻辑。

内容的提问来源于stack exchange，提问作者Daniel.M