{this.props.children} Não funciona

Estou com o mesmo problema. Mesmo matando e reiniciando o server com o npm start ele não reconhece "children" como propriedade. Inclusive o "children" nem aparece como sugestão no autocomplete do VSCode como mostrado na aula.

Compiled with problems:X

ERROR in src/components/button/index.tsx:8:29

TS2339: Property 'children' does not exist on type 'Readonly<{}>'.
     6 |         return(
     7 |             <button className={style.button}>
  >  8 |                 {this.props.children}
       |                             ^^^^^^^^
     9 |             </button>
    10 |         )
    11 |     }

Botão:

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

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

export default Button;

Formulário:

import React from 'react';
import Button from '../button';
import style from './style.module.scss';

class Form extends React.Component {
    render() {
        return(
            <form action="" className={style.newTask}>
                <div className={style.inputContainer}>
                    <label htmlFor="task">
                        Adicione um novo estudo
                    </label>
                    <input 
                        type="text" 
                        name="task" 
                        id="task" 
                        placeholder="O que você quer estudar?"
                        required
                    />
                </div>
                <div className={style.inputContainer}>
                    <label htmlFor="time">
                        Tempo
                    </label>
                    <input 
                        type="time"
                        step={1}
                        name="time"
                        id="time"
                        min="00:00:00"
                        max="01:30:00"
                        required
                    />
                </div>
                <Button>Adicionar</Button>
            </form>
        )
    }
}

export default Form;

Carlos,

Encontrei no fórum outros posts com o mesmo problema, e ao que parece é devido a versão do React ser diferente da versão do instrutor. Aqui estou com a versão 18, na qual houveram alterações dessa prop children e não funciona mais da forma como o instrutor mostrou na aula.

Segue tópico: https://cursos.alura.com.br/forum/topico-problemas-com-a-this-props-children-property-children-does-not-exist-233312

Aqui resolvi assim:

`class Button extends React.Component <{ children:string;}>{ render() {

    return (
        <button style={{ 
            backgroundColor:'blue'
         }}>
            { this.props.children  }
        </button>`

Também estou com o mesmo problema, poderia usar <{ texto: string }> mas não sei se isso tem impacto a longo prazo e se lá na frente do código ele vai mexer nisso de novo