Property 'children' does not exist on type 'Readonly<{}>'

Achei no "stackoverflow" a seguinte solução:

interface IProps {
    children: React.ReactNode;
}

Daí o meu código ficou assim:

import React from "react";
import style from './Botao.module.scss';

interface IProps {
    children: React.ReactNode;
}


class Botao extends React.Component<IProps> {
    render() {
        return (
            <button className={style.botao}>
                {this.props.children}
            </button>
        )
    }
}

Funcionou. Mas eu gostaria de uma explicação do porque não funciona seguindo o exemplo do professor? E, porque dessa declaração (interface IProps) funciona?

Olá, Leonardo! Tudo bem?

Desculpe a demora em retornar.

O erro "Property 'children' does not exist on type 'Readonly<{}>'" ocorre quando o Typescript não consegue encontrar a propriedade 'children' no objeto de propriedades que foi definido. No seu exemplo, o objeto de propriedades está sendo passado para o componente Botao, mas o Typescript não está conseguindo encontrar a propriedade 'children' no objeto de propriedades.

O motivo pelo qual o exemplo da pessoa instrutora não funcionou pode ser devido a algumas razões. Talvez seja por conta de uma versão diferente do Typescript que não requer a definição explícita das propriedades em uma interface.

A solução que você encontrou no Stackoverflow, adicionando a interface IProps, funciona porque estamos definindo explicitamente as propriedades que o componente Botao recebe, nesse caso, apenas 'children'. Ao adicionar a interface IProps, o Typescript sabe que o componente Botao receberá a propriedade 'children' e, portanto, não irá gerar o erro.

Espero que isso tenha ajudado a esclarecer suas dúvidas.

Um abraço e bons estudos.