编译器配置项-compilerOptions

语言和环境相关配置02

jsx功能 -jsx

这个选项控制 JSX 文件输出 JavaScript 文件的方式，仅仅影响.tsx文件到JS 文件的输出。

• react-jsx：输出的js 文件，将 JSX 语法转换为经过优化的针对生产环境调用的 _jsx
• react-jsxdev：输出的js 文件，将 JSX 语法转换为针对开发环境调用的_jsxDEV
• preserve：输出 .jsx 文件，并且保持 JSX 语法不变
• react-native：输出 .js 文件，但保持 JSX 语法不变
• react：输出的js 文件，将 JSX 语法转换为等价的React.createElement

例如，以下示例代码：

export const HelloWorld = () => <h1>Hello world</h1>;

设置为React的 react-jsx：

import { jsx as _jsx } from "react/jsx-runtime";
export const HelloWorld = () => _jsx("h1", { children: "Hello world" });

设置为React的开发模式： [1]"react-jsxdev"

import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
const _jsxFileName = "/home/runner/work/TypeScript-Website/TypeScript-Website/packages/typescriptlang-org/index.tsx";
export const HelloWorld = () => _jsxDEV("h1", { children: "Hello world" }, void 0, false, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 32 }, this);

设置为 "preserve" ：

import React from 'react';
export const HelloWorld = () => <h1>Hello world</h1>;

设置为 "react-native" ：

import React from 'react';
export const HelloWorld = () => <h1>Hello world</h1>;

在老版本React运行时中设置为 "react" ：

import React from 'react';
export const HelloWorld = () => React.createElement("h1", null, "Hello world");

这个选项也可以通过在每个文件的基础注释中添加 @jsxRuntime 启用。

例如，对以下文件始终使用经典的运行时（与选项设置为 react 相等，但只针对该文件）：

/* @jsxRuntime classic */
export const HelloWorld = () => <h1>Hello world</h1>;

例如，对以下文件始终使用自动运行时（与选项设置为 react-jsx 相等，但只针对该文件）：

/* @jsxRuntime automatic */
export const HelloWorld = () => <h1>Hello world</h1>;