js，jsx，ts，tsx区别

目录

JS和TS

类型

TS=JS+强类型

编译

TS-Babel->JS

JS可直接在TS中使用

JS 和 JSX

编译

JSX-webpack->JS

使用

js=jsx

TS 和 TSX

使用

tsx=ts+jsx

应用

JS文件添加类型信息：TS文件

React+类型检查：TSX

JS和TS

类型

TS=JS+强类型

• TypeScript 是纯面向对象的编程语言，包含类和接口的概念。
• JavaScript弱类型语言，动态类型

类型强弱是针对类型转换是否显示来区分，

静态和动态类型是针对类型检查的时机来区分。

• 在JS中只有变量声明空间，比如let a = 123。但在TS中还存在类型声明空间，可通过类型注解结合这两个空间

可以通过type关键字来定义类型声明空间，type在TS中叫做类型别名。为了能够更好的区分两个空间，所以人为规定类型空间定义的名字首字母要大写，例如：type A = number

编译

TS-Babel->JS

JS可直接在TS中使用

TypeScript是JavaScript  的超集，可以被编译成JS。用JS编写的代码，在TS中依然有效。

JS 和 JSX

编译

JSX-webpack->JS

JavaScript 是一种直译式脚本语言

JavaScript XML 是React组件内部构建标签的类XML语法。

可以理解为React提供的语法糖，可以让编译器更方便快速的选择编译方式。

JavaScript 是能够被浏览器直接识别的，

JavaScript XML需要经过编译器（webpack等）转换成 JavaScript

使用

js=jsx

两者没有什么区别， .js 的语法和 .jsx 的后缀可以互换，语法上也完全兼容

Facebook的团队建议（也就是React的创造者），统一使用 .js 即可，无需特意区分。

TS 和 TSX

使用

tsx=ts+jsx

• TSX=TS+JSX，从而提供更好地对React组件的类型检查。
• 使用TSX文件时，我们需要先定义特定的接口或类型，然后使用这些接口或类型来表示React组件props和状态的类型。
• .ts 的文件，内容上不支持 <div> 这种HTML语法，会报错的，而且VS Code这类代码编辑器也不会提供相关代码提示和补全的功能。

应用

JS文件添加类型信息：TS文件

React+类型检查：TSX