如何在React JSX项目中使用单个TSX文件解决ChangeResult依赖问题？

你的核心问题是JSX文件不支持TypeScript的类型注解，而ChangeResult是组件提供的TS类型定义，在JS环境里既不需要也无法识别。以下是两种直接可行的解决方案：

方案一：直接移除类型相关代码（最简单） #

1. 删掉对ChangeResult的导入，因为JS不需要类型定义
2. 移除onInput回调里的类型注解: ChangeResult

修改后的完整代码：

import MultiRangeSlider from 'multi-range-slider-react'
import React, { useState } from 'react'

export default function Memory({ setFilters }) {
    const memoryDimension = ['4', '8', '16', '32', '64']
    const [minValue, setMinValue] = useState(0)
    const [maxValue, setMaxValue] = useState(0)
    const [minValue2, setMinValue2] = useState(0)
    const [maxValue2, setMaxValue2] = useState(0)
    const [minCaption, set_minCaption] = useState('')
    const [maxCaption, set_maxCaption] = useState('')

    return (
        <div className="filters">
            <div className="filter display-processeur">
                <h1>Mémoire</h1>
                <div className="display-processor-intel-amd">
                    <div className="display-filter-by-gamme-core">
                        <MultiRangeSlider
                            title="memory-dimension"
                            min={0}
                            max={5}
                            step={1}
                            minValue={1}
                            maxValue={4}
                            onInput={(e) =>{
                                set_minCaption(memoryDimension[e.minValue])
                                set_maxCaption(memoryDimension[e.maxValue])
                                setMinValue(e.minValue)
                                setMaxValue(e.maxValue)
                            }}
                            onChange={(e) => {
                                setMinValue2(e.minValue)
                                setMaxValue2(e.maxValue)
                            }}
                            labels={memoryDimension}
                            ruler={false}
                            style={{
                                border: 'none',
                                boxShadow: 'none',
                                padding: '15px 10px',
                            }}
                            barLeftColor="red"
                            barInnerColor="blue"
                            barRightColor="green"
                            thumbLeftColor="lime"
                            thumbRightColor="lime"
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

方案二：保留类型提示（不修改项目结构） #

如果想在编辑器里保留参数的类型提示，又不想转TS，可以用JSDoc注解：

import MultiRangeSlider from 'multi-range-slider-react'
import React, { useState } from 'react'

export default function Memory({ setFilters }) {
    const memoryDimension = ['4', '8', '16', '32', '64']
    const [minValue, setMinValue] = useState(0)
    const [maxValue, setMaxValue] = useState(0)
    const [minValue2, setMinValue2] = useState(0)
    const [maxValue2, setMaxValue2] = useState(0)
    const [minCaption, set_minCaption] = useState('')
    const [maxCaption, set_maxCaption] = useState('')

    /**
     * @param {import('multi-range-slider-react').ChangeResult} e
     */
    const handleInput = (e) => {
        set_minCaption(memoryDimension[e.minValue])
        set_maxCaption(memoryDimension[e.maxValue])
        setMinValue(e.minValue)
        setMaxValue(e.maxValue)
    }

    return (
        <div className="filters">
            <div className="filter display-processeur">
                <h1>Mémoire</h1>
                <div className="display-processor-intel-amd">
                    <div className="display-filter-by-gamme-core">
                        <MultiRangeSlider
                            title="memory-dimension"
                            min={0}
                            max={5}
                            step={1}
                            minValue={1}
                            maxValue={4}
                            onInput={handleInput}
                            onChange={(e) => {
                                setMinValue2(e.minValue)
                                setMaxValue2(e.maxValue)
                            }}
                            labels={memoryDimension}
                            ruler={false}
                            style={{
                                border: 'none',
                                boxShadow: 'none',
                                padding: '15px 10px',
                            }}
                            barLeftColor="red"
                            barInnerColor="blue"
                            barRightColor="green"
                            thumbLeftColor="lime"
                            thumbRightColor="lime"
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

为什么你之前的覆盖方法没用？ #

ChangeResult是TypeScript的类型定义，不是可执行的JS模块，它只在TS编译阶段生效，运行时不存在对应的实体。所以你没法用函数去“覆盖”一个类型，直接移除或用JSDoc注解才是正确方向。

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