在TSX中仅转换JSX并维护TS的最佳方法

问题描述 投票:0回答:1

我有一堆用Inferno编写的TSX组件(类似于React / Preact)。我需要转换JSX方面的.ts版本。我正在使用它的环境仅支持TypeScript,而Inferno JSX转换器仅为Babel编写。我相信我可以用Babel做到这一点,但不确定要添加哪些标志。

这是我的脚本的一个例子:


import { Component, linkEvent } from 'inferno';

import './index.scss';

interface HeaderProps {
  name: string,
  address: string
}

export default class Header extends Component {

  render(props:HeaderProps) {
    return (
      <header class="wrap">
        <img class="logo" src="logo.svg" />
        <h1>{ props.name }</h1>
        <img src="arrow.svg" />
      </header>
    );
  }
}

编译此脚本后,任何TS(如接口)应保留,但JSX应转换为createVNode()函数。这样做的babel插件是:https://github.com/infernojs/babel-plugin-inferno

这是我目前的.babelrc:

{
  "compact": false,
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "targets": {
          "browsers": ["ie >= 11", "safari > 10"]
        }
      }
    ],
    [
      "@babel/typescript",
      { "isTSX": true, "allExtensions": true }
    ]
  ],
  "plugins": [
    ["babel-plugin-inferno",
    { "imports": true }],
    "@babel/plugin-transform-runtime",
    [
      "@babel/plugin-proposal-class-properties",
      { "loose": true }
    ]
  ]
}

我在rc文件中包含@babel/typescript,因为它需要能够在不抱怨语法的情况下读取TS。但是,应保留输出。

如果这不是最好的方法,你能否就更有效的转换方式提出建议? PS。我不能使用TS JSX变换器,它与Inferno不兼容。

这是我的tsconfig:

{
    "compilerOptions": {
        "pretty": true,
        "target": "es5",
        "module": "esnext",
        "allowSyntheticDefaultImports": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "moduleResolution": "node",
        "lib": ["es2017", "dom"],
        "types": [
            "inferno"
        ],
        "jsx": "preserve",
        "noUnusedLocals": true,
        "baseUrl": "./src",
        "noEmit": true,
        "skipLibCheck": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
    },
    "include": [
        "src/**/*",
        "node_modules/inferno/dist/index.d.ts"
    ]
}
typescript babeljs infernojs
1个回答
1
投票

这是你需要的.babelrc

{
  "plugins": [
    ["babel-plugin-inferno", { "imports": true }],
    ["@babel/plugin-syntax-typescript", { "isTSX": true }],
  ]
}

注意,不要使用tsc,仅使用babel。

展开以查看测试结果:

// ============== input ==============
const x: number  = 1;
enum Enum { one, two }
interface Foobar { key: string; }

const bar = () => <div>bar</div>
const zoo = () => <><span>yolo</span></>


// ============== output ==============
import { createVNode, createFragment } from "inferno";
const x: number = 1;
enum Enum {
  one,
  two,
}
interface Foobar {
  key: string;
}

const bar = () => createVNode(1, "div", null, "bar", 16);

const zoo = () => createFragment([createVNode(1, "span", null, "yolo", 16)], 4);
© www.soinside.com 2019 - 2024. All rights reserved.