Блог

Я наткнулся на этот фрагмент кода и был смущен тем, что происходит с props: { name: string; description: string } ? Как новичок, я понимаю возможность отправки props компонентам.

Однако, похоже, здесь происходит гораздо больше. Если это как-то связано с динамической генерацией, то я бы понял, что объект присваивается реквизиту через = знак. Однако, что случилось с точкой с запятой?

 export default function InfoCard(props: { name: string; description: string }) {
  return (
    <Card>
      <CardContent>
        <Typography>
          // This evaluates props.name so that the value of props.name will show
          {props.name}
        </Typography>
        <Typography>
          // This evaluates props.description so that the value of props.description will show
          {props.description}
        </Typography>
      </CardContent>
    </Card>
  );
}
  

Это недопустимый Javascript: код здесь представляет собой Typescript, надмножество Javascript.

Объект после : является аннотацией типа, что означает, что props должен быть объектом со свойством a name и a description , которые оба являются строками.

Эквивалентный Javascript такой же, без аннотаций типов:

 export default function InfoCard(props) {
  return (
    <Card>
      <CardContent>
        <Typography>
          // This evaluates props.name so that the value of props.name will show
          {props.name}
        </Typography>
        <Typography>
          // This evaluates props.description so that the value of props.description will show
          {props.description}
        </Typography>
      </CardContent>
    </Card>
  );
}
  

Вы можете проверить отправленный код на игровой площадке typescript

Вот как я пишу :

 export default function InfoCard({name , description}) {
  return (
    <Card>
      <CardContent>
        <Typography>
          // This evaluates props.name so that the value of props.name will show
          {name}
        </Typography>
        <Typography>
          // This evaluates props.description so that the value of props.description will show
          {description}
        </Typography>
      </CardContent>
    </Card>
  );
}