Qual o tipo da propriedade children em React com TypeScript?

Neste artigo você vai aprender qual o tipo da propriedade children em React, e como utilizar melhor o React com TypeScript

Fala programador(a), beleza? Bora aprender mais sobre TypeScript e React!

Introdução

React é uma biblioteca popular para criar interfaces de usuário, e TypeScript é um superconjunto de JavaScript que adiciona tipagem estática ao idioma.

A combinação de React com TypeScript traz muitos benefícios, como melhor previsibilidade, autocompletar e verificação de tipo, facilitando o desenvolvimento e a manutenção do código.

Uma das propriedades mais comuns em componentes React é a propriedade children.

Neste artigo, discutiremos qual é o tipo correto para a propriedade children em React com TypeScript e como usá-lo corretamente.

A propriedade children

A propriedade children é uma propriedade especial em componentes React que contém os elementos filhos de um componente.

Ela é usada para compor componentes e permitir que eles aceitem conteúdo arbitrário.

Por exemplo:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Uso do componente Card com elementos filhos
<Card>
  <h2>Título</h2>
  <p>Descrição</p>
</Card>

Neste exemplo, o componente Card aceita qualquer conteúdo como seus filhos e os renderiza dentro de um elemento div.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Tipando a propriedade children com TypeScript

Para usar a propriedade children com TypeScript, é necessário definir o tipo correto para ela.

O tipo recomendado para a propriedade children é React.ReactNode. React.ReactNode é um tipo amplo que representa qualquer coisa que possa ser renderizada em um componente React, incluindo elementos, strings, números, arrays e até mesmo null ou undefined.

Aqui está um exemplo de como tipar a propriedade children com TypeScript:

import React from 'react';

interface CardProps {
  children: React.ReactNode;
}

const Card: React.FC<CardProps> = ({ children }) => {
  return <div className="card">{children}</div>;
};

export default Card;

Neste exemplo, criamos uma interface CardProps que define o tipo para a propriedade children como React.ReactNode.

Em seguida, usamos essa interface como a tipagem das props do componente Card. Isso garante que o componente aceite corretamente qualquer conteúdo que possa ser renderizado como seus filhos.

Alternativamente, você pode usar a propriedade children diretamente ao definir o tipo de função do componente:

import React from 'react';

const Card: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return <div className="card">{children}</div>;
};

export default Card;

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

E chegamos ao fim do artigo sobre o tipo da propriedade children em React!

Neste artigo, discutimos qual é o tipo correto para a propriedade children em React com TypeScript e como usá-lo corretamente.

Ao usar React.ReactNode como o tipo para a propriedade children, você garante que seu componente aceite qualquer conteúdo que possa ser renderizado em React e aproveite ao máximo os benefícios da tipagem estática proporcionados pelo TypeScript.

Lembre-se de que a tipagem estática é apenas uma das muitas ferramentas à sua disposição para escrever código seguro e eficiente.

Sempre que possível, combine a verificação de tipo com práticas recomendadas de programação, testes automatizados e revisão de código para

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

children é obrigatório ou opcional?

Do jeito que a interface ficou ali em cima, o children é OBRIGATÓRIO

Ou seja: se você usar o Card sem nada dentro, o TypeScript reclama na hora

Se o seu componente pode aparecer vazio, marca o children com interrogação:

import React from 'react';

interface CardProps {
children?: React.ReactNode;
}

const Card = ({ children }: CardProps) => {
return <div className="card">{children}</div>;
};

A interrogação diz pro TypeScript que aquela prop pode simplesmente não vir

Parece detalhe bobo, mas é exatamente o tipo de coisa que quebra build e te deixa 20 minutos encarando a tela 😀

E se eu não quiser usar React.FC?

Dá pra tipar o componente sem passar pelo React.FC, tipando direto as props da função:

import React from 'react';

interface CardProps {
children: React.ReactNode;
}

function Card({ children }: CardProps) {
return <div className="card">{children}</div>;
}

export default Card;

O resultado é o mesmo: children tipado, autocomplete funcionando, erro na hora certa

A diferença é que aqui a tipagem mora nas props do componente, e não no tipo da constante

E fica a dica que vale pros dois caminhos: DECLARE o children explicitamente nas suas props, sempre

Contar que ele vem de graça é o jeito mais rápido de tomar um erro de tipo que você não escreveu 🙂

children junto com outras props:

Na vida real o componente quase nunca recebe só children, né?

Ele recebe um título, uma variação de cor, um onClick, e o children no meio disso tudo

A boa notícia: children é só mais uma prop dentro da sua interface

import React from 'react';

interface CardProps {
titulo: string;
destaque?: boolean;
children: React.ReactNode;
}

function Card({ titulo, destaque = false, children }: CardProps) {
return (
<div className={destaque ? 'card card-destaque' : 'card'}>
<h2>{titulo}</h2>
{children}
</div>
);
}

Se você conhece a ideia de props tipadas, o children entra exatamente na mesma lista, sem tratamento especial

Bora ver na prática? Troca o titulo por um número no uso do componente e vê o editor gritar na hora 😀

E quando o children é uma função?

Tem um caso que pega muita gente de surpresa: passar uma FUNÇÃO como filho do componente

<Lista>
{(item) => <li>{item}</li>}
</Lista>

Se você tipar esse children como React.ReactNode, o TypeScript não vai te ajudar em nada ali dentro

Nesse caso, o tipo do children é o tipo da própria função:

import React from 'react';

interface ListaProps {
children: (item: string) => React.ReactNode;
}

function Lista({ itens, children }: ListaProps) {
return <ul>{itens.map((item) => children(item))}</ul>;
}

Se liga no ganho: agora o item já chega tipado como string lá dentro da função, com autocomplete e tudo

O children continua sendo children, o que muda é o formato do que você aceita receber

Perguntas frequentes sobre children no TypeScript:

O TypeScript diz que children não existe nas props do meu componente, e agora?

Esse recado quase sempre significa a mesma coisa: você usou children dentro do componente sem declarar ele na tipagem das props

Adiciona children na sua interface e o aviso some

Posso deixar o children sem tipo nenhum?

Pode, mas aí você joga fora justamente o que foi buscar no TypeScript

Sem tipo, nada te avisa quando o componente recebe algo que não dá pra renderizar

children aceita texto puro e número, ou só JSX?

Aceita bem mais que JSX, e é por isso que o React.ReactNode é o tipo recomendado aqui

Ele cobre o conteúdo comum que você joga dentro de um componente, do elemento ao texto solto

Preciso repetir essa tipagem em todo componente?

Se o componente usa children, sim, ele precisa declarar isso nas próprias props

O atalho de verdade é criar uma interface base e estender ela nos componentes que compartilham as mesmas props, aí você escreve uma vez só