{"componentChunkName":"component---src-templates-blog-post-index-js","path":"/como-resolver-erros-no-typescript-com-atributos-nos-componentes-em-react/","result":{"data":{"markdownRemark":{"fields":{"slug":"/como-resolver-erros-no-typescript-com-atributos-nos-componentes-em-react/"},"frontmatter":{"category":"JavaScript","date":"21/07/2020","description":"Trabalhar com typescript faz com que você precise tomar cuidados com tipagem e outras coisas. Veja como resolver problemas ao adicionar atributos/props em componentes.","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBP/EABUBAQEAAAAAAAAAAAAAAAAAAAIB/9oADAMBAAIQAxAAAAHHfM7CFxT/xAAaEAEAAgMBAAAAAAAAAAAAAAABAAIDEBIR/9oACAEBAAEFAjxcnPOiyRqT/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAES/9oACAEDAQE/AWo//8QAFxEBAAMAAAAAAAAAAAAAAAAAAAESMf/aAAgBAgEBPwHVJf/EABkQAAMAAwAAAAAAAAAAAAAAAAABERAhcf/aAAgBAQAGPwIUWeimj//EABoQAQADAAMAAAAAAAAAAAAAAAEAESEQQWH/2gAIAQEAAT8hIByAFV37wNNy0pzCRIg43Z//2gAMAwEAAgADAAAAEAzP/8QAFxEBAAMAAAAAAAAAAAAAAAAAARARMf/aAAgBAwEBPxCkyL//xAAYEQACAwAAAAAAAAAAAAAAAAAAARExYf/aAAgBAgEBPxCVYzP/xAAbEAEAAgMBAQAAAAAAAAAAAAABABEhMVEQYf/aAAgBAQABPxCxmzmufIbdG1WjWXxgGyP6g0MIy1QGmVvZ/9k=","aspectRatio":1.5384615384615385,"src":"/static/173ed776b60a501d2ba65b44016fb54e/86e90/typescript-in-react.jpg","srcSet":"/static/173ed776b60a501d2ba65b44016fb54e/17b1e/typescript-in-react.jpg 240w,\n/static/173ed776b60a501d2ba65b44016fb54e/2d331/typescript-in-react.jpg 480w,\n/static/173ed776b60a501d2ba65b44016fb54e/86e90/typescript-in-react.jpg 960w,\n/static/173ed776b60a501d2ba65b44016fb54e/42348/typescript-in-react.jpg 1088w","srcWebp":"/static/173ed776b60a501d2ba65b44016fb54e/c30ee/typescript-in-react.webp","srcSetWebp":"/static/173ed776b60a501d2ba65b44016fb54e/e8667/typescript-in-react.webp 240w,\n/static/173ed776b60a501d2ba65b44016fb54e/87b7f/typescript-in-react.webp 480w,\n/static/173ed776b60a501d2ba65b44016fb54e/c30ee/typescript-in-react.webp 960w,\n/static/173ed776b60a501d2ba65b44016fb54e/a61dd/typescript-in-react.webp 1088w","sizes":"(max-width: 960px) 100vw, 960px"}}},"photographer":null,"title":"Como resolver erros no typescript com atributos nos componentes em React"},"timeToRead":4,"html":"<p>Como estamos, meus nobres codeiros, cafeteiros e cervejeiros. Duas semanas sem escrever e já fico até preocupado com a contribuição, mas aqui está o artigo. Esse será um artigo rápido, prometo, que falarei sobre typescript, react e erros.</p>\n<h2>React com Typescript é lindo</h2>\n<p>Sim, é possível. Confesso que tive meu certo preconceito com <a href=\"https://www.typescriptlang.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Typescript</a>, demorei muito pra aceitar, mas agora que comecei a mexer eu não quero outra coisa. Ok, acho que estou exagerando um pouco, nós ficamos muito viciados em não tipar com JavaScript, o que faz que fiquemos putos em tipar algo.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 743px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 79.59183673469387%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAQABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB78ESXSUKP//EABgQAAMBAQAAAAAAAAAAAAAAAAABAhIR/9oACAEBAAEFAi6XIvRaeoT0f//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABgQAAIDAAAAAAAAAAAAAAAAAAAxARBh/9oACAEBAAY/AhoUmX//xAAbEAADAAIDAAAAAAAAAAAAAAAAAREQcSExYf/aAAgBAQABPyEXrdCFuUc2O8h0dfsix//aAAwDAQACAAMAAAAQ+M//xAAWEQEBAQAAAAAAAAAAAAAAAAABERD/2gAIAQMBAT8QAluf/8QAFxEBAQEBAAAAAAAAAAAAAAAAAREQIf/aAAgBAgEBPxBWycz/xAAcEAEBAAEFAQAAAAAAAAAAAAABEQAQITGRsUH/2gAIAQEAAT8QyB7Fa3zIeGJThBp37j7e2Q+YLZB5UBenT//Z'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Ilustração mostrando uma pitada de typescript numa carne com o logo do Javascript\"\n        title=\"Ilustração mostrando uma pitada de typescript numa carne com o logo do Javascript\"\n        data-src=\"/static/ffecb8f05cc19ac28010995af892df44/c84e8/typescript-react-illustration.jpg\"\n        data-srcset=\"/static/ffecb8f05cc19ac28010995af892df44/a0fb2/typescript-react-illustration.jpg 245w,\n/static/ffecb8f05cc19ac28010995af892df44/6b254/typescript-react-illustration.jpg 490w,\n/static/ffecb8f05cc19ac28010995af892df44/c84e8/typescript-react-illustration.jpg 743w\"\n        sizes=\"(max-width: 743px) 100vw, 743px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Mas confesso que isso tem feito com que eu não cometa alguns erros, fora que padroniza o código, dentre outras coisas. Bom, mas que se foda, vamos falar do que eu quero contar nesse artigo...</p>\n<h2>React + Typescript + erros com atributos</h2>\n<p>Estou migrando três projeto em <a href=\"https://www.gatsbyjs.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Gatsby</a> / React para o <a href=\"https://nx.dev/react\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">NX</a>. Em breve falarei mais sobre ele aqui no blog, é uma ferramenta fodástica. Ele por padrão usa Typescript, mas se você quiser pode usar JS, sem problemas.</p>\n<h3>Qual erro que você tomou, Dulcelino? Conta logo...</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 980px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 23.6734693877551%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAIAAADKYVtkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAwklEQVQY0zWPUW7EMAhEc5RE8WqNjWPMAE6r3v9cWzeqhEb8DO+xHec54BY3zN1D4U1GoVJKrZWfrPVJJiq1MnMrpZ5n2vbjkKFzTjNXxT1v6QKYKsx8zlsV7hERgEVM9+hdmFtKr1UeCgWw0GHmETNiPp3lonhOmDlgY6gqcqYzpW3fj351KKSL/QPH0DEUsD+dtTz+RCVnYm450yKnUnH/rJnfNr+4tS7S2sXcrt5FBjNfvdNqM5WSiSrz+51/f/4AL6M3TaFS5ikAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Erro no código feito em React / Javascript\"\n        title=\"Erro no código feito em React / Javascript\"\n        data-src=\"/static/8c6897477d04edf92482363b3a5b49de/d30ee/print-erro-codigo.png\"\n        data-srcset=\"/static/8c6897477d04edf92482363b3a5b49de/86a2e/print-erro-codigo.png 245w,\n/static/8c6897477d04edf92482363b3a5b49de/41d3c/print-erro-codigo.png 490w,\n/static/8c6897477d04edf92482363b3a5b49de/d30ee/print-erro-codigo.png 980w,\n/static/8c6897477d04edf92482363b3a5b49de/6937a/print-erro-codigo.png 1094w\"\n        sizes=\"(max-width: 980px) 100vw, 980px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Calma, caralha. Veja na imagem acima. Antes de você perguntar por que eu usei um atributo <code class=\"language-text\">background</code>, que não existe, no React com <a href=\"https://styled-components.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><code class=\"language-text\">styled-components</code></a> nós podemos usar atributos e aplicar no CSS-in-JS como props. Nesse caso nós pegamos o caminho de uma imagem externa e usamos no estilo.</p>\n<p>Veja o erro completo como texto:</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token punctuation\">(</span>JSX attribute<span class=\"token punctuation\">)</span> background: string\nNo overload matches this call.\n  Overload <span class=\"token number\">1</span> of <span class=\"token number\">2</span>, <span class=\"token string\">'(props: Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>, \"slot\" | \"style\" | ... 252 more ... | \"is\"> &amp; { ...; }, \"slot\" | ... 254 more ... | \"is\"> &amp; Partial&lt;...>, \"slot\" | ... 254 more ... | \"is\"> &amp; { ...; } &amp; { ...; }): ReactElement&lt;...>'</span>, gave the following error.\n    Type <span class=\"token string\">'{ children: Element[]; background: string; }'</span> is not assignable to <span class=\"token builtin class-name\">type</span> <span class=\"token string\">'IntrinsicAttributes &amp; Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>, \"slot\" | ... 253 more ... | \"is\"> &amp; { ...; }, \"slot\" | ... 254 more ... | \"is\"> &amp; Partial&lt;...>, \"slot\" | ... 254 more ... | \"is\"> &amp; { ...; } &amp; { ...; }'</span><span class=\"token builtin class-name\">.</span>\n    Property <span class=\"token string\">'background'</span> does not exist on <span class=\"token builtin class-name\">type</span> <span class=\"token string\">'IntrinsicAttributes &amp; Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>, \"slot\" | ... 253 more ... | \"is\"> &amp; { ...; }, \"slot\" | ... 254 more ... | \"is\"> &amp; Partial&lt;...>, \"slot\" | ... 254 more ... | \"is\"> &amp; { ...; } &amp; { ...; }'</span><span class=\"token builtin class-name\">.</span>\n    Overload <span class=\"token number\">2</span> of <span class=\"token number\">2</span>, <span class=\"token string\">'(props: StyledComponentPropsWithAs&lt;\"div\", any, {}, never>): ReactElement&lt;StyledComponentPropsWithAs&lt;\"div\", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component&lt;...>)>'</span>, gave the following error.\n    Type <span class=\"token string\">'{ children: Element[]; background: string; }'</span> is not assignable to <span class=\"token builtin class-name\">type</span> <span class=\"token string\">'IntrinsicAttributes &amp; Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>, \"slot\" | ... 253 more ... | \"is\"> &amp; { ...; }, \"slot\" | ... 254 more ... | \"is\"> &amp; Partial&lt;...>, \"slot\" | ... 254 more ... | \"is\"> &amp; { ...; } &amp; { ...; }'</span><span class=\"token builtin class-name\">.</span>\n    Property <span class=\"token string\">'background'</span> does not exist on <span class=\"token builtin class-name\">type</span> <span class=\"token string\">'IntrinsicAttributes &amp; Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>, \"slot\" | ... 253 more ... | \"is\"> &amp; { ...; }, \"slot\" | ... 254 more ... | \"is\"> &amp; Partial&lt;...>, \"slot\" | ... 254 more ... | \"is\"> &amp; { ...; } &amp; { ...; }'</span>.ts<span class=\"token punctuation\">(</span><span class=\"token number\">2769</span><span class=\"token punctuation\">)</span></code></pre></div>\n<p>No código CSS nós temos essa parte aqui pra aplicar:</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">const</span> Banner <span class=\"token operator\">=</span> styled<span class=\"token punctuation\">.</span>div<span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n  background: #000 url(</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">props</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> props<span class=\"token punctuation\">.</span>background<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">) no-repeat;\n</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>Como deu pra ver, pegamos via props o background que estiver no valor do atributo background que está na divv Banner.</p>\n<p>Voltando ao problema, viram que dá erro, pois como o elemento é uma div e essa tag não possuí um atributo chamado <code class=\"language-text\">background</code>, aí ele fica reclamando disso.</p>\n<h2>Beleza, Dulça, entendi. Mas como eu resolvo isso?</h2>\n<p>Simples, serão dois passos. O primeiro é adicionar um type para sua tag dizendo que ela terá um atributo background que será uma string, depois é só entrar no seu código de estilos do <code class=\"language-text\">styled-componenets</code> e trocar o seguinte código:</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">const</span> Banner <span class=\"token operator\">=</span> styled<span class=\"token punctuation\">.</span>div`</code></pre></div>\n<p>Por esse:</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">type</span> <span class=\"token class-name\">PropTypeBg</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  background<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">const</span> Banner <span class=\"token operator\">=</span> styled<span class=\"token punctuation\">.</span>div<span class=\"token punctuation\">.</span><span class=\"token function\">attrs</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span>props<span class=\"token operator\">:</span> PropTypeBg<span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  background<span class=\"token operator\">:</span> props<span class=\"token punctuation\">.</span>background<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token operator\">&lt;</span>PropTypeBg<span class=\"token operator\">></span>`</code></pre></div>\n<p>Perceba o seguinte:</p>\n<ul>\n<li>O tipo foi adicionado. Eu batizei de <code class=\"language-text\">PropTypeBg</code>, fique à vontade de chamar com o fodasse que quiser;</li>\n<li>Dentro desse tipo foi adicionado o parâmetro background. Caso você precise de mais, sem problemas, só adicionar outros;</li>\n<li>Na exportação do Banner nós vemos que o styled chama a tag e depois um nó <code class=\"language-text\">attrs</code>, simples assim. Nele você passa uma arrow function passando o props com o tipo que você acabou de criar, no meu caso foi o <code class=\"language-text\">PropTypeBg;</code></li>\n<li>Feito isso, você diz que o atributo background que será utilzado no estilo recebe o valor via props;</li>\n<li>Depois é só festa, sem erros, sem nada.</li>\n</ul>\n<p>O código completo fica assim:</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">type</span> <span class=\"token class-name\">PropTypeBg</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  background<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">const</span> Banner <span class=\"token operator\">=</span> styled<span class=\"token punctuation\">.</span>div<span class=\"token punctuation\">.</span><span class=\"token function\">attrs</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span>props<span class=\"token operator\">:</span> PropTypeBg<span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  background<span class=\"token operator\">:</span> props<span class=\"token punctuation\">.</span>background<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token operator\">&lt;</span>PropTypeBg<span class=\"token operator\">></span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n  background: #000 url(</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">props</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> props<span class=\"token punctuation\">.</span>background<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">) no-repeat;\n</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span></code></pre></div>\n<h2>Finalizando</h2>\n<p>Já tinha passado por esse erro? Ajudou em algo? Resolveu de alguma outra forma melhor? Manda aí, sempre bom refatorar o código ;)</p>\n<p>Ah, se quiser aprender mais sobre Typescript, e de graça, é só assistir o <a href=\"https://www.youtube.com/watch?v=mRixno_uE2o&#x26;list=PLlAbYrWSYTiPanrzauGa7vMuve7_vnXG_\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">mini curso do Will sobre Typescript</a>.</p>\n<p>Beijo na alcatra...</p>"}},"pageContext":{"nextPost":{"fields":{"slug":"/git-bare-e-mirror-como-importar-repositorios-com-todo-seu-historico/"},"frontmatter":{"title":"Git bare e mirror, como importar repositórios com todo seu histórico"}},"previousPost":{"fields":{"slug":"/como-criar-testes-em-listeners-no-react-testing-library/"},"frontmatter":{"title":"Como criar testes em listeners no React Testing Library"}},"slug":"/como-resolver-erros-no-typescript-com-atributos-nos-componentes-em-react/"}},"staticQueryHashes":["1271460761","2963127411","3623170217","764694655"]}