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

Question

我已经生成了 tsconfig.json tsc --init，

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

我偶然发现了这个jsx设置tsconfig

它jsx在评论模式下为

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

那么这三个选项是什么意思呢？即preserve，react-native和react

Answer 1

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

下面是在 Typescript 中使用 React 的两个步骤

1.使用 .tsx 扩展名命名您的文件

2.开启jsx选项

TypeScript 附带三种 JSX 模式：preserve、react 和 react-native。

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

该preserve模式将保留 JSX 作为输出的一部分，以供另一个转换步骤（例如 Babel）进一步使用。此外，输出将具有 .jsx 文件扩展名。

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

该react-native模式等效于保留，因为它保留所有 JSX，但输出将改为具有 .js 文件扩展名。

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