介绍
JSX是一种可嵌入的类似XML的语法。 它旨在转换为有效的JavaScript，尽管该转换的语义是特定于实现的。 JSX在React框架中越来越受欢迎，但此后也看到了其他实现。 TypeScript支持嵌入，类型检查和直接编译JSX到JavaScript。
基本用法
要使用JSX，您必须做两件事。 1. 使用.tsx扩展名命名您的文件 2. 启用jsx选项
TypeScript附带三种JSX模式：preserve, react 和 react-native。 这些模式仅影响编译阶段 - 类型检查不受影响。 preserve模式将保持JSX作为输出的一部分，以便由另一个变换步骤（例如Babel）进一步编译。 此外，输出将具有.jsx文件扩展名。 react模式将编译React.createElement，在使用之前不需要经过JSX转换，输出将具有.js文件扩展名。 react-native模式相当于保留，因为它保留了所有JSX，但输出将具有.js文件扩展名。
| Mode | Input | Output | Output File Extension |
|---|---|---|---|
| preserve | .jsx | ||
| react | React.createElement(“div”) | .js | |
| react-native | .js |
您可以使用–jsx命令行标志或tsconfig.json文件中的相应选项指定此模式。
注意：标识符React是硬编码的，因此必须使用大写的R使React可用
as 操作符
回想一下如何写一个类型断言：
var foo = <foo>bar;
声明变量bar的类型为foo。 由于TypeScript还对类型断言使用尖括号，因此将其与JSX的语法结合会引入某些解析困难。 因此，TypeScript不允许.tsx文件中的尖括号类型断言。
由于上述语法不能在.tsx文件中使用，因此应使用备用类型断言运算符：as。 可以使用as运算符轻松重写该示例。
var foo = bar as foo;
as运算符在.ts和.tsx文件中均可用，并且行为与尖括号类型断言样式相同。
类型检查
为了理解使用JSX进行类型检查，您必须首先了解内部元素和基于值的元素之间的区别。 给定JSX表达式，expr可以引用环境固有的东西（例如DOM环境中的div或span）或者您创建的自定义组件。 这有两个重要原因：
对于React，内部元素以字符串形式发出(React.createElement(“div”))，而您创建的组件则不是(React.createElement(MyComponent))。
应该以不同的方式查找在JSX元素中传递的属性的类型。内在元素属性本质上应该是已知的，而组件可能想要指定它们自己的属性集。
TypeScript使用与React相同的约定来区分它们。内部元素始终以小写字母开头，而基于值的元素始终以大写字母开头。
内在元素 在特殊接口JSX.IntrinsicElements上查找内部元素。 默认情况下，如果未指定此接口，则会执行任何操作，并且不会对内部元素进行类型检查。 但是，如果存在此接口，则将内部元素的名称作为JSX.IntrinsicElements接口上的属性进行查找。 例如：
declare namespace JSX {
interface IntrinsicElements {
foo: any
}
}
<foo />; // ok
<bar />; // error
在上面的示例中，将正常工作，但将导致错误，因为它尚未在JSX.IntrinsicElements上指定。
注意：您还可以在JSX.IntrinsicElements上指定catch-all字符串索引器，如下所示：
declare namespace JSX {
interface IntrinsicElements {
[elemName: string]: any;
}
}
基于值的要素
基于值的元素只需通过范围内的标识符进行查找。
import MyComponent from "./myComponent";
<MyComponent />; // ok
<SomeOtherComponent />; // error
有两种方法可以定义基于值的元素：
- 无状态功能组件（SFC）
- 类组件
因为这两种类型的基于值的元素在JSX表达式中无法区分，所以首先TS尝试使用重载解析将表达式解析为无状态功能组件。 如果该过程成功，则TS完成将表达式解析为其声明。 如果该值无法解析为SFC，则TS将尝试将其解析为类组件。 如果失败，TS将报告错误。
无状态功能组件
顾名思义，该组件被定义为JavaScript函数，其第一个参数是props对象。 TS强制其返回类型必须可分配给JSX.Element。
interface FooProp {
name: string;
X: number;
Y: number;
}
declare function AnotherComponent(prop: {name: string});
function ComponentFoo(prop: FooProp) {
return <AnotherComponent name={prop.name} />;
}
const Button = (prop: {value: string}, context: { color: string }) => <button>
因为SFC只是一个JavaScript函数，所以这里也可以使用函数重载：
interface ClickableProps {
children: JSX.Element[] | JSX.Element
}
interface HomeProps extends ClickableProps {
home: JSX.Element;
}
interface SideProps extends ClickableProps {
side: JSX.Element | string;
}
function MainButton(prop: HomeProps): JSX.Element;
function MainButton(prop: SideProps): JSX.Element {
...
}
类组件
可以定义类组件的类型。 但是，要这样做，最好理解两个新术语：元素类类型和元素实例类型。
给定，元素类类型是Expr的类型。 因此，在上面的示例中，如果MyComponent是ES6类，则类类型将是该类的构造函数和静态。 如果MyComponent是工厂函数，则类类型将是该函数。
一旦建立了类类型，实例类型就由类类型构造的返回类型或调用签名（无论哪个存在）的并集决定。 同样，在ES6类的情况下，实例类型将是该类的实例的类型，并且在工厂函数的情况下，它将是从函数返回的值的类型。
class MyComponent {
render() {}
}
// use a construct signature
var myComponent = new MyComponent();
// element class type => MyComponent
// element instance type => { render: () => void }
function MyFactoryFunction() {
return {
render: () => {
}
}
}
// use a call signature
var myComponent = MyFactoryFunction();
// element class type => FactoryFunction
// element instance type => { render: () => void }
元素实例类型很有趣，因为它必须可以赋值给JSX.ElementClass，否则会导致错误。 默认情况下，JSX.ElementClass是{}，但可以对其进行扩充，以将JSX的使用仅限于那些符合正确接口的类型。
declare namespace JSX {
interface ElementClass {
render: any;
}
}
class MyComponent {
render() {}
}
function MyFactoryFunction() {
return { render: () => {} }
}
<MyComponent />; // ok
<MyFactoryFunction />; // ok
class NotAValidComponent {}
function NotAValidFactoryFunction() {
return {};
}
<NotAValidComponent />; // error
<NotAValidFactoryFunction />; // error
