11-29 11:06 阅读 453

TS的三种JSX模式(js与ts的区别)

前言

前面我们已经讲了很多关于TS的知识了，包括基础的类型、接口、类型、泛型、枚举、类型推论和兼容性、模块和命名空间，以及模块解析和声明合并

今天聊的内容还是跟TS相关,TS中的三种JSX模式

我们先从什么是JSX说起吧

JSX其实就是JS的语法扩展，因React框架而声名大噪。在React中，通过JSX的方式编写的组件，然后通过预处理器 babel 解析，而后交给 React 渲染到指定父容器下，形成最终html页面，供浏览器解析和显示。

然而，JSX并不是React专属的东西

TS支持内嵌，类型检查以及将JSX直接编译为JS

但TS中要使用JSX必须做两件事：

我们还是先聊聊今天的主题吧，TS的三种JSX模式

TS具有三种JSX模式：preserve，react和react-native

这些模式只在代码生成阶段起作用，类型检查并不受影响

在preserve模式下生成代码中会保留JSX以供后续的转换操作使用

输出文件会带有.jsx扩展名

react模式会生成React.createElement，在使用前不需要再进行转换操作了

输出文件的扩展名为.js

react-native相当于preserve，它也保留了所有的JSX，但是输出文件的扩展名是.js

可以通过在命令行里使用--jsx标记或tsconfig.json里的选项来指定模式

需要注意，因为TS也使用尖括号来表示类型断言，在结合JSX的语法后将带来解析上的困难。因此，TS在.tsx文件里禁用了使用尖括号的类型断言

可以改为使用as操作符，as操作符在.ts和.tsx里都可用，并且与尖括号类型断言行为是等价的

例如：

var foo = bar as foo; 复制代码

以上就是本文的所有内容，如有问题，欢迎指正~

作者：LBJ
链接：https://juejin.cn/post/7035621646341767199

伪原创工具 SEO网站优化 https://www.237it.com/