TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查和面向对象编程的特性。JSX 是一种 JavaScript 的语法扩展，主要用于 React 组件的声明性渲染。TypeScript 完美地支持 JSX，并允许你为 React 组件和它们的 props 添加类型注解。

TypeScript 中的 JSX 简介

在 TypeScript 中使用 JSX，你可以：

1. 定义组件类型：你可以为组件定义 prop 类型，以确保传递给组件的 props 是正确的。
2. 增强类型检查：TypeScript 的类型检查可以帮助你捕获在 JSX 中可能出现的错误。
3. 使用 TypeScript 的其他特性：例如，接口、枚举、泛型等，以在 React 组件中提供更丰富的类型系统。

使用方法

1. 配置 TypeScript 项目

确保你的项目中安装了 TypeScript 和相应的依赖项（例如 @types/react 和 @types/react-dom）。

在 tsconfig.json 中，你需要启用 jsx 选项，并设置其值为 "react" 或 "react-jsx"（取决于你的 TypeScript 版本）。

{"compilerOptions": {"target": "es5","lib": ["dom", "dom.iterable", "esnext"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx" // 或者 "react"},"include": ["src"]
}

2. 定义组件类型

你可以使用 TypeScript 的接口或类型别名来定义组件的 prop 类型。

import React from 'react';interface GreetingProps {name: string;enthusiasmLevel?: number;
}const Greeting: React.FC<GreetingProps> = ({ name, enthusiasmLevel = 1 }) => {if (enthusiasmLevel <= 0) {throw new Error('你至少需要有一点热情！');}const result = `嗨，${name + getExclamationMarks(enthusiasmLevel)}`;return <div>{result}</div>;
};// 辅助函数
function getExclamationMarks(numChars: number) {return Array(numChars + 1).join('!');
}

3. 使用组件

现在你可以在你的 JSX 中使用 Greeting 组件，并传递正确的 props。TypeScript 将为你提供类型检查和自动补全。

import React from 'react';
import { Greeting } from './Greeting';function App() {return (<div className="App"><Greeting name="TypeScript" enthusiasmLevel={10} />{/* TypeScript 会检查这里的 props 是否符合 GreetingProps 的定义 */}</div>);
}export default App;

4. 使用 JSX 的其他特性

你还可以在 TypeScript 中使用 JSX 的其他特性，例如条件渲染、列表渲染、事件处理等。TypeScript 将为你提供强大的类型支持和代码补全功能。