3 formas de criar componente de button utilizando React com typescript

Fala pessoal, irei apresentar 3 formas de definir tipos para propriedades html, irei apresentar como caso de uso a propriedade button, entretanto as formas podem ser utilizadas com outras propriedades html.

A primeira forma é definir um type para o componente onde todas as propriedades são especificadas, inclusive as propriedades nativas da tag html.

Esta forma pode ser mais trabalhosa, tendo em vista que todas as propriedades nativas na tag devem ser informadas na definição do type e caso você queira obter os elementos filhos do componente também deverá definir uma propriedade children do tipo ReactNode.

Para evitar a definição do children como uma propriedade, você pode utilizar na definição do type o PropsWithChildren que automaticamente encapsula a propriedade children. Entretanto as propriedades nativas da tag html ainda necessitam de definição no type.

Para resolver tanto a questão do children quanto a questão de não precisar definir as propriedades nativas da tag, você pode utilizar o ComponentProps<’informe-aqui-a-tag-html’> e adicionar as propriedades extras que irá precisar no seu componente, conforme o exemplo abaixo: