React Material Select的renderValue类型错误(TypeScript)如何修复？

错误信息 #

Type '(selected: Array<number>) => string' is not assignable to type '(value: unknown) => ReactNode'.
  Types of parameters 'selected' and 'value' are incompatible.
    Type 'unknown' is not assignable to type 'number[]'.ts(2322)
Select.d.ts(111, 3): The expected type comes from property 'renderValue' which is declared here on type 'IntrinsicAttributes & SelectProps'

问题分析 #

TypeScript无法自动推断Select组件renderValue参数的类型，默认将其标记为unknown，而直接声明参数为Array<number>会导致类型不匹配报错。

解决方案 #

方案1：给Select组件显式指定泛型类型 #

通过给Select添加泛型<number[]>，让TypeScript明确组件的value类型为数字数组，此时renderValue的参数会自动推断为number[]，无需手动声明类型，同时onChange的事件值类型也会自动匹配。

修改后的代码片段：

const [testValue, setTestValue] = useState<Array<number>>([]);

<FormControl className={classes.formControl}>
  <InputLabel id="test-select-label">Location</InputLabel>
  <Select<number[]>
    multiple
    fullWidth
    labelId="test-select-label"
    id="demo-multiple-checkbox"
    variant="outlined"
    label="Location"
    value={testValue}
    name="first"
    onChange={(event) => {
      setTestValue(event.target.value);
    }}
    input={<OutlinedInput label="Tag" />}
    renderValue={(selected) =>
      serviceLocationOptions
        .filter(x => selected.includes(x.serviceLocationId))
        .map(x => x.name)
        .join(', ')
    }
  >
    {/* MenuItem 部分保持不变 */}
  </Select>
</FormControl>

方案2：对renderValue参数进行类型断言 #

如果不想给Select指定泛型，可以在renderValue内部将参数断言为number[]，明确告知TypeScript该参数的具体类型。

修改后的renderValue部分：

renderValue={(selected) => {
  const selectedIds = selected as number[];
  return serviceLocationOptions
    .filter(x => selectedIds.includes(x.serviceLocationId))
    .map(x => x.name)
    .join(', ')
}}

推荐方案 #

优先选择方案1，显式指定泛型更符合TypeScript的类型安全设计，能避免类型断言可能带来的潜在类型错误，同时让代码的类型声明更清晰。

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