[Sugestão] Props com arrow Function, TS e Vite {2023}

Pessoal, quem está usando o Vite com Ts e construindo a components com uma função, para conseguir usar as props é bem simples.

Primeiro você define um type Props:

type Props = {texto: String}

Depois só será necessário passar essa props como argumento:

type Props = {texto: String}

const Botao = (props: Props) => {
  return <button className={style.botao}>{props.texto}</button>;
};

Caso esteja trabalhando com várias props, é nessário fazer uma desestruturação das propriedades:

ps: imagine que existão outras props, dentro do {} você vai colocar as outras props para serem desestruturadas

type Props = { texto: String; age: String };

const Botao = ({ texto, age }: Props) => {
  return (
    <>
      <button className={style.botao}>{texto}</button>
      <p>{Number(age)}</p>
    </>
  );
};