How do the extensions .ts and .tsx differ in TypeScript?

The primary difference between the .ts and .tsx extensions in TypeScript lies in the content they support. .ts is the standard extension for TypeScript, used for writing plain TypeScript code. .tsx is specifically designed for supporting JSX.

• .ts： This is the basic file type for TypeScript. Use .ts files when writing plain TypeScript code. It does not support JSX, so JSX syntax cannot be directly used in .ts files.

• .tsx： This file type is designed for writing JSX code within TypeScript files. It is particularly important for developing React applications, as React components commonly use JSX to describe the user interface. The .tsx extension informs the TypeScript compiler that the file contains JSX, enabling it to process JSX syntax appropriately.

For example, suppose you are developing a React project and have a component for displaying user information:

tsx
// UserProfile.tsx
import React from 'react';

interface User {
  name: string;
  age: number;
}

const UserProfile: React.FC<User> = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
}

export default UserProfile;

In the above code, since JSX is used (e.g., <div>, <h1>, <p>, etc.), the .tsx extension is required. Attempting to use .ts would cause the TypeScript compiler to throw an error because it cannot parse JSX syntax.

In summary, choosing between .ts and .tsx primarily depends on whether you need to use JSX in the file. For applications involving React or other libraries that use JSX, .tsx is mandatory. For plain TypeScript code without JSX, use .ts.