Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Erro com propriedade children

Referente ao curso React: desenvolva aplicações tipadas e escaláveis com Typescript, no capítulo Composição de componentes e atividade Componente Botão

por Diego Diaz Pimentel
| 42.2k xp | 46 posts

O VSCode aparece erro "Type 'AnchorHTMLAttributes' is not assignable to type 'ReactNode'.
Type 'AnchorHTMLAttributes' is missing the following properties from type 'ReactPortal': props, keyts(2322)
index.d.ts(2206, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>'"

Segue index.tsx

import React from 'react'
import styles from "./link.module.css"

const Link = ({children, ...rest}: {children: React.AnchorHTMLAttributes<HTMLAnchorElement>}) => {
  return <a className={styles.link} {...rest}>{children}</a>
};

export default Link

Por alguma razão ele aponta erro na propriedade children da linha 5. Ainda não vejo afetar o resultado do projeto, mas acredito que mais cedo ou mais tarde isso vai ser algum problema.

3 respostas
solução!
por Max Oliveira
| 36.2k xp | 72 posts
Engenheiro Front End

Olá Diego,o tipo correto é {children, ...rest}: {children: React.ReactNode}

por Diego Diaz Pimentel
| 42.2k xp | 46 posts

Olá Max. Obrigado, isso removeu o erro. No entanto isso significa que a aula está passando o código errado. Por favor, peço para que corrijam a aula para evitar esse problema para outros usuários. Isso afeta o aprendizado e a credibilidade do curso. Abaixo segue o código copiado diretamente das anotações da aula.

const Link = ({ children, ...rest }: { children: React.AnchorHTMLAttributes<HTMLAnchorElement> }) => {
  return (
    <a className={styles.link} {...rest}>{children}</a>
  )
}
por Max Oliveira
| 36.2k xp | 72 posts
Engenheiro Front End

Você pode reportar ao time da Alura por aqui https://www.alura.com.br/contato/ caso queira