Entenda o que é .tsx, como TypeScript e JSX se relacionam e quando usar arquivos .ts, .tsx ou .jsx em projetos de front-end.
Em resumo:
Ao abrir um projeto de front-end pela primeira vez, é comum encontrar arquivos com as extensões .tsx, .ts e .jsx.
Essa variação não é acidental: cada extensão informa ao editor de código e às ferramentas de build o que esperar do conteúdo do arquivo.
Este artigo explica o que a extensão .tsx representa, como ela se relaciona com TypeScript e JSX, e em que situações escolher .ts ou .jsx faz mais sentido.
A extensão .tsx identifica um arquivo de código-fonte escrito em TypeScript que também contém marcação no estilo JSX.
Na prática, é a junção de duas convenções: o “ts” indica que o arquivo aceita os recursos de tipagem do TypeScript, e o “x” indica que, além do código, o arquivo pode conter blocos de marcação usados para descrever elementos de interface.
Um arquivo com essa extensão normalmente define um componente: uma peça de interface que recebe dados de entrada e devolve a estrutura visual correspondente. Sem a extensão .tsx, esse mesmo arquivo não poderia misturar tipagem estática com marcação de interface no mesmo lugar.
TypeScript é uma camada de tipagem estática construída sobre o JavaScript. Isso significa que, além de escrever a lógica do programa, quem programa também declara o tipo esperado de cada variável, parâmetro ou retorno de função.
Por exemplo, é possível declarar que uma variável chamada nome deve sempre conter texto, e não número, data ou outro tipo de dado.
Essa declaração explícita reduz erros que só apareceriam em tempo de execução, porque o editor e o compilador conseguem apontar uma incompatibilidade antes mesmo do código rodar.
Nomear variáveis, funções e tipos de forma clara é parte dessa disciplina, e segue o mesmo princípio de quem escreve um texto: quanto mais direta a informação, menor a chance de interpretação equivocada.
JSX é uma sintaxe que permite descrever elementos de interface dentro do próprio código, misturando lógica e estrutura visual no mesmo arquivo.
Em vez de escrever a interface em um arquivo separado, quem programa descreve, por exemplo, que um componente chamado Botao recebe uma propriedade de texto e devolve a estrutura equivalente a um botão com esse texto.
Essa proximidade entre lógica e marcação é útil porque um componente de interface normalmente depende diretamente dos dados que processa: a mesma função que decide o que exibir também descreve como exibir.
Nomear esse componente e suas propriedades de forma clara segue a mesma lógica de quem organiza um texto em partes reconhecíveis.
Quando esse componente também precisa de tipagem, ou seja, quando as propriedades recebidas precisam ter um tipo declarado, o arquivo passa a exigir a extensão .tsx em vez de .jsx.
A tabela a seguir resume o que cada extensão aceita e quando ela costuma ser usada em um projeto de front-end.
| Extensão | O que aceita | Quando usar | Exemplo de conteúdo |
|---|---|---|---|
| .ts | Tipagem do TypeScript, sem marcação de interface | Lógica pura: funções utilitárias, tipos, chamadas de dados | Uma função que calcula um valor e retorna um número tipado |
| .jsx | Marcação de interface, sem verificação de tipos | Componentes de interface em projetos que não usam TypeScript | Um componente que recebe um texto e devolve um elemento visual |
| .tsx | Tipagem do TypeScript e marcação de interface no mesmo arquivo | Componentes de interface em projetos que usam TypeScript | Um componente tipado que recebe propriedades e devolve a interface correspondente |
O critério prático é simples: a extensão depende do conteúdo do arquivo, não do projeto como um todo.
Um arquivo que só contém lógica, tipos ou funções auxiliares, sem nenhuma marcação de interface, deve usar .ts. Já um arquivo que define um componente visual, mesmo que pequeno, e que também precisa de tipagem, deve usar .tsx.
É comum um mesmo projeto ter os dois tipos de arquivo convivendo: os arquivos de lógica e de tipos em .ts, e os arquivos de componente em .tsx.
Tentar forçar um componente de interface em um arquivo .ts normalmente gera erro de compilação, porque o compilador não espera marcação de interface nesse contexto.
Um arquivo .tsx não é executado diretamente pelo navegador. Antes de chegar ao usuário final, ele passa por um processo de transpilação, que converte a tipagem e a marcação de interface em JavaScript puro, sem tipos e sem a sintaxe de marcação original.
Esse processo também remove as anotações de tipo, já que elas existem apenas para checagem durante o desenvolvimento.
O resultado final entregue ao navegador é um arquivo JavaScript comum, sem rastro visível da extensão original. Por isso, um erro de tipagem em um arquivo .tsx é detectado antes da execução, durante essa etapa de transpilação, e não em tempo real no navegador.
Sim, mas isso só resolve o problema se o arquivo realmente precisar conter marcação de interface. Renomear um arquivo que só tem lógica, sem nenhuma marcação, não altera seu comportamento e pode até confundir quem lê o projeto depois.
Não necessariamente. Uma aplicação React escrita em JavaScript puro usa arquivos .jsx para os componentes. A extensão .tsx só aparece quando o projeto adota TypeScript além de React.
O formato .tsx não pertence exclusivamente ao React. Ele existe porque o compilador do TypeScript sabe interpretar marcação JSX, e outras bibliotecas de interface que usam sintaxe semelhante também podem se apoiar nesse mesmo formato de arquivo.
Um editor de texto comum já abre e exibe o conteúdo de um arquivo .tsx, porque ele é apenas texto. Para que o projeto reconheça a tipagem e a marcação corretamente durante o desenvolvimento, é necessário ter o compilador do TypeScript configurado no projeto.
Os erros mais frequentes envolvem misturar marcação de interface em um arquivo .ts, esquecer de declarar o tipo de uma propriedade recebida por um componente, ou copiar um trecho de código de um projeto em JavaScript puro sem ajustar a tipagem exigida pelo TypeScript.
Se você quer ingressar ou crescer no mercado da tecnologia, a Allevo Tech oferece formações práticas em áreas de alta demanda, como Engenharia de Software, Ciência de Dados e Inteligência Artificial.
As trilhas são estruturadas para desenvolver competências técnicas e preparar você para os desafios do mercado de trabalho.
Clique no botão abaixo e conheça as formações da Allevo Tech que podem impulsionar a sua trajetória profissional.
Em resumo: A Universidade de Harvard, uma das mais famosas e prestigiadas instituições de ensino superior de todo o mundo, está oferecendocursos online e gratuitos com legendas em português para brasileiros. Encontre bolsas de estudo de até 80% O site reúne cursos de diversas áreas do conhecimento, e os interessados não precisam pagar nada para […]
Plataformas do MEC, Ministério do Trabalho, Senado Federal e Escola Virtual de Governo oferecem capacitações online em diferentes áreas do conhecimento
Em resumo: O Serviço Nacional de Aprendizagem Industrial (Senai) oferece ao longo de todo o ano diversos cursos gratuitos. A principal modalidade oferecida sem custos são os cursos livres, nas mais diversas áreas e para os mais diversos interesses. Encontre bolsas de estudo de até 80% Dentre as opções ofertadas, os interessados podem escolher a modalidade […]
