React memo包裹泛型组件引发TS类型错误问题咨询

问题现象 #

定义两个组件时，写在同一文件中无TypeScript编译错误，但拆分到不同文件后出现TS2322类型不兼容错误。

同文件无报错示例（test3.tsx） #

import React from "react";

type ValueType = number[] | string[] | number | string

interface ISelectChipProps<X extends ValueType> {
  value: X
  setValue: (value: X) => void
}

const SelectChip = <X extends ValueType>({
  value,
  setValue,
}: ISelectChipProps<X>) => {
  return (
    <></>
  )
}

interface IFilterProps {
  value: number[],
  setValue: (value: number[]) => void
}

const Filter = ({setValue, value}: IFilterProps) => {
  return (<SelectChip value={value} setValue={setValue}/>)
}

拆分后的代码 #

SelectChip.tsx（用memo包裹导出） #

import React, {memo} from "react";

type ValueType = number[] | string[] | number | string

interface ISelectChipProps<X extends ValueType> {
  value: X
  setValue: (value: X) => void
}

const SelectChip = <X extends ValueType>({
  value,
  setValue,
}: ISelectChipProps<X>) => {
  return (
    <></>
  )
}

export default memo(SelectChip)

Filter.tsx（使用SelectChip时报错） #

import React from "react";
import SelectChip from "./SelectChip";

interface IFilterProps {
  value: number[],
  setValue: (value: number[]) => void
}

const Filter = ({setValue, value}: IFilterProps) => {
  // 此行出现TS2322错误
  return (<SelectChip value={value} setValue={setValue}/>)
}

编译错误信息 #

TS2322: Type '(value: number[]) => void' is not assignable to type '(value: ValueType) => void'. Types of parameters 'value' and 'value' are incompatible.   
Type 'ValueType' is not assignable to type 'number[]'.     
Type 'string' is not assignable to type 'number[]'.  
SelectChip.tsx(7, 3): The expected type comes from property 'setValue' which is declared here on type 'IntrinsicAttributes & ISelectChipProps<ValueType>'

IDE类型提示差异 #

• 同文件无报错场景：ISelectChipProps<X>.setValue: (value: number[]) => void
• 拆分后报错场景：ISelectChipProps<X>.setValue: (value: ValueType) => void

使用环境 #

• react: 18.2.0
• typescript: 5.0.4
• next: 13.3.0

疑问 #

是用法有误还是编译器相关问题？若为后者，如何排查是IDE、TypeScript、React还是Next.js导致的问题？

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