如何修复打字稿错误 Type \'string\' is not assignable to type \'Ref<InputRef> |不明确的\'？答案

【问题标题】：How to fix typescript error Type 'string' is not assignable to type 'Ref<InputRef> | undefined'?如何修复打字稿错误 Type \'string\' is not assignable to type \'Ref<InputRef> |不明确的\'？
【发布时间】：2022-12-07 11:25:32
【问题描述】：

为什么编译失败？？

C:/Users/danie/OneDrive/Desktop/Project/seller-app/src/components/ui/maps/places-autocomplete.tsx
TypeScript error in C:/Users/danie/OneDrive/Desktop/Project/seller-app/src/components/ui/maps/places-autocomplete.tsx(12,55):
Type 'string' is not assignable to type 'Ref<InputRef> | undefined'.  TS2322

    10 |   )
    11 |   return (
  > 12 |     <Input placeholder='Start typing or move the map' ref='autoCompleteRef' />
       |                                                       ^
    13 |   )
    14 | }
    15 |

此错误发生在构建期间，无法消除。

完整的源代码：

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

const PlacesAutocomplete = () => {
  const autoCompleteRef = useRef(null)

  const autoComplete = new (window as any).google.maps.places.Autocomplete(
    autoCompleteRef.current,
    { types: ["(cities)"], componentRestrictions: { country: "us" } }
  )
  return (
    <Input placeholder='Start typing or move the map' ref='autoCompleteRef' />
  )
}

export default PlacesAutocomplete

错误信息：

  Type 'string' is not assignable to type 'Ref<InputRef> | undefined'.ts(2322)
  index.d.ts(133, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & InputProps & RefAttributes<InputRef>'

index.d.ts(133, 9) 中配置字符串的源码：

interface RefAttributes<T> extends Attributes {
    ref?: Ref<T> | undefined;
}

【问题讨论】：

应该是ref={autoCompleteRef}

标签： node.js reactjs typescript autocomplete google-places-api

【解决方案1】：

ref 应该是一个对象，而不是一个字符串。 ref={autoCompleteRef}

【讨论】：