JSX、TSX、JS、TS:前端代码“四兄弟”，傻傻分不清?一文全解!-技术文章-思凡资源网

哈喽，各位前端同仁！在前端开发的世界里，我们每天都与各种代码打交道，其中 JSX、TSX、JS 和 TS 这四个家伙经常会让我们傻傻分不清。它们之间有什么关系？又有什么区别呢？今天，我们就来彻底梳理一下这四者的关系，让你不再迷茫！

JS：JavaScript，前端世界的基石

首先，我们来说说 JS (JavaScript)。JS 是一种动态的、弱类型的脚本语言，它是前端开发的核心语言，几乎所有前端框架和库都基于 JS 构建。

JS 的特点：

动态类型： 变量的类型在运行时确定，不需要提前声明类型。
弱类型： 变量可以赋值为不同的类型，类型转换比较灵活。
解释型语言： JS 代码在浏览器中逐行解释执行。
广泛应用： JS 可以用于前端开发、后端开发、移动开发等多个领域。

JS 的例子：

function add(a, b) {
  return a + b;
}

let x = 10;
let y = "20";
console.log(add(x, y)); // 输出 "1020"，类型转换发生

TS：TypeScript，JS 的超集

接下来，我们来说说 TS (TypeScript)。TS 是 JS 的一个超集，它在 JS 的基础上添加了静态类型检查功能。TS 代码最终会被编译成 JS 代码，然后在浏览器中执行。

TS 的特点：

静态类型： 变量的类型在编译时确定，需要提前声明类型。
强类型： 变量的类型一旦确定，就不能随意修改，类型转换需要显式进行。
编译型语言： TS 代码需要通过 TypeScript 编译器编译成 JS 代码。
类型安全： TS 可以在开发时发现类型错误，提高代码质量和可维护性。

TS 的例子：

function add(a: number, b: number): number {
  return a + b;
}

let x: number = 10;
let y: string = "20";
// console.log(add(x, y)); // 报错，类型不匹配
console.log(add(x, parseInt(y))); // 正确，需要显式类型转换

JSX：JavaScript 的 XML 扩展

JSX (JavaScript XML) 是一种 JS 的语法扩展，它允许我们在 JS 代码中编写类似 HTML 的结构，主要用于 React 开发。

JSX 的特点：

声明式 UI： 通过 JSX，我们可以像描述 UI 结构一样编写代码。
JS 表达式： JSX 支持使用 JS 表达式，可以动态生成 UI。
React 专属： JSX 主要用于 React 项目中，其他框架一般不使用 JSX。
编译为 JS： JSX 代码需要通过 Babel 等工具编译成标准的 JS 代码。

JSX 的例子：

import React from 'react';

function MyComponent(props) {
  return (
    
      Hello, {props.name}!
      You are {props.age} years old.
    
  );
}

export default MyComponent;

TSX：TypeScript 的 JSX 扩展

TSX (TypeScript XML) 是一种 TS 的语法扩展，它在 JSX 的基础上添加了类型检查功能。TSX 代码可以被 TypeScript 编译器编译成 JS 代码。

TSX 的特点：

类型安全： TSX 支持 TypeScript 的类型系统，可以在编译时进行类型检查。
类型化的 React 组件： TSX 可以提供更好的代码提示和自动补全功能。
编译为 JS： TSX 代码需要通过 TypeScript 编译器编译成标准的 JS 代码。
TypeScript 专属： TSX 主要用于 TypeScript 项目中。

TSX 的例子：

import React from 'react';

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

function MyComponent(props: MyComponentProps): JSX.Element {
  return (
    
      Hello, {props.name}!
      You are {props.age} years old.
    
  );
}

export default MyComponent;

四者的关系：

JS 是基础，所有前端代码最终都会变成 JS 代码运行。
TS 是 JS 的超集，它添加了静态类型检查功能，可以提高代码质量。
JSX 是 JS 的扩展，它可以让我们在 JS 中编写类似 HTML 的结构，主要用于 React 开发。
TSX 是 TS 的扩展，它在 JSX 的基础上添加了类型检查功能，用于 TypeScript 的 React 开发。

总结：

JS： 前端开发的基石，动态、弱类型。
TS： JS 的超集，静态、强类型，可以提高代码质量。
JSX： JS 的 XML 扩展，用于编写 UI 结构。
TSX： TS 的 JSX 扩展，用于类型安全的 UI 开发。

选择哪一个？

如果你正在使用纯 JavaScript 开发项目，那么你只需要使用 JS 和 JSX。
如果你正在使用 TypeScript 开发项目，那么你应该使用 TS 和 TSX。
如果你是初学者，建议先学习 JS，然后再学习 TS，这样更容易理解 TS 的优势。

结尾：

希望这篇文章能帮你更好地理解 JSX、TSX、JS 和 TS 之间的关系。如果你觉得这篇文章对你有帮助，请点赞、评论、收藏，也欢迎分享给你的朋友们。让我们一起在前端的道路上越走越远！