JSX 是一种 JavaScript 的语法扩展，主要用于在 JavaScript 中编写类似 XML 的结构，常用于 React 应用中描述用户界面。在 TypeScript 中，支持 JSX 语法，并且可以提供类型检查和智能提示，使得开发过程更加安全和高效。

1. JSX 是什么？

JSX 是 JavaScript XML 的缩写，它允许开发者在 JavaScript 代码中直接编写类似 HTML 的结构。在 React 应用中，开发者可以使用 JSX 来声明组件的 UI 部分，例如：

const element = <h1>Hello, world!</h1>;

2. TypeScript 中的 JSX

TypeScript 扩展了对 JSX 的支持，可以在 TypeScript 代码中使用 JSX 语法来描述 React 组件的结构。与普通 JavaScript 不同的是，TypeScript 提供了类型检查和类型推断功能，可以在编译时捕获潜在的类型错误。

2.1. 配置 TypeScript 支持 JSX

在 TypeScript 项目中，需要在 tsconfig.json 文件中配置 jsx 选项，以指定使用哪种 JSX 的语法：

{
  "compilerOptions": {
    "jsx": "react" // 可选值为 "react" 或 "preserve"
  }
}

• "jsx": "react"：指定使用 React 的 JSX 语法，这是在 React 应用中常见的配置。
• "jsx": "preserve"：保留 JSX，不进行转换，这在某些非 React 的项目中可能会使用到。

2.2. TypeScript 中的 JSX 示例

在 TypeScript 文件中，可以直接使用 JSX 语法编写 React 组件：

import React from 'react';