TypeScript开发Antd AutoComplete遇ValueType/OptionType类型错误

在TypeScript环境使用Antd的AutoComplete组件时，将value设为string类型，触发两个TypeScript类型错误：

• value报错：Type 'string' is not assignable to type 'ValueType | null'
• options报错：Type 'string[]' is not assignable to type 'OptionType[]'

尝试过直接用string类型和{value: string}格式的选项/值，但都触发错误，且找不到Antd提供的ValueType或OptionType类型导入方式。相关代码如下：

import { useMemo, useState } from 'react';
import { AutoComplete } from 'antd';

export const TagsAutocomplete = ({onSelect, value}: {onSelect: (elem: string) => void, value: string}) => {
  const options: string[] = ['Tag 1', 'Tag 2', 'Tag 3'];
  const [inputText, setInputText] = useState('');
  const filteredOptions = useMemo(() => {
    return options.filter((option) => option.toLowerCase().includes(inputText.toLowerCase()));
  }, [options, inputText]);

  return (
    <AutoComplete
      value={value} // Type string is not assignable to type ValueType | null 
      options={filteredOptions} // Type string[] is not assignable to type OptionType[]
      onSelect={onSelect}
      onSearch={setInputText}
    />
  )
}

核心原因 #

Antd的AutoComplete组件对options和value有明确的类型约束：

• options必须是包含value字段的对象数组（而非纯字符串数组）
• value的类型为ValueType | null，默认ValueType是string | number

以下是两种可行的修复方式：

方式一：通过泛型明确指定组件类型

直接给AutoComplete组件指定泛型，同时将字符串数组转为符合要求的选项结构：

import { useMemo, useState } from 'react';
import { AutoComplete } from 'antd';

export const TagsAutocomplete = ({onSelect, value}: {onSelect: (elem: string) => void, value: string}) => {
  // 将纯字符串转为AutoComplete要求的Option结构
  const baseOptions = ['Tag 1', 'Tag 2', 'Tag 3'].map(item => ({ value: item }));
  const [inputText, setInputText] = useState('');
  
  const filteredOptions = useMemo(() => {
    return baseOptions.filter(option => 
      option.value.toLowerCase().includes(inputText.toLowerCase())
    );
  }, [baseOptions, inputText]);

  // 用<string>泛型指定组件的value类型为string
  return (
    <AutoComplete<string>
      value={value}
      options={filteredOptions}
      onSelect={onSelect}
      onSearch={setInputText}
    />
  )
}

方式二：适配默认类型约束

如果不想用泛型，也可以直接将value转为string | null类型，同时调整选项结构：

import { useMemo, useState } from 'react';
import { AutoComplete } from 'antd';

export const TagsAutocomplete = ({onSelect, value}: {onSelect: (elem: string) => void, value: string}) => {
  const baseOptions = [
    { value: 'Tag 1' },
    { value: 'Tag 2' },
    { value: 'Tag 3' },
  ];
  const [inputText, setInputText] = useState('');
  
  const filteredOptions = useMemo(() => {
    return baseOptions.filter(option => 
      option.value.toLowerCase().includes(inputText.toLowerCase())
    );
  }, [baseOptions, inputText]);

  return (
    <AutoComplete
      value={value || null} // 转为string | null，匹配ValueType约束
      options={filteredOptions}
      onSelect={onSelect}
      onSearch={setInputText}
    />
  )
}

补充说明 #

如果需要直接导入相关类型，可以从Antd的组件props类型中获取：

import type { AutoCompleteProps } from 'antd';
// 提取OptionType和ValueType
type OptionType = AutoCompleteProps['options'][number];
type ValueType = NonNullable<AutoCompleteProps['value']>;

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