TypeScript 支持哪些 JSX 模式？

TypeScript 完全支持 JSX，这使得你可以在 TypeScript 中编写 React 或其他库（如 Preact）的组件。TypeScript 对 JSX 的支持意味着你可以利用 TypeScript 的类型检查功能，以确保你传递给组件的 props 是正确的类型，并且组件的状态和方法也符合你定义的类型。

对于 JSX 的模式，TypeScript 并没有特定的限制。你可以使用任何 JSX 的标准模式，例如：

1. 函数组件：

function MyComponent(props: { text: string }) {
  return <div>{props.text}</div>;
}

2. 类组件：

class MyComponent extends React.Component<{ text: string }, {}> {
  render() {
    return <div>{this.props.text}</div>;
  }
}

3. Hooks：

import React, { useState } from 'react';

function MyComponent() {
  const [text, setText] = useState('Hello, world!');
  return <div>{text}</div>;
}

4. Fragment：

function MyComponent() {
  return <>
    <div>Part 1</div>
    <div>Part 2</div>
  </>;
}

5. 条件渲染：

function MyComponent(props: { condition: boolean, text: string }) {
  return props.condition ? <div>{props.text}</div> : null;
}

6. 列表渲染：

function MyComponent(props: { items: string[] }) {
  return (
    <div>
      {props.items.map(item => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

以上只是一些基本的 JSX 模式，实际上你可以使用任何 JSX 语法，只要它符合 JSX 的规范。

另外，需要注意的是，虽然 TypeScript 支持 JSX，但你需要确保你的构建工具（如 Babel 或 TypeScript 编译器）也配置了 JSX 的支持。例如，如果你使用 TypeScript，你可能需要在你的 tsconfig.json 文件中设置 "jsx": "react" 或 "jsx": "react-native"，以指示 TypeScript 如何处理 JSX 代码。