脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → TypeScript编译TSX文件

详解TypeScript编译TSX文件的方法

 更新时间：2023年09月07日 08:58:39   作者：进二开物  
因为使用 Cycle.js 的 Vite + TSX 所以想详细的探索 TSX 在 TS 配置中的编译情况,本文主要讲解 tsconfig 和 tsx 编译与配置,以常见的框架 PReact 的虚拟 DOM + TSX 组合、snabbdom + TSX 组合不同的配置以及编译输出

一、简介

因为使用 Cycle.js 的 Vite + TSX 所以想详细的探索 TSX 在 TS 配置中的编译情况，本文主要讲解 tsconfig 和 tsx 编译与配置。以常见的框架 PReact 的虚拟 DOM + TSX 组合、snabbdom + TSX 组合不同的配置以及编译输出。

除了 TS 还可以渲染， babel 等编译器进行编译。

二、配置项目

配置选项描述示例配置
"jsx"指定 JSX 的处理方式"jsx": "react"
"jsxFactory"指定在 JSX 中使用的工厂函数"jsxFactory": "h"
"jsxFragmentFactory"指定在 JSX 中使用的碎片工厂函数"jsxFragmentFactory": "Fragment"
"jsxImportSource"指定从哪个模块导入 JSX 相关的符号"jsxImportSource": "react"
"reactNamespace"指定全局变量或模块的命名空间，用于 React"reactNamespace": "myReact"
"jsxMode"指定 JSX 模式，仅在 TypeScript 4.1+ 中可用"jsxMode": "react"

例如： Preact 提供了自己的渲染函数 h， 用来渲染组件，此时就对应着 jsxFactory 配置项。

三、配置文件和命令行的优先级问题

  • 命令行参数优先级高
  • 配置文件优先级低

例如： jsx 标识符在命令行中使用 --jsx react 会覆盖 jsx: react-jsx。

四、JSX 标识

1） 没有标识符

没有标识符时候，不支持编译 TSX/JSX 文件。

2）preserve 标识符

默认会将 TSX 文件装换成 JSX 文件, 其他的 JSX 结构没有改变

3）react/react-native 标识符

默认会使用 React.createElement 来创建元素，输出 js 文件，可以与 jsxFactory 工厂函数替换库中的函数

4）react-jsx/react-jsxdev

会使用相关 React 的 jsx-runtime 进行编译，也可以使用自定义 jsx-runtime 运行时。

五、PReact 虚拟dom 和 JSX

1） 写法一: 使用 preact 运行时

{
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
}

得到的编译结果是：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("preact/jsx-runtime");
function Card({ title, children }) {
    return ((0, jsx_runtime_1.jsxs)("div", { class: "card", children: [(0, jsx_runtime_1.jsx)("h1", { children: title }), children] }));
}

使用 preact 的 jsx 运行时。

2） 写法二： 使用 preact 提供的渲染函数 h 进行渲染

{
    "jsx": "react",
    "jsxFactory": "h",  
}

得到的编译结果是:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const preact_1 = require("preact");
function Card({ title, children }) {
    return ((0, preact_1.h)("div", { class: "card" },
        (0, preact_1.h)("h1", null, title),
        children));
}
;

使用 preact 的渲染函数 h。

六、snabbdom 与 @herp-inc/snabbdom-jsx

1）写法一：使用 jsx

{
    "jsx": "react-jsx",
    "jsxImportSource": "@herp-inc/snabbdom-jsx",
}

编译结果

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("@herp-inc/snabbdom-jsx/jsx-runtime");
// import { jsx } from '@herp-inc/snabbdom-jsx'
const EventComp = () => {
    return (0, jsx_runtime_1.jsx)("div", { children: "sdfdsfdd" });
};
exports.default = EventComp;

使用 jsx 的运行时

2） 写法: jsx 使用

{
    "jsx": "react", 
    "jsxFactory": "jsx",
    "jsxFragmentFactory": "Fragment", 
}

编译的结果：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const snabbdom_jsx_1 = require("@herp-inc/snabbdom-jsx");
const EventComp = () => {
    return (0, snabbdom_jsx_1.jsx)("div", null, "sdfdsfdd");
};
exports.default = EventComp;

使用@herp-inc/snabbdom-jsx内部实现的 jsx 函数。

七、snabbdom-jsx

没有运行时：snabbdom-jsx/jsx-runtime 所以不能使用 jsx 运行时编译

1）写法一

{
    "jsx": "react", 
    "jsxFactory": "html", 
}

组件写法以及编译后的写法

import { html } from 'snabbdom-jsx';
export const vnode = <div>Hello JSX</div>
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.vnode = void 0;
const snabbdom_jsx_1 = require("snabbdom-jsx");
exports.vnode = (0, snabbdom_jsx_1.html)("div", null, "Hello JSX");

是使用了 snabbdom-jsx 提供的 html函数，源码如下：

module.exports = {
  html: JSX(undefined),
  svg: JSX(SVGNS, 'attrs'),
  JSX: JSX
};

小结

本文的主要目的是讲解 TS 中编译配置和在不同的环境下编译不同的 JSX/TSX 文件，由于 React 的JSX 实现了 jsx-runtime，所以基本上都有两套编译路径。若不了解 TSX 编译，本文可以很好的说明。其次可以使用 babel 等其他的工具进行编译学习。Cycle.js 中使用 snabbdom 作为虚拟 dom, 可以使用 TSX 不优雅的虚拟 dom 的写法。

以上就是详解TypeScript编译TSX文件的方法的详细内容，更多关于TypeScript编译TSX文件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 解决js下referer兼容各大浏览器的方法

    解决js下referer兼容各大浏览器的方法

    众所周知，我们web开发人员痛恨IE浏览器，因为IE不支持标准，标准外的默认行为又和其他浏览器经常不一致，所以我们在做项目的时候，经常需要专门针对IE来做些文章，当然对于referer也不例外，今天我们就来看下如何让referer兼容主流浏览器
    2014-11-11
  • 得到元素真实的背景颜色的js代码

    得到元素真实的背景颜色的js代码

    这个函数来自Rico，Longbill及Dnew.cn修改。 说明: 传入参数一个，为元素的id值或元素本身，返回为元素的真实背景色值（字符串）。背景值均为16进制的值（原代码是是IE里面返回的是16进制的值，而Mozilla则是rgb值，Dnew.cn将其修改为均返回16进制的值）。
    2007-12-12
  • 微信小程序中使用ECharts 异步加载数据的方法

    微信小程序中使用ECharts 异步加载数据的方法

    这篇文章主要介绍了微信小程序中使用ECharts 异步加载数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • 浅谈JavaScript 数据属性和访问器属性

    浅谈JavaScript 数据属性和访问器属性

    下面小编就为大家带来一篇浅谈JavaScript 数据属性和访问器属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JS获取并处理php数组的方法实例分析

    JS获取并处理php数组的方法实例分析

    这篇文章主要介绍了JS获取并处理php数组的方法,结合实例形式分析了php针对数组的创建、转换以及js处理数组的接收、遍历、转换等相关操作技巧,需要的朋友可以参考下
    2018-09-09
  • JavaScript中自动插入分号的规则详解

    JavaScript中自动插入分号的规则详解

    JavaScript 提供了 automatic semicolon insertion (ASI)自动插入分号规则,在不加分号的情况下,会自动补充分号来分隔不同语句,下面我们就来具体了解一下这一规则吧
    2024-01-01
  • JavaScript中Blob的具体实现

    JavaScript中Blob的具体实现

    Blob常用于处理文件数据、图像数据、音频数据,本文主要介绍了JavaScript中URL和Blob的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • 深入浅出ES6新特性之函数默认参数和箭头函数

    深入浅出ES6新特性之函数默认参数和箭头函数

    这篇文章主要介绍了深入浅出ES6新特性之函数默认参数和箭头函数 的相关资料,需要的朋友可以参考下
    2016-08-08
  • JS控制图片等比例缩放的示例代码

    JS控制图片等比例缩放的示例代码

    本篇文章主要是对JS控制图片等比例缩放的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • Firebug入门指南(Firefox浏览器)

    Firebug入门指南(Firefox浏览器)

    据说，对于网页开发人员来说，Firebug是Firefox浏览器中最好的插件之一。
    2010-08-08

最新评论