大多數(shù)語言都可以使用XML來創(chuàng)建UI滴某，Typescript也不例外墓拜，這得益于React框架的興起循帐。
首先在tsconfig.json中配置 jsx為react
意思是編譯tsx中的xml時變成函數(shù)React.createElement
定義jsx命名空間下的接口
IntrinsicElements 定義了可以支持的節(jié)點名 有div 和 button筝家，并且可以設(shè)置的屬性是HtmlElementAttributes中定義的
ElementAttributesProperty定義了自定義類的xml節(jié)點上的屬性由其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中也可以替換 通過命令行參數(shù) 或者是 注釋
注意 要是使用注釋 注釋需要加在頁面首行 如下 將函數(shù) React.createElement替換成 UI.create
/** @jsx UI.create */
參看
