TS的三种JSX模式

·  阅读 2705
TS的三种JSX模式

「这是我参与11月更文挑战的第26天,活动详情查看:2021最后一次更文挑战

前言

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

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

正文

我们先从什么是JSX说起吧

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

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

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

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

  1. 给文件一个.tsx扩展名
  2. 启用jsx选项

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

TS的三种JSX模式

TS具有三种JSX模式:preservereactreact-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;
复制代码

END

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