React Typescript 中模板文字表达式的类型"any"无效

Question

我有一个滑块组件，在其中我不断收到以下错误：无效类型"任何"；在常量fillWidth变量处的React Typescript中的模板文字表达式的。我无法找到解决方案，有人能帮我处理这个吗

import React from 'react';
import './slider.scss';
export default class Slider extends React.Component {
outputUpdate = (e) => {
const { value } = e.target;
const delta = {
capacity: value,
};
}
render() {
const {
id,
min,
capacity,
displayCapacity,
step,
} = this.props;
const attributes = {
id,
name: id,
value: displayCapacity,
min,
max: capacity,
step,
'aria-valuemin': min,
'aria-valuemax': capacity,
'aria-valuenow': displayCapacity,
'aria-orientation': 'horizontal',
type: 'range',
className: 'slider my-3',
};
const fillWidth = capacity ? (`${displayCapacity > capacity ? capacity : displayCapacity}` - min) / (capacity - min) * 100 : 0;
return (
<div className="slider-container">
<input
ref={this.sliderInput}
{...attributes}
onChange={e => this.outputUpdate(e)}
onInput={e => this.outputUpdate(e)}
/>
<div className="slider-range" />
<div className="slider-note">
<span>
<Currency value={min} decimals={0} />
</span>
<span style={CamelCaseStyles(Text16Right)}>
<Currency value={capacity} decimals={0} />
</span>
</div>
</div>
);
}

}

Answer 1

您作为模板文字(类型字符串(进行计算，我认为这是个问题。如果您使用的一些变量是字符串，您可以将它们强制转换为数字，然后进行计算。此外，给fillWidth变量一个数字类型将确保它期望这样。

const fillWidth: number = capacity ? (Number(displayCapacity) > Number(capacity) ? Number(capacity) : Number(displayCapacity) - min) / (capacity - min) * 100 : 0;

这应该对你有用，但这只是给你看一个例子。您可以对其进行优化，以避免重复太多。