React TypeScript中模板字面量表达式类型'any'无效问题求助——滑块组件fillWidth变量报错

嘿，我来帮你搞定这个React TypeScript的错误问题！你遇到的"Invalid type 'any' of template literal expression"主要有两个原因：一是组件没定义Props类型，导致TypeScript把displayCapacity、capacity这些props都当成了any类型；二是计算fillWidth时，你用模板字符串把数字转成了字符串，接着直接和数字做减法，类型不匹配触发了严格检查。

下面是具体的解决步骤：

先创建一个接口来约束组件的props，明确每个属性的类型，让TypeScript能正确推断变量类型，彻底避免any类型的隐患：

interface SliderProps {
  id: string;
  min: number;
  capacity: number;
  displayCapacity: number;
  step: number;
}

你完全不需要用模板字符串处理数值比较，直接用数字类型进行判断和计算即可，既避免了类型转换问题，代码也更简洁：

// 替换原来的fillWidth计算
const fillWidth = capacity 
  ? (Math.min(displayCapacity, capacity) - min) / (capacity - min) * 100 
  : 0;

这里用Math.min(displayCapacity, capacity)替代了你原来的三元判断，效果完全一致，但类型更安全。

给组件指定Props类型，同时修复sliderInput ref的类型定义（原来的代码里没有初始化ref，还会触发另一个TypeScript错误）：

完整修改后的代码 #

import React from 'react';
import './slider.scss';

// 定义Props类型
interface SliderProps {
  id: string;
  min: number;
  capacity: number;
  displayCapacity: number;
  step: number;
}

export default class Slider extends React.Component<SliderProps> {
  // 初始化ref并指定类型
  private sliderInput = React.createRef<HTMLInputElement>();

  outputUpdate = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    // input的value是字符串类型，需要转成数字
    const delta = {
      capacity: Number(value),
    };
    // 这里你可能需要把delta传递给父组件，比如调用this.props.onChange之类的方法
  }

  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',
    };

    // 修复后的fillWidth计算
    const fillWidth = capacity 
      ? (Math.min(displayCapacity, capacity) - 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" style={{ width: `${fillWidth}%` }} /> {/* 假设你需要把fillWidth应用到滑块填充宽度 */}
        <div className="slider-note">
          <span>
            <Currency value={min} decimals={0} />
          </span>
          <span style={CamelCaseStyles(Text16Right)}>
            <Currency value={capacity} decimals={0} />
          </span>
        </div>
      </div>
    );
  }
}

额外小提示 #

• 我注意到你在outputUpdate里直接把e.target.value赋值给capacity，但input的value是字符串类型，所以加了Number(value)转成数字，避免后续类型不匹配。
• 原来的slider-range div没用到计算好的fillWidth，我默认你需要用它来控制滑块的填充宽度，所以加了style={{ width: ${fillWidth}% }}，如果不是你的需求可以直接删掉。

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