Como utilizar props com function components? | React: escrevendo com Typescript

Fala Rodrigo, beleza?

Já vou te dar um spoiler que nesta aula aqui eu refatoro o botão, mas vou colocar aqui para facilitar a sua vida:

    interface Props {
        type?: "button" | "submit" | "reset" | undefined, 
        onClick?: () => void
    } 

    function Botao({ onClick, type }: Props) {
        return (
            <button onClick={onClick} type={type} className= {style.botao}>
                {this.props.children}
            </button>
        )
}

Para não ficar uma resposta muito pequena, vou te dar algumas informações sobre props para valer a pena a pergunta :D

Esse { onClick, type } é chamado de destruct, ou seja, eu estou "quebrando" o objeto recebido no parâmetro em variáveis, então se a gente colocar { onClick, type } o JS assume que existe um objeto (vamos chamá-lo de props aqui, mas no destruct direto no parâmetro da função ele não tem nome) e que dentro desse objeto existe onClick e type (e que poderíamos acessar com props.onClick e props.type). Sendo uma aplicação JS, ele aceita que tenha outras variáveis dentro do objeto props, e elas serão impossíveis de ser alcançadas a não ser que você colocasse diretamente no destruct no caso acima.

Vamos imaginar que temos uma nova prop chamada nome, vou te mostrar 2 formas de acessar essa nova prop:

primeira forma:

    interface Props {
        type?: "button" | "submit" | "reset" | undefined, 
        onClick?: () => void,
        nome: string
    } 

    function Botao({ onClick, type, nome }: Props) { // adicionei aqui a nova prop
        console.log('acessando a nova prop!', nome);
        return (
            <button onClick={onClick} type={type} className= {style.botao}>
                {this.props.children}
            </button>
        )
}

segunda forma:

    interface Props {
        type?: "button" | "submit" | "reset" | undefined, 
        onClick?: () => void,
        nome: string
    } 

    function Botao(props: Props) { // aqui a gente tem o objeto props sem destruct
        const { onClick, type, nome } = props; // aqui a gente faz o destruct da mesma forma que fizemos na primeira forma, só que dentro da função
        console.log('duas formas de pegar a prop! ', nome, props.nome) // pelo fato de existir o objeto props, podemos acessar tanto diretamente pela variável ou pelo objeto props
        return (
            <button onClick={onClick} type={type} className= {style.botao}>
                {this.props.children}
            </button>
        )
}

Qual é a melhor forma de fazer? você decide! na primeira opção temos perda de variáveis, mas ao mesmo tempo deixamos direto no parâmetro da função exatamente o que usaremos do objeto que receberemos, já na segunda opção você tem todas as variáveis do objeto existindo no contexto da função, independente se iremos usá-los ou não. Depende de cada ocasião utilizar os dois.

Caso tenha mais alguma dúvida sinta-se a vontade para continuar este tópico ou criar outro beleza?

Bons estudos!