使用react+ts通过props传递数据

Question

我尝试从这里开始快速入门教程：https://react.dev/learn/tutorial-tic-tac-toe 在 ts 而不是 js 中。 怎么了？它说： 声明了“number”，但从未读取其值。ts(6133) 绑定元素“number”隐式具有“any”类型。ts(7031)

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>
    </>
  );
}

function Square({value: number}){
  return <button className="square">{value}</button>;
}

它说： 声明了“number”，但从未读取其值。ts(6133) 绑定元素“number”隐式具有“any”类型。ts(703

Answer 1

在您的示例中，您正在使用 解构。

function Square({value: number}) {
  // ...
}
// is equivalent to:
function Square(props) {
  const number = props.value;

  // ...
}

// what you want is providing the type for the props:
function Square({ value }: { value: number }) {
 // ...
}

// or
interface SquareProps {
  value: number;
}

function Square({ value }: SquareProps) {
 // ...
}

// which is equivalent to:
function Square(props: SquareProps) {
 const value = props.value;
 // ...
}

祝您学习之旅顺利！