React TypeScript状态提升场景：传递函数Prop的类型定义问题

嘿，我来帮你搞定这个TypeScript里React状态提升的类型问题！

在React状态提升的场景中，子组件的onTemperatureChange本质是一个回调函数，TypeScript需要明确它的参数类型和返回值类型才能避免调用签名不兼容的错误。

第一步：定义精准的Props接口 #

你需要根据实际业务逻辑，明确回调函数接收的参数类型（比如温度值是字符串还是数字），然后把它定义成一个有明确调用签名的函数类型：

// 假设你的温度值以字符串形式处理（输入框默认返回字符串）
interface TemperatureInputProps {
  temperature: string;
  // 明确：接收string类型的温度值，无返回值
  onTemperatureChange: (temperature: string) => void;
}

// 如果业务需要处理数字类型的温度，就改成这样：
interface TemperatureInputProps {
  temperature: number;
  onTemperatureChange: (temperature: number) => void;
}

第二步：子组件中正确使用回调 #

在子组件里，触发回调时要确保传递的参数类型和接口定义一致：

import React from 'react';

const TemperatureInput: React.FC<TemperatureInputProps> = ({ temperature, onTemperatureChange }) => {
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 如果是字符串类型，直接传输入值
    onTemperatureChange(e.target.value);
    
    // 如果是数字类型，记得转换类型
    // onTemperatureChange(Number(e.target.value));
  };

  return (
    <div>
      <input
        type="text"
        value={temperature}
        onChange={handleInputChange}
      />
    </div>
  );
};

第三步：父组件传递符合类型的回调 #

父组件里定义的回调函数，参数类型要和子组件Props接口完全匹配：

import React, { useState } from 'react';

const TemperatureCalculator: React.FC = () => {
  // 对应子组件的类型，这里用string就和子组件保持一致
  const [celsiusTemp, setCelsiusTemp] = useState<string>('');

  const handleCelsiusChange = (newTemp: string) => {
    setCelsiusTemp(newTemp);
    // 这里可以添加温度转换逻辑（比如转成华氏度），符合官方教程的状态提升逻辑
  };

  return (
    <div>
      <TemperatureInput
        temperature={celsiusTemp}
        onTemperatureChange={handleCelsiusChange}
      />
    </div>
  );
};

为什么之前的类型会报错？ #

常见的错误原因包括：

• 用了过于宽泛的类型（比如Function）：TypeScript无法确定这个函数的参数和返回值，所以调用时会提示“缺少调用签名”。
• 参数类型不匹配：比如子组件传字符串，但父组件的回调接收数字，导致类型兼容问题。
• 没有明确返回值类型：如果回调函数有返回值但你定义成了void，或者反之，也会触发错误。

只要保证回调函数的参数、返回值在子组件Props接口和父组件实现中完全一致，就能解决这个类型错误啦！

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