TypeScript 支持哪些 JSX 模式？

八股文_TypeScript面试题 0 57

参考回答

TypeScript 支持两种主要的 JSX 模式，分别是：

React 模式：这是 TypeScript 默认支持的 JSX 模式。它将 JSX 转换为 React 的 React.createElement() 调用。
React Native 模式：这是针对 React Native 开发的 JSX 模式，与 React 模式类似，但它会生成 React Native 的相关组件。

这两种模式可以通过 TypeScript 配置文件 tsconfig.json 中的 jsx 选项来设置。

详细讲解与拓展

TypeScript 中的 jsx 配置项控制了如何处理 .tsx 文件中的 JSX 语法。根据不同的框架需求，TypeScript 提供了以下几种 JSX 模式：

React 模式：
这是 TypeScript 中默认的 JSX 模式，适用于 React 项目。TypeScript 会将 JSX 转换为 React.createElement() 调用，类似于 React 16 及之前版本中的实现。这个模式允许开发者在 .tsx 文件中使用 JSX 语法，而 TypeScript 会将其转换为对应的 JavaScript 代码。

配置：
```
{
   "compilerOptions": {
       "jsx": "react"
   }
}
```
示例：
```
const element = <h1>Hello, World!</h1>;
```
编译后的 JavaScript：
```
const element = React.createElement("h1", null, "Hello, World!");
```
在这个模式下，所有的 JSX 元素都会被转换成 React.createElement() 调用，React 会根据这些元素来管理 UI 的更新。
React 17+ 模式：
React 17 引入了新的 JSX 转换，不再需要显式导入 React 对象。TypeScript 也支持这一新的转换模式。

配置：
```
{
   "compilerOptions": {
       "jsx": "react-jsx"
   }
}
```
在这个模式下，TypeScript 会将 JSX 代码转换为新的 JavaScript 代码，其中不再需要显式导入 React。

示例：
```
const element = <h1>Hello, World!</h1>;
```
编译后的 JavaScript（React 17+）：
```
const element = /*#__PURE__*/React.createElement("h1", null, "Hello, World!");
```
在 React 17+ 模式中，React.createElement 仍然是核心，但不再强制要求导入 React。
React Native 模式：
这个模式用于 React Native 项目。React Native 也使用类似的 JSX 语法，但它会生成与原生移动平台（iOS/Android）相关的组件。

配置：
```
{
   "compilerOptions": {
       "jsx": "react-native"
   }
}
```
这个模式与 React 模式类似，不同之处在于它将生成适用于 React Native 的组件，而不是 Web 上的 DOM 元素。例如，<View> 和 <Text> 等元素会被转换成对应的 React Native 组件。

示例：
```
import { View, Text } from 'react-native';

const MyComponent = () => (
   <View>
       <Text>Hello, World!</Text>
   </View>
);
```
编译后的 JavaScript 会生成 React Native 对应的元素，而不是浏览器中的 DOM 元素。
JSX 模式选项总结：
TypeScript 提供了多种 jsx 配置选项来支持不同的框架和环境：
- react：生成 React.createElement 语法，适用于 React 16 及之前版本。
- react-jsx：React 17+ 模式，支持新的 JSX 转换方式，不再需要导入 React。
- react-native：为 React Native 环境生成适当的 JSX 元素。

总结

TypeScript 支持多种 JSX 模式，包括经典的 React 模式（react）和适用于 React 17+ 的模式（react-jsx），以及适用于 React Native 项目的模式（react-native）。通过设置 tsconfig.json 中的 jsx 选项，开发者可以选择合适的 JSX 模式，从而生成符合特定环境需求的代码。

参考回答

详细讲解与拓展

总结

发表评论 取消回复

发表评论取消回复