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

您可能感兴趣的文章:

相关文章

  • javascript的事件触发器介绍的实现

    javascript的事件触发器介绍的实现

    这篇文章主要介绍了javascript的事件触发器介绍的实现,本文所指触发器是用程序来触发绑定的事件,而不是人为的去触发,需要的朋友可以参考下
    2014-06-06
  • js canvas实现俄罗斯方块

    js canvas实现俄罗斯方块

    这篇文章主要为大家详细介绍了js canvas实现俄罗斯方块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • layui--select使用以及下拉框实现键盘选择的例子

    layui--select使用以及下拉框实现键盘选择的例子

    今天小编就为大家分享一篇layui--select使用以及下拉框实现键盘选择的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript事件类型中UI事件详解

    JavaScript事件类型中UI事件详解

    这篇文章主要介绍了JavaScript事件类型中UI事件详解的相关资料,需要的朋友可以参考下
    2016-01-01
  • Summernote实现图片上传功能的简单方法

    Summernote实现图片上传功能的简单方法

    下面小编就为大家带来一篇Summernote实现图片上传功能的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript jscroll模拟html元素滚动条

    javascript jscroll模拟html元素滚动条

    这里是自己在工作不太忙的时候写出来了一个用户可以自定义的滚动条jscroll，以下简称jscroll。jscroll默认只提供一种滚动条样式，部分样式来自google webstore ，其中有部分css3样式主要用于实现圆角，阴影效果
    2012-12-12
  • 论JavaScript模块化编程

    论JavaScript模块化编程

    这篇文章主要介绍了论JavaScript模块化编程，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 微信小程序实现选择内容显示对应内容

    微信小程序实现选择内容显示对应内容

    这篇文章主要为大家详细介绍了微信小程序实现选择内容显示对应内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js编写当天简单日历效果【实现代码】

    js编写当天简单日历效果【实现代码】

    下面小编就为大家带来一篇js编写当天简单日历效果【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
    2016-05-05
  • 拥抱模块化的JavaScript

    拥抱模块化的JavaScript

    模块化JavaScript的概念尤为强烈，似乎有赶超07年Ajax风潮之趋势
    2012-03-03

最新评论