JSX

大多数语言都可以使用XML来创建UI，Typescript也不例外，这得益于React框架的兴起。

首先在tsconfig.json中配置 jsx为react

‘

意思是编译tsx中的xml时变成函数React.createElement

定义jsx命名空间下的接口

IntrinsicElements 定义了可以支持的节点名 有div 和 button，并且可以设置的属性是HtmlElementAttributes中定义的

ElementAttributesProperty定义了自定义类的xml节点上的属性由其props成员的类型决定

如下

<MyBox id=...  中的id是从MyBox类里的id决定的

上面这段xml被typescript编译成了

React.createElement("div", { id: "node" },

            React.createElement("div", { style: { background: 'red' } }, "one"),

            React.createElement("div", { style: { background: 'blue' } }, "two"),

            React.createElement(MyBox, { id: "box" },

                React.createElement("div", null,

                    React.createElement(MyButton, null, "aaa"),

                    React.createElement(MyButton, null, "bbb"))));

当然了 React.createElement在typescript 2.8中也可以替换 通过命令行参数 或者是 注释

注意 要是使用注释 注释需要加在页面首行 如下 将函数 React.createElement替换成 UI.create

/** @jsx UI.create */

参看

https://www.typescriptlang.org/docs/handbook/jsx.html

源码