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

TypeScript 文件的扩展名 .ts 和 .tsx 主要区别在于它们各自支持的内容。.ts 是TypeScript的标准扩展名，用于编写普通的 TypeScript 代码。而 .tsx 扩展名用于支持 JSX。

• .ts： 这是TypeScript的基本文件类型。当你编写纯TypeScript代码时使用 .ts 文件。它不支持 JSX，因此不能在 .ts 文件中直接使用 JSX 语法。

• .tsx： 这个文件类型专门用于在 TypeScript 文件中编写 JSX 代码。这对于开发 React 应用尤其重要，因为React 组件经常利用 JSX 来描述用户界面。.tsx 扩展名让 TypeScript 编译器知道该文件包含 JSX，因此它会适当地处理 JSX 语法。

举个例子，假设你正在开发一个 React 项目，并且你有一个组件用于显示用户信息：

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;

在以上代码中，因为使用了 JSX（例如 <div>, <h1>, <p> 等），我们必须使用 .tsx 扩展名。如果我们尝试使用 .ts 扩展名，TypeScript 编译器将会抛出错误，因为它无法理解 JSX 语法。

总的来说，选择 .ts 或 .tsx 主要取决于是否需要在文件中使用 JSX。在开发涉及到React或其他使用JSX的库的应用时，.tsx 是必须的。而对于不涉及 JSX 的普通 TypeScript 代码，则使用 .ts。