.tsx: o que é, para que serve e diferença para .ts e .jsx

Em resumo:

• .tsx combina tipagem do TypeScript com a sintaxe de marcação do JSX em um único arquivo.
• .ts serve para lógica pura, sem marcação de interface.
• .jsx aceita marcação de interface, mas sem verificação de tipos.
• A escolha da extensão certa depende do conteúdo do arquivo, não apenas do framework usado.

Ao abrir um projeto de front-end pela primeira vez, é comum encontrar arquivos com as extensões .tsx, .ts e .jsx.

• Quer estudar na área de Dados? Conheça a Allevo Tech!

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.

O que significa a extensão .tsx?

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.

O papel do TypeScript no front-end

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 e componentes de interface

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.

Comparação entre .ts, .jsx e .tsx

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

Quando usar .tsx em vez de .ts

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.

O que acontece com um arquivo .tsx no build?

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.

Dúvidas frequentes

Posso renomear um arquivo .ts para .tsx?

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.

Toda aplicação React usa .tsx?

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.

.tsx funciona sem 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.

Preciso instalar algo para abrir um .tsx?

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.

Quais são os erros mais comuns ao trabalhar com .tsx?

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.

Construa sua carreira em tecnologia com formações alinhadas ao mercado

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.