Лучший способ конвертировать только JSX в TSX и поддерживать TS

Question

У меня есть несколько компонентов TSX, написанных на Inferno (аналогично React / Preact).Мне нужны только версии .ts с преобразованными аспектами JSX.Среда, в которой я его использую, поддерживает только 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 }
    ]
  ]
}

Я включаю @babel/typescript в файл rc, потому что он должен бытьумеет читать TS, не жалуясь на синтаксис.Однако выходные данные следует сохранить.

Если это не лучший подход, можете ли вы предложить более эффективный способ преобразования этого?пс.Я не могу использовать трансформатор 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"
    ]
}

Answer 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);