TS的三种JSX模式
前言
前面我们已经讲了很多关于TS的知识了，包括基础的类型、接口、类型、泛型、枚举、类型推论和兼容性、模块和命名空间，以及模块解析和声明合并
今天聊的内容还是跟TS相关,TS中的三种JSX模式
正文
我们先从什么是JSX说起吧JSX其实就是JS的语法扩展，因React框架而声名大噪。在React中，通过JSX的方式编写的组件，然后通过预处理器 babel 解析，而后交给 React 渲染到指定父容器下，形成最终html页面，供浏览器解析和显示。
然而，JSX并不是React专属的东西TS支持内嵌，类型检查以及将JSX直接编译为JS
但TS中要使用JSX必须做两件事：
- 给文件一个
.tsx扩展名 - 启用
jsx选项
我们还是先聊聊今天的主题吧，TS的三种JSX模式
TS的三种JSX模式TS具有三种JSX模式：preserve，react和react-native
这些模式只在代码生成阶段起作用，类型检查并不受影响
preserve模式
在preserve模式下生成代码中会保留JSX以供后续的转换操作使用
输出文件会带有.jsx扩展名
react模式react模式会生成React.createElement，在使用前不需要再进行转换操作了
输出文件的扩展名为.js
react-native模式react-native相当于preserve，它也保留了所有的JSX，但是输出文件的扩展名是.js
指定模式
可以通过在命令行里使用--jsx标记或tsconfig.json里的选项来指定模式
注意
需要注意，因为TS也使用尖括号来表示类型断言，在结合JSX的语法后将带来解析上的困难。因此，TS在.tsx文件里禁用了使用尖括号的类型断言
可以改为使用as操作符，as操作符在.ts和.tsx里都可用，并且与尖括号类型断言行为是等价的
例如：
var foo = bar as foo;
