JSX是一种嵌入式的类似XML的语法。 它可以被转换成合法的JavaScript，尽管转换的语义是依据不同的实现而定的。 JSX因React框架而流行，但是也被其它应用所使用。 TypeScript支持内嵌，类型检查和将JSX直接编译为JavaScript。
想要使用JSX必须做两件事：
- 给文件一个扩展名
- 启用选项
TypeScript具有三种JSX模式：，和。 这些模式只在代码生成阶段起作用 - 类型检查并不受影响。 在模式下生成代码中会保留JSX以供后续的转换操作使用（比如：Babel）。 另外，输出文件会带有扩展名。 模式会生成，在使用前不需要再进行转换操作了，输出文件的扩展名为。 相当于，它也保留了所有的JSX，但是输出文件的扩展名是。
你可以通过在命令行里使用标记或tsconfig.json里的选项来指定模式。
注意：标识符是写死的硬编码，所以你必须保证React（大写的R）是可用的。
回想一下怎么写类型断言：
这里我们断言变量是类型的。 因为TypeScript也使用尖括号来表示类型断言，JSX的语法带来了解析的困难。因此，TypeScript在文件里禁用了使用尖括号的类型断言。
为了弥补里的这个功能，新加入了一个类型断言符号：。 上面的例子可以很容易地使用操作符改写：
操作符在和里都可用，并且与其它类型断言行为是等价的。
为了理解JSX的类型检查，你必须首先理解固有元素与基于值的元素之间的区别。 假设有这样一个JSX表达式，可能引用环境自带的某些东西（比如，在DOM环境里的或）或者是你自定义的组件。 这是非常重要的，原因有如下两点：
- 对于React，固有元素会生成字符串（），然而由你自定义的组件却不会生成（）。
- 传入JSX元素里的属性类型的查找方式不同。 固有元素属性本身就支持，然而自定义的组件会自己去指定它们具有哪个属性。
TypeScript使用与React相同的规范 来区别它们。 固有元素总是以一个小写字母开头，基于值的元素总是以一个大写字母开头。
固有元素使用特殊的接口来查找。 默认地，如果这个接口没有指定，会全部通过，不对固有元素进行类型检查。 然而，如果这个接口存在，那么固有元素的名字需要在接口的属性里查找。 例如：
在上例中，没有问题，但是会报错，因为它没在里指定。
注意：你也可以在上指定一个用来捕获所有字符串索引：
基于值的元素会简单的在它所在的作用域里按标识符查找。
有两种方式可以定义基于值的元素：
- 无状态函数组件 (SFC)
- 类组件
由于这两种基于值的元素在JSX表达式里无法区分，因此我们首先会尝试将表达式做为无状态函数组件进行解析。如果解析成功，那么我们就完成了表达式到其声明的解析操作。如果按照无状态函数组件解析失败，那么我们会继续尝试以类组件的形式进行解析。如果依旧失败，那么将输出一个错误。
正如其名，组件被定义成JavaScript函数，它的第一个参数是对象。 我们强制它的返回值可以赋值给。
由于无状态函数组件是简单的JavaScript函数，所以我们还可以利用函数重载。
我们可以限制类组件的类型。 然而，为了这么做我们需要引入两个新的术语：元素类的类型和元素实例的类型。
现在有，元素类的类型为的类型。 所以在上面的例子里，如果是ES6的类，那么它的类类型就是这个类。 如果是个工厂函数，类类型为这个函数。
一旦建立起了类类型，实例类型就确定了，为类类型调用签名的返回值与构造签名的联合类型。 再次说明，在ES6类的情况下，实例类型为这个类的实例的类型，并且如果是工厂函数，实例类型为这个函数返回值类型。
元素的实例类型很有趣，因为它必须赋值给或抛出一个错误。 默认的为，但是它可以被扩展用来限制JSX的类型以符合相应的接口。
属性类型检查的第一步是确定元素属性类型。 这在固有元素和基于值的元素之间稍有不同。
对于固有元素，这是属性的类型。
对于基于值的元素，就稍微复杂些。 它取决于先前确定的在元素实例类型上的某个属性的类型。 至于该使用哪个属性来确定类型取决于。 它应该使用单一的属性来定义。 这个属性名之后会被使用。
元素属性类型用于的JSX里进行属性的类型检查。 支持可选属性和必须属性。
注意：如果一个属性名不是个合法的JS标识符（像属性），并且它没出现在元素属性类型里时不会当做一个错误。
延展操作符也可以使用：
从TypeScript 2.3开始，我们引入了children类型检查。children是元素属性(attribute)类型的一个属性(property)。 与使用来决定props名类似，我们可以利用来决定children名。 应该被声明在单一的属性(property)里。
如不特殊指定子孙的类型，我们将使用React typings里的默认类型。
你也可以像其它属性一样指定children的类型。下面我们重写React typings里的默认类型。
默认地JSX表达式结果的类型为。 你可以自定义这个类型，通过指定接口。 然而，不能够从接口里检索元素，属性或JSX的子元素的类型信息。 它是一个黑盒。
JSX允许你使用标签来内嵌表达式。
上面的代码产生一个错误，因为你不能用数字来除以一个字符串。 输出如下，若你使用了选项：
要想一起使用JSX和React，你应该使用React类型定义。 这些类型声明定义了合适命名空间来使用React。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/5511.html