Build a Dynamic Avatar Component with React & TypeScript Tutorial (14 exercises)

Discuss when to Use .ts vs .tsx

Learn about using .ts vs .tsx file extensions and when you should use each.

Similar to working in JS-only, you might be wondering, “when do I use .ts vs .tsx?” the answer is simple, does your file contain JSX, aka a component?

  • use .tsx
  • otherwise use .ts
.tsx vs .tsLoading


The following resources provide more information for this lesson:


A quick tip that I want to cover is file extensions. When you're working with JavaScript in React you have to choose between .js and .jsx. It's similar in the TypeScript world, as you saw on the previous lesson. We have .tsx and .ts.

It's a similar rule. Does your file contain JSX? If it does, use tsx. If it's pure TypeScript and doesn't have JSX, use .ts.