【问题标题】：JSX in Typescript without React没有 React 的 Typescript 中的 JSX
【发布时间】：2017-02-24 07:54:10
【问题描述】：

我尝试在没有反应的情况下使用带有 jsx 的 typescript。它不起作用。我总是在 tsconfig.json 中放一个"jsx": "preserve"。但我不明白接下来我要做什么。当我编译 .tsx 文件时，webpack 会抛出错误

ERROR in ./core/Navbar.tsx Module parse failed: /home/ubuntu/Desktop/framework/node_modules/ts-loader/index.js!/home/ubuntu/Desktop/framework/core/Navbar.tsx Unexpected token (9:15)

You may need an appropriate loader to handle this file type. 我阅读了文档，但我不明白如何在项目中使用全局 jsx 模块。是否可以在没有反应的情况下使用 typescript + jsx？

我的 App.tsx 类

[

webpack 编译文件时出错

【问题讨论】：

这里我找到了React.createElement函数的简单实现：yetawf.com/BlogEntry/Title/…

标签： javascript reactjs typescript

【解决方案1】：

我刚做了这个，也许能帮上忙

index.tsx

export const JSX = {
  createElement(name: string, props: { [id: string]: string }, ...content: string[]) {
    props = props || {};
    const propsstr = Object.keys(props)
      .map(key => {
        const value = props[key];
        if (key === "className") return `class=${value}`;
        else return `${key}=${value}`;
      })
      .join(" ");
      return `<${name} ${propsstr}> ${content.join("")}</${name}>`;
  },
};

export default JSX;

external.d.ts

declare module JSX {
  type Element = string;
  interface IntrinsicElements {
    [elemName: string]: any;
  }
}

tsconfig.json

"jsx": "react",
"reactNamespace": "JSX",

测试一下

import JSX from "./index";

function Hello(name: string) {
    return (
        <div className="asd">
            Hello {name}
            <div> Hello Nested </div>
            <div> Hello Nested 2</div>
        </div>
    );
}

function log(html: string) {
    console.log(html);
}

log(Hello("World"));

【讨论】：

【解决方案2】：

如果你使用 jsx: prevserve，这意味着 Typescript 编译器将输出 .jsx 文件而不是将其编译成 .js，因此，你最终需要像 Babel 这样的东西来编译你的 jsx，因为你的浏览器可以' t 运行 jsx 文件。

说实话，我不确定您要做什么，但您应该使用 jsx: react 或 jsx: preserve + transpiler

【讨论】：

感谢您的回答。我明白）所以我需要在 tsx 编译到 jsx 之后将我的 jsx 转换为 jsx。但我该怎么做？我正在使用 webpack。我需要什么装载机？以及如何在 ts-loader 之后运行 jsx 转译器？
你能显示一个有效的 webpack 配置来编译 typscript + jsx 吗？
我想我必须链接加载器 ts-loader!babel 对吧？
是的，你需要链接加载器，但它会是 babel-loader！ts-loader，你希望 ts 编译器 r 的输出到 babel
如果你同时使用 babel-loader 和 ts-loader 那么你想要 JSX: preserve;没有反应

【解决方案3】：

看看 Stefan Baumgartners blog entry "JSX is syntactic sugar"。它解释了如何在运行时使用干净、易读的代码将 JSX 转换为 DOM 元素。

【讨论】：