JavaScript vs TypeScript File Extensions: .js .jsx .ts .tsx

When developing in JavaScript or TypeScript, you might encounter file extensions like `.js`, `.jsx`, `.ts`, and `.tsx`. These file extensions indicate how the files should be treated by the compiler or interpreter, especially in the context of modern web development frameworks like React. Let's explore the differences between these extensions and how they impact your code.

1. `.js` vs `.jsx`

`.js` (JavaScript)

• File Extension: `.js`
• Language: JavaScript
• Purpose: Used for general JavaScript files.
• Content: Can contain plain JavaScript code including ES6 features, but no JSX syntax.

Example of `.js` File

// example.js
function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("World"));

This is a basic JavaScript file. It doesn’t include any JSX (JavaScript XML) and can be executed in any JavaScript environment.

`.jsx` (JavaScript with JSX)

• File Extension: `.jsx`
• Language: JavaScript + JSX
• Purpose: Used primarily in React projects.
• Content: Allows the use of JSX syntax, which is a syntax extension that looks similar to XML/HTML.

Example of `.jsx` File

// example.jsx
import React from 'react';
function Greet(props) {
    return <h1>Hello, {props.name}!</h1>;
}
export default Greet;

In this example, the `.jsx` file includes JSX syntax. JSX allows you to write HTML-like code within your JavaScript, which is then transformed into JavaScript objects by tools like Babel. The file is used to define a React component, which renders an `h1` element.

When to Use `.jsx`?

• Use `.jsx` when you are writing React components that include JSX syntax.
• This extension signals to tools like Babel and TypeScript that the file contains JSX, allowing proper parsing and transformation.

2. `.ts` vs `.tsx`

`.ts` (TypeScript)

• File Extension: `.ts`
• Language: TypeScript
• Purpose: Used for TypeScript files without JSX.
• Content: Contains TypeScript code, which is a superset of JavaScript with additional features like static typing, interfaces, and generics.

Example of `.ts` File

// example.ts
function greet(name: string): string {
    return `Hello, ${name}!`;
}
console.log(greet("World"));

This is a basic TypeScript file. It looks similar to JavaScript but includes type annotations. The TypeScript compiler (TSC) checks these types at compile time, helping to catch errors early.

`.tsx` (TypeScript with JSX)

• File Extension: `.tsx`
• Language: TypeScript + JSX
• Purpose: Used in React projects that utilize TypeScript.
• Content: Contains TypeScript code with embedded JSX syntax for React components.

Example of `.tsx` File

// example.tsx
import React from 'react';
interface GreetProps {
    name: string;
}
const Greet: React.FC<GreetProps> = (props) => {
    return <h1>Hello, {props.name}!</h1>;
};
export default Greet;

In this `.tsx` file, we define a React component using TypeScript and JSX. TypeScript's type system is used to ensure that the `name` prop is always a string, adding an extra layer of safety and predictability to your code.

When to Use `.tsx`?

• Use `.tsx` when you are building React components in TypeScript and want to take advantage of both TypeScript's type-checking and JSX syntax.
• The `.tsx` extension informs the TypeScript compiler that the file contains JSX syntax, allowing it to properly handle the JSX and type-check the file.

Summary of Differences

Syntax and Usage

• `.js`: Plain JavaScript files. No JSX. Used for general JavaScript code.
• `.jsx`: JavaScript files with JSX syntax. Used primarily in React projects.
• `.ts`: TypeScript files without JSX. Used for adding static typing to JavaScript.
• `.tsx`: TypeScript files with JSX syntax. Used for building React components with TypeScript.

Compilation and Tooling

JavaScript (`.js`, `.jsx`)

• It can be run directly in browsers or Node.js.
• If using JSX (`.jsx`) requires a tool like Babel to transform JSX into valid JavaScript.

TypeScript (`.ts`, `.tsx`)

• Requires compilation to JavaScript using the TypeScript compiler (`tsc`).
• TypeScript files (`.ts`, `.tsx`) are typically part of a build process that includes type checking and transformation to JavaScript.
• `tsc` can handle `.tsx` files, which combine TypeScript and JSX, by transforming JSX into JavaScript while type-checking the TypeScript code.

Use Cases

• `.js`: General JavaScript logic, utility functions, non-React related code.
• `.jsx`: React components written in JavaScript with JSX syntax.
• `.ts`: TypeScript code without JSX; libraries, APIs, backend code, or any logic that doesn't involve React components.
• `.tsx`: React components are written in TypeScript with JSX syntax, where you need strong typing and component logic in TypeScript.

Conclusion

Understanding the differences between `.js`, `.jsx`, `.ts`, and `.tsx` is crucial for modern web development, especially when working with frameworks like React. The choice of file extension impacts not only how the file is written but also how it is compiled, validated, and integrated into your project. By choosing the right extension, you can leverage the full power of JavaScript, TypeScript, and JSX in your projects, leading to more maintainable and robust code.