DEV Community

Pratyush Raj Singh
Pratyush Raj Singh

Posted on

From JavaScript to TypeScript

#programming #javascript #webdev #beginners

Let's talk about something fundamental that often trips people up when they're first diving into the world of front-end development, especially with REACT and Typescript: the difference between .js, .jsx, .ts, and .tsx file extensions.

It seems like a small detail, but understanding this can save you from a lot of head-scratching and "why isn't this working?" moments.

From JavaScript to TypeScript: The Big Leap

We all start with JavaScript, right? The language is flexible, dynamic, and gets the job done. But that flexibility can be a double -edged sword.

Imagine you have a function that's supposed to add two numbers. In a .js file, you might write:

function add(a, b) {
  return a + b;
}
Enter fullscreen mode Exit fullscreen mode

This works perfectly... until someone accidentally calls it like add (5, "world"). JavaScript will happily return "5world", and you might not even know you have a bug until much later.

This is where TypeScript comes in. By using a .ts file, we introduce static typing. We tell the code what to expect, and the compiler becomes our trusty assistant, catching mistakes before they ever become a problem (at runtime).


function add(a: number, b: number): number {
  return a + b;
}
Enter fullscreen mode Exit fullscreen mode

Now, if you try to call add(5, "world"), the TypeScript compiler will immediately throw an error. It's like having a spelling checker for your code logic. It's a game-changer for building robust, scalable applications.

Adding JSX into the Mix

Now, let's talk about building user interfaces, specifically with React. React uses something called JSX, which is an elegant way to write HTML-like code directly within your JavaScript files.

  • In a standard React app, your component files might use the .js or .jsx extension. The "x" in .jsx was originally a clear signal to build tools that "hey, this file contains JSX!". Today, most modern setups can handle JSX in a .js file, but the intention remains the same.

  • When you bring TypeScript into your React projects, you need a way to tell the TypeScript compiler to not only check the types but also correctly parse the JSX.

This is the job of the .tsx file extension.

Think of it this way:

  • .ts = Standard TypeScript code (type-safe logic)

  • .tsx = TypeScript + JSX (type-safe React components).

In practice, this means your component files will be .tsx, while your utility functions, API services, and other non-UI logic will live in .ts files. This keeps your codebase organized and ensures that your components are just as type-safe as the rest of your application.

Why This Matters

Choosing the right file extension isn't just about following conventions; it's about clarity and stability. It allows development tools to do their job effectively and, most importantly, it helps you and your team write more predictable and less error-prone code.

So, the next time you see .ts or .tsx, you'll know it's not just another file type - it's a conscious choice for building more robus, maintainable, and reliable software.

Top comments (0)