'jsx‘属性在tsconfig.json中的用途是什么？

Question

我用tsconfig.json生成了tsc --init，

然后我在一个.tsx文件中编写了react代码，并得到了错误Cannot use JSX unless the '--jsx' flag is provided。

我偶然发现了jsx的tsconfig设置

它在注释模式下将jsx作为

// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react', 'react-jsx'. */

那这三种选择意味着什么？即preserve、react-native和react

Answer 1

属性允许我们在项目中使用jsx文件。

，下面是使用React与类型记录的两个步骤

1.用.tsx扩展名命名文件

2.启用jsx选项

TypeScript提供了三种JSX模式:保存、反应和反应-本机。

这些模式只影响发射阶段类型的检查不受影响.

preserve 模式将使JSX作为输出的一部分由另一个转换步骤(例如)进一步使用。此外，输出将具有.jsx文件扩展名。

react 模式将发出React.createElement，在使用前不需要经过JSX转换，输出将具有.js文件扩展名.。

react-native 模式与模式等价，因为它保留了所有的JSX，但是输出将具有.js文件扩展名。

react-jsx (与i.e. 17相关)模式可以帮助您避免在使用jsx的每个文件中导入i.e.，即它将发出。

React引入了一个新的JSX转换，它发布了React 17，它不使用React.createElement就自动转换JSX。这允许我们不导入React，但是，您需要导入React才能使用钩子和其他React提供的https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

https://www.typescriptlang.org/docs/handbook/jsx.html#basic-usage