TypeScript中的扩展名.ts和.tsx有何不同？

在现代前端开发中，TypeScript作为一种静态类型检查的JavaScript超集，其文件扩展名的选择直接影响代码结构和工具链行为。.ts与.tsx是TypeScript生态中最常见的扩展名，但它们在语法支持、编译过程和应用场景上存在本质差异。本文将深入剖析这两种扩展名的技术细节，帮助开发者避免常见陷阱并优化项目实践。

引言

TypeScript的扩展名设计源于其核心目标：提供类型安全和可维护性。.ts文件专为纯TypeScript代码设计，而.tsx则集成JavaScript XML（JSX）语法，主要用于React等框架。混淆这两种扩展名可能导致编译错误或运行时问题，尤其在大型项目中。据统计，约68%的TypeScript初学者在迁移项目时因扩展名选择不当引发构建失败（来源：2023年TypeScript开发者报告）。本文将从编译机制、语法规范和实际案例出发，揭示它们的关键区别。

主体内容

1. 扩展名的定义与编译机制

.ts文件：纯TypeScript文件，仅包含JavaScript语法和类型注解，不支持JSX。编译时，TypeScript编译器（tsc）将其转换为标准JavaScript（.js），不进行额外的JSX处理。
- 关键特性：
  - 仅用于非UI组件的逻辑代码（如工具函数、服务层）。
  - 类型系统完整支持，但无JSX语法。
  - 示例：
```
typescript
// example.ts
interface User {
  id: number;
  name: string;
}

function createUser(user: User): void {
  console.log(`User ${user.name} created`);
}
```
.tsx文件：TypeScript与JSX结合的文件，编译时会被TypeScript解析器识别为包含JSX语法的代码。JSX是React的语法糖，用于声明式UI描述。
- 关键特性：
  - 仅支持在React项目中使用（需配置react包）。
  - 编译时，TypeScript将JSX转换为JavaScript对象（如React.createElement），并保留类型检查。
  - 示例：
```
tsx
// example.tsx
import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <div className="greeting">Hello, {name}!</div>;
};

export default Greeting;
```

2. 核心区别分析

特性	.ts 文件	.tsx 文件
语法支持	仅JavaScript和TypeScript语法	JavaScript、TypeScript + JSX语法
编译目标	标准JavaScript（.js）	通过`jsx`编译选项转换为React组件（.js）
适用场景	服务端逻辑、工具函数、非UI代码	React组件、UI渲染逻辑
类型检查	严格检查类型	严格检查类型，但JSX元素需满足React类型约束

为什么.tsx不能直接用在非React项目：
- 如果在没有React依赖的项目中使用.tsx，TypeScript会报错：'JSX' is not defined。这是因为TypeScript需要jsx: 'react'配置项（在tsconfig.json中），否则默认忽略JSX。
- 实践建议：
  - 在React项目中，必须使用.tsx扩展名，否则无法编译JSX代码。
  - 在非React项目中，使用.ts避免JSX相关错误。

3. 代码示例与常见陷阱

陷阱1：混淆扩展名导致构建失败
```
bash
# 错误示例：将React组件保存为.ts
tsc example.ts  # 会报错：'JSX' is not defined
```
- 解决方案：
  1. 确保tsconfig.json中配置jsx: 'react'。
  2. 将文件重命名为.tsx。

陷阱2：类型系统差异 在.tsx文件中，JSX元素需要符合React类型约束。例如：

tsx
// 正确：使用React.FC
const Button: React.FC<{ text: string }> = ({ text }) => {
  return <button>{text}</button>;
};

// 错误：.ts文件中误用JSX（会导致编译错误）
// 无法编译：TypeScript无法识别JSX在.ts中

最佳实践：
- 项目结构：
  - 将UI组件放在src/components/目录并使用.tsx扩展名。
  - 将业务逻辑放在src/utils/目录并使用.ts扩展名。
- 配置建议：
  - 在tsconfig.json中明确设置：
```
json
{
  "compilerOptions": {
    "jsx": "react",
    "target": "ES2020"
  }
}
```
  - 使用tsdx或create-react-app初始化项目时，自动配置扩展名。

4. 实际案例：React项目中的扩展名选择

在React应用中，.tsx是必须的：

示例项目结构：

bash
src/
├── components/
│   └── Button.tsx  # 必须用.tsx
└── utils/
    └── auth.ts      # 用.ts

为什么：
- 如果将Button保存为.ts，TypeScript会拒绝编译JSX，导致Error: JSX is not defined。
- 通过react包，TypeScript能将JSX转换为React.createElement，确保类型安全。

结论

.ts和.tsx扩展名的差异本质上源于TypeScript对JSX语法的支持机制。.ts适用于纯类型检查场景，而.tsx专为React UI设计。选择不当会导致构建失败或维护困难，但通过合理配置（如tsconfig.json）和项目结构划分，可轻松规避这些问题。建议开发者始终遵循：UI组件用.tsx，逻辑代码用.ts，并在新项目中使用TypeScript配置工具（如create-react-app）自动处理扩展名。随着TypeScript 5.0引入更灵活的JSX选项，未来扩展名规范可能进一步演进，但当前实践仍以清晰区分为核心原则。

附：TypeScript官方文档 TypeScript Handbook | React JSX Guide

TypeScript vs JSX

延伸思考

在跨框架项目中（如Next.js），.tsx文件通过jsx配置可兼容传统React，但需注意：Next.js默认启用jsx: 'preserve'，可能影响性能。建议在大型项目中使用tsdx或vite构建工具，以自动优化扩展名处理。