TS、TSX、JS、JSX 文件扩展名详解

TS、TSX、JS、JSX 文件扩展名详解

📊 一、快速对比表

扩展名	语言	用途	是否可以包含JSX	是否需要编译
.js	JavaScript	普通JavaScript文件	❌ 不能	❌ 不需要
.jsx	JavaScript	包含JSX语法的文件	✅ 可以	✅ 需要（Babel等）
.ts	TypeScript	普通TypeScript文件	❌ 不能	✅ 需要（tsc）
.tsx	TypeScript	包含JSX语法的TypeScript文件	✅ 可以	✅ 需要（tsc + JSX处理）

---

🔍 二、详细解析

1. .js 文件 (JavaScript)

// index.js
// 普通JavaScript文件，用于浏览器或Node.js
const name = "John";
const age = 30;

function greet(user) {
  return `Hello, ${user.name}!`;
}

// 模块导出
export { greet };

// 没有JSX语法
// 没有类型注解

特点：

• 纯 JavaScript 语法
• 浏览器可直接运行（现代浏览器支持ES6+）
• 无需编译即可在支持的环境下运行
• 不能包含 JSX 语法

---

2. .jsx 文件 (JavaScript + JSX)

// Button.jsx
// React组件，包含JSX语法
import React from 'react';

function Button({ text, onClick }) {
  // ✅ 可以包含JSX
  return (
    <button className="btn" onClick={onClick}>
      {text}
    </button>
  );
}

// JSX编译后变成：
// React.createElement('button', { className: 'btn' }, text)

特点：

• JavaScript + JSX 语法混合
• 主要用于 React 组件
• 需要编译（Babel/Webpack/Vite等）
• 文件内可以包含 HTML-like 语法
• 无 TypeScript 类型系统

---

3. .ts 文件 (TypeScript)

// utils.ts
// 普通TypeScript文件
type User = {
  name: string;
  age: number;
  email?: string;  // 可选属性
};

function createUser(name: string, age: number): User {
  return { name, age };
}

// 泛型示例
function identity<T>(arg: T): T {
  return arg;
}

// 接口示例
interface Config {
  apiUrl: string;
  timeout: number;
}

// ❌ 不能包含JSX语法
// const element = <div>Hello</div>;  // 错误！

特点：

• TypeScript 语法（类型系统 + ES6+）
• 需要编译为 JavaScript
• 不能包含 JSX
• 用于工具函数、类型定义、配置等

---

4. .tsx 文件 (TypeScript + JSX)

// UserCard.tsx
// React组件，包含TypeScript类型和JSX
import React, { FC, useState } from 'react';

// 定义组件Props类型
interface UserCardProps {
  user: {
    id: number;
    name: string;
    age: number;
  };
  onEdit: (id: number) => void;
  className?: string;  // 可选属性
}

// 使用FC泛型（Function Component）
const UserCard: FC<UserCardProps> = ({ 
  user, 
  onEdit, 
  className = '' 
}) => {
  const [isActive, setIsActive] = useState<boolean>(false);
  
  // ✅ 可以包含JSX
  return (
    <div className={`user-card ${className}`}>
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
      <button onClick={() => onEdit(user.id)}>
        Edit
      </button>
      {isActive && <span>Active</span>}
    </div>
  );
};

export default UserCard;

特点：

• TypeScript 类型系统 + JSX 语法
• 主要用于 React 组件开发
• 编译时需要处理 JSX
• 提供完整的类型安全

---

❌ 三、常见错误

错误1：在 .ts 文件中使用 JSX

// utils.ts
// ❌ 错误：.ts文件中不能有JSX
export const element = <div>Hello</div>;

// ✅ 正确：移到 .tsx 文件
// 或：使用工厂函数
export const createElement = (text: string) => {
  return { type: 'div', children: text };
};

错误2：错误配置

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",  // ✅ 正确
    // "allowJs": true,  // 如果需要混合使用
    // "checkJs": true,  // 检查.js文件类型
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js",    // 如果包含.js
    "src/**/*.jsx"    // 如果包含.jsx
  ]
}

错误3：模块导入

// ❌ 错误：缺少类型声明
import { someFunction } from './some-js-file';

// ✅ 正确：添加类型声明
// some-js-file.d.ts
declare module './some-js-file' {
  export function someFunction(param: string): number;
}

---

🎯 四、总结与选择指南

决策树

新文件是？ → 包含JSX？ → 是 → 用 .tsx
             │
             └→ 否 → 用 .ts

旧文件是？ → .jsx → 逐步迁移到 .tsx
             │
             ├→ .js → 逐步迁移到 .ts
             │
             └→ 配置/脚本 → 保持 .js

一句话总结

• .js：纯 JavaScript，无需 JSX
• .jsx：JavaScript + JSX，React组件
• .ts：TypeScript，无 JSX
• .tsx：TypeScript + JSX，类型安全的React组件

现代开发推荐 ：新项目统一使用 .ts 和 .tsx，享受类型安全带来的开发效率提升。