文件扩展名.js .jsx .ts .tsx区别（JavaScript扩展名、React扩展名、TypeScript扩展名）
文章目录
- 文件扩展名详细解释
- .js (JavaScript 文件)
- .jsx (JavaScript XML 文件)
- .ts (TypeScript 文件)
- .tsx (TypeScript XML 文件)
- 总结对比
文件扩展名详细解释
.js (JavaScript 文件)
- 用途：标准的JavaScript文件扩展名
- 项目类型：普通JavaScript项目、不使用JSX的React项目
- 特点：纯JavaScript代码，不包含JSX语法
- 示例：
utils.js,app.js,api.js - 知识库参考：从知识库[1]和[2]中可以看到，“外部JavaScript文件的文件扩展名是：.js”
.jsx (JavaScript XML 文件)
- 用途：用于包含JSX语法的JavaScript文件
- 项目类型：React项目（使用JSX的组件）
- 特点：允许在JavaScript中编写类似HTML的标记语法（JSX），是React的核心特性
- 示例：
App.jsx,Header.jsx,Button.jsx - 知识库参考：React项目中，使用JSX的组件文件通常使用
.jsx扩展名
.ts (TypeScript 文件)
- 用途：TypeScript文件的默认扩展名
- 项目类型：TypeScript项目（纯TypeScript，不包含JSX）
- 特点：TypeScript是JavaScript的超集，增加了静态类型检查等特性
- 示例：
app.ts,utils.ts,main.ts - 知识库参考：从知识库[2]中可以看到，“.ts 是默认的文件扩展名”
.tsx (TypeScript XML 文件)
- 用途：用于包含JSX语法的TypeScript文件
- 项目类型：React + TypeScript项目（使用JSX的组件）
- 特点：TypeScript + JSX的组合，是React项目中使用TypeScript的常见方式
- 示例：
App.tsx,Header.tsx,Button.tsx - 知识库参考：从知识库[2]中可以看到，“.tsx 是一个用于包含 JSX 代码的特殊扩展名”
总结对比
| 扩展名 | 语言 | 是否包含JSX | 主要项目类型 |
|---|---|---|---|
.js | JavaScript | 否 | 普通JavaScript项目 |
.jsx | JavaScript | 是 | React项目（纯JS） |
.ts | TypeScript | 否 | TypeScript项目（非React） |
.tsx | TypeScript | 是 | React + TypeScript项目 |
在React项目中，如果你使用TypeScript，组件文件通常使用.tsx扩展名；如果只使用JavaScript，组件文件则使用.jsx扩展名。
ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ
ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ