Oi Alexandre, tudo bem?
Desculpe a demora em retornar.
Entendo que pode ser frustrante quando o código não funciona como deveria, mas vamos tentar entender o que está acontecendo.
Pelo erro apresentado, podemos ver que o problema está na linha 8 do arquivo botao/index.tsx, mais especificamente na propriedade children de this.props. O erro diz que a propriedade children não existe no tipo Readonly<{}>, ou seja, o TypeScript não reconhece a propriedade children nessa classe.
Uma possível solução para esse problema seria definir um tipo para as propriedades da classe Botao. Você pode fazer isso utilizando a interface Props (ou outro nome de sua escolha), por exemplo:
interface Props {
children: React.ReactNode;
}
class Botao extends React.Component<Props> {
render() {
return (
<button className={style.botao}>
{this.props.children}
</button>
)
}
}
Nessa definição, estamos indicando que a classe Botao tem uma propriedade children do tipo React.ReactNode. O React.ReactNode é um tipo genérico do TypeScript que aceita qualquer coisa que possa ser renderizada pelo React, incluindo strings, números, componentes e elementos.
Outra alternativa seria usar o React.FC, que é uma abreviação de "Function Component". Com o React.FC, não precisamos criar uma interface para as propriedades, pois ela já é inferida pelo TypeScript. O código ficaria assim:
const Botao: React.FC = ({ children }) => (
<button className={style.botao}>
{children}
</button>
);
Nesse caso, estamos definindo uma constante Botao do tipo React.FC, que recebe as propriedades desestruturadas (no caso, só children) e retorna o JSX com o botão.
Espero que essa explicação tenha sido útil e clara para você.
Um abraço e bons estudos.
