脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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文件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 微信小程序使用前置摄像头拍照

    微信小程序使用前置摄像头拍照

    这篇文章主要为大家详细介绍了微信小程序使用前置摄像头拍照，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • javascript中关于&& 和 || 表达式的小技巧分享

    javascript中关于&& 和 || 表达式的小技巧分享

    我将会介绍和解析12个简单但是强大的JavaScript技巧. 这些技巧所有的JavaScript程序员都可以马上使用, 你不需要成为JavaScript高手才能理解这些.下面我们开始本系列的第一篇文章，介绍下强大的&& 和 || 表达式
    2015-04-04
  • JavaScript 节点操作 以及DOMDocument属性和方法

    JavaScript 节点操作 以及DOMDocument属性和方法

    最近发现DOMDocument对象很重要,还有XMLHTTP也很重要 注意大小写一定不能弄错.
    2007-12-12
  • js实现文字截断功能

    js实现文字截断功能

    这篇文章主要为大家详细介绍了js代码如何实现文字截断功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • ES6新特性之解构、参数、模块和记号用法示例

    ES6新特性之解构、参数、模块和记号用法示例

    这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下
    2017-04-04
  • JS 日期与时间戮相互转化的简单实例

    JS 日期与时间戮相互转化的简单实例

    下面小编就为大家带来一篇JS 日期与时间戮相互转化的简单实例。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript实现图像循环明暗变化的方法

    javascript实现图像循环明暗变化的方法

    这篇文章主要介绍了javascript实现图像循环明暗变化的方法,实例分析了javascript操作css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 使用Vite从零搭建前端项目的详细过程

    使用Vite从零搭建前端项目的详细过程

    这篇文章主要介绍了使用Vite从零搭建前端项目的详细过程，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08
  • 微信小程序缓存支持二次开发封装实现解析

    微信小程序缓存支持二次开发封装实现解析

    这篇文章主要介绍了微信小程序缓存支持二次开发封装实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • JS+Vue实现三级全选单选

    JS+Vue实现三级全选单选

    这篇文章主要为大家详细介绍了JS+Vue实现三级全选单选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论