About TS & TSX

In this article, we learned about the difference between TS and TSX.

During my development, I started to see the TS extension, which I use because our project is written in TypeScript, but also the TSX extension. I couldn’t let it go unnoticed, so I checked it out and organized the post.

What is the TS extension?

The .ts extension represents a TypeScript file. TypeScript is a language that adds static type checking to JavaScript, using almost the same syntax as JavaScript and supporting a type system.

Files that use the .ts extension are recognized as TypeScript code.

What is the TSX extension?

The .tsx extension indicates a file written in TypeScript that defines a React component. React is a JavaScript library for constructing UIs, and it uses a syntax called JSX to write components. Files that use the .tsx extension are recognized as Typescript code that contains JSX syntax.

So what is JSX?

JSX란?

An extended syntax for JavaScript used in React. JSX helps you write UI components inside your JavaScript code using an XML-like syntax.

Let’s show an example of a React component that uses JSX to display a simple “Hello, World!” message.

Example of using JSX

import React from "react";

function HelloWorld() {
  return <div>Hello, World!</div>;
}

export default HelloWorld;

The “div” tag is an HTML element that represents the output of a React component. You can write these tags using JSX syntax, and define React components inside your JavaScript code.

You can learn more about JSX here: ##### Misconceptions about JSX

So, the first question I had was, do I have to use the .jsx extension whenever I include an HTML element? As it turns out, it’s not mandatory to use the .jsx extension. Files that use JSX syntax can be named with a .js extension and still work. However, using the .jsx extension makes it clear to developers and tools that the file contains JSX, making it more readable and maintainable.

Now that you know the concept of both extensions, how do you determine which one is right for your situation?

How to use contextual

By default, files that use the .tsx extension write React components while performing TypeScript’s type checks. Also, files with the .ts extension write normal JavaScript code while performing TypeScript type checking.