非 React JSX

TypeScript 使你能够以类型安全的方式使用在 React 中使用 JSX 之外的其他方式，以下列出了一些可自定义点，但是请注意，这些适用于 UI 框架的作者：

  • 你可以 "jsx": "preserve" 选项来禁用 react 样式触发，这意味着，JSX 将按原样触发，然后你可以使用自定义转化器来转化 JSX 部分；
  • 使用 JSX 全局模块：
    • 你可以通过定制 JSX.IntrinsicElements 的接口成员来控制哪些 HTML 标签是可取的，以及如何对其进行类型检查；
    • 当你在组件中使用：
      • 你可以通过自定义默认的 interface ElementClass extends React.Component<any, any> { } 声明文件来控制哪个 class 必须由组件继承；
      • 你可以通过自定义 declare module JSX { interface ElementAttributesProperty { props: {} } } 声明文件来控制使用的哪个属性（property）来检查特性（attribute）（默认是 props）。

jsxFactory

通过 —jsxFactory <JSX factory Name> 与 —jsx react，能让你不同于默认 React 的方式使用 JSX 工厂函数。

这个新的工厂函数名字习惯被称之为 createElement 函数。

例子

  1. import { jsxFactory } from 'jsxFactory';
  3. const div = <div>Hello JSX!</div>;

使用编译：

  1. tsc --jsx react --reactNamespace jsxFactory --m commonJS

编译结果：

  1. 'use strict';
  2. var jsxFactory_1 = require('jsxFactory');
  3. var div = jsxFactory_1.jsxFactory.createElement('div', null, 'Hello JSX!');

jsx 编译提示

你甚至可以使用jsxPragma 为每个文件指定不同的 jsxFactory：

  1. /** @jsx jsxFactory */
  2. import { jsxFactory } from 'jsxFactory';
  4. var div = <div>Hello JSX!</div>;

在 jsx 编译提示中，配合 —jsx react 命令，这个文件将会被触发使用工厂函数：

  1. 'use strict';
  2. var jsxFactory_1 = require('jsxFactory');
  3. var div = jsxFactory_1.jsxFactory.createElement('div', null, 'Hello JSX!');

原文: https://jkchao.github.io/typescript-book-chinese/jsx/nonReactJSX.html