TypeScript报错排查：'{ variableName: string; }'无法赋值给类型'string'

问题出在React组件的参数定义上——React函数组件接收的是props对象，不是单独的参数。你给DynamicArea定义的参数类型是string，但调用组件时传递的是包含variableName属性的对象（类型是{ variableName: string }），两者类型不匹配，所以触发了这个报错。

修正方法很简单，把组件的参数改成接收props对象（可以直接解构）：

// 写法1：直接在参数里解构并定义类型
const DynamicArea = ({ variableName }: { variableName: string }) => (
  <div>Eventually this will be filled with some cool data</div>
);

// 写法2：先定义Props类型，更易维护
type DynamicAreaProps = {
  variableName: string;
};

const DynamicArea = ({ variableName }: DynamicAreaProps) => (
  <div>Eventually this will be filled with some cool data</div>
);

你的调用部分myFunction里的代码是对的，myOtherVariable是string类型，传入variableName属性完全符合要求，不需要修改。

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