编译器配置项-compilerOptions

语言和环境相关配置04

JSX片段工厂函数 -jsxFragmentFactory

在编译器选项 jsxFactory 设定输出的JSX的方式后，设置 JSX 片段工厂函数，例如 Fragment

例如，使用以下TSConfig配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

以下 .tsx 文件：

import { h, Fragment } from "preact";
const HelloWorld = () => (
  <>
    <div>Hello</div>
  </>
);

转换后的js代码看起来如下：

const preact_1 = require("preact");
const HelloWorld = () => ((0, preact_1.h)(preact_1.Fragment, null,
    (0, preact_1.h)("div", null, "Hello")));

此选项可以基于每个文件使用，与 Babel 的 /* @jsxFrag h */ 指令非常相似。

例如：

/** @jsx h */
/** @jsxFrag Fragment */

import { h, Fragment } from "preact";
Cannot find module 'preact' or its corresponding type declarations.

const HelloWorld = () => (
  <>
    <div>Hello</div>
  </>
);

jsx导入的源 -jsxImportSource

在配置选项 jsx （在TypeScript 4.1版本引入）设置为 react-jsx 或者 react-jsxdev 时，指定 jsx 和 jsxs 工厂函数从哪一个模块导入。

在 React 17 中，该库通过单独的导入支持一种新形式的 JSX 转换。

例如，有以下代码：

import React from "react";
function App() {
  return <h1>Hello World</h1>;
}

使用以下 TSConfig：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react-jsx"
  }
}

The emitted JavaScript from TypeScript is:

从 TypeScript 转换的 JavaScript 代码如下：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
function App() {
    return (0, jsx_runtime_1.jsx)("h1", { children: "Hello World" });
}

假如，你想使用"jsxImportSource": "preact"，那么你需要如下配置 tsconfig：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "types": ["preact"]
  }
}

生成的代码如下：

function App() {
    return (0, jsx_runtime_1.jsx)("h1", { children: "Hello World" });
}

或者，你可以在每个文件中添加如下注释启用此选项，例如：

/** @jsxImportSource preact */
export function App() {
  return <h1>Hello World</h1>;
}

将添加 preact/jsx-runtime 作为_jsx工厂函数导入的模块。

注意 ： 为了使它像你预期的那样工作，你的 .tsx 文件必须包含一个 import 或者 exports 语句，这样才能将其视为一个模块。