React+TS实现井字棋Props传值报错：未读变量与隐式any类型

错误原因分析 #

1. 'number'已声明但从未使用（ts(6133)）：
   你在Square组件的参数中写了{value: number}，这是对象解构的重命名语法——把props里的value变量重命名成了number，但你在返回的JSX里仍然使用{value}，导致number变量被声明却未使用，同时真正需要的value变量根本没被解构出来。

2. 绑定元素'number'隐式拥有'any'类型（ts(7031)）：
   TypeScript无法推断重命名后的number变量类型，且你没有为组件props显式定义类型，所以报出隐式any的错误。

修正后的代码 #

export default function Board(){
  return (
    <>
      <div className="board-row">
        <Square value={1}/>
        <Square value={2}/>
        <Square value={3}/> 
      </div>
      <div className="board-row">
        <Square value={4}/>
        <Square value={5}/>
        <Square value={6}/>
      </div>
      <div className="board-row">
        <Square value={7}/>
        <Square value={8}/>
        <Square value={9}/>
      </div>
    </>
  );
}

// 定义Square组件的props类型
interface SquareProps {
  value: number;
}

// 正确解构value并指定props类型
function Square({ value }: SquareProps){
  return <button className="square">{value}</button>;
}

关键修改说明 #

• 移除了错误的重命名语法，直接解构value变量，解决未使用变量的问题。
• 新增SquareProps接口，明确value的类型为number，消除TypeScript的隐式any报错。

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