本文整理自网络，侵删。
TypeScript JSX介绍
JSX是一种嵌入式的类似XML的语法。 它可以被转换成合法的JavaScript，尽管转换的语义是依据不同的实现而定的。 JSX因 React框架而流行，但是也被其它应用所使用。 TypeScript支持内嵌，类型检查和将JSX直接编译为JavaScript。
基本用法
想要使用JSX必须做两件事：
- 给文件一个
.tsx扩展名 - 启用
jsx选项
TypeScript具有两种JSX模式：preserve和react。 这些模式只在代码生成阶段起作用 - 类型检查并不受影响。 在 preserve模式下生成代码中会保留JSX以供后续的转换操作使用（比如：Babel）。 另外，输出文件会带有.jsx扩展名。 react模式会生成React.createElement，在使用前不需要再进行转换操作了，输出文件的扩展名为.js。
| 模式 | 输入 | 输出 | 输出文件扩展名 |
|---|---|---|---|
preserve | <div /> | <div /> | .jsx |
react | <div /> | React.createElement("div") | .js |
你可以通过在命令行里使用--jsx标记或tsconfig.json里的选项来指定模式。
注意：React标识符是写死的硬代码，所以你必须保证React（大写的R）是可用的。 Note: The identifierReact is hard-coded, so you must make React available with an uppercase R.
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 />，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 />; // 正确
<bar />; // 错误
在上例中，<foo />没有问题，但是<bar />会报错，因为它没在JSX.IntrinsicElements里指定。
注意：你也可以在JSX.IntrinsicElements上指定一个用来捕获所有字符串索引：
declare namespace JSX {
interface IntrinsicElements {
[elemName: string]: any;
}
}
基于值的元素
基于值的元素会简单的在它所在的作用域里按标识符查找。
import MyComponent from "./myComponent";
<MyComponent />; // 正确
<SomeOtherComponent />; // 错误
可以限制基于值的元素的类型。 然而，为了这么做我们需要引入两个新的术语： 元素类的类型和元素实例的类型。
现在有<Expr />，元素类的类型为Expr的类型。 所以在上面的例子里，如果 MyComponent是ES6的类，那么它的类类型就是这个类。 如果 MyComponent是个工厂函数，类类型为这个函数。
相关阅读 >>
简单对比，看看typescript中interface和type间的区别
更多相关阅读请进入《typescript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
