1.ts的前言、安装及编译

• typescript是javascript的一个超集（超集简单来说就是typescript中包含了javascript的所有的能力，且包含了javascript中没有的功能，因此它是javascript的一个超集，javascript是typescript的一个子集）

对比javascript的优势

• typescript相当于就是javascript的一个语法糖，最贴切的例子就是相当于css的less和sass,我们知道less和sass是具备了很多css没有的功能，比如定义函数、定义混合宏，让编写看起来嵌套更明确、更规范、维护起来更加得心应手和高效，其实typescript本质上也是如此，只是操作对象变为了javascript
• 个人理解typescript相当于把javascript变相的实现成了一门强类型语言，使定义和操作javascript的行为更加规范和有迹可循，我们都知道javascript中定义的变量除了ES6中的const外，赋予的值可以是任意类型，这就给我们维护带来很多不便，因为你可能不经意的改变了一个值的类型或者一个不当的操作而导致其他重大失误的发生，你仅仅是为了维护你当前的业务，但是可能这个值在其他人那里也用到，但是javascript却不会给你任何提示
• ts语法更加的规范，所有的操作包括变量的定义，都会在初始化的那一刻规定，这会为你在开发过程中省去很多类型判断

缺点

• 如果说增加了学习成本，那么它的确是一个缺点，因为它的确是
• 对于短期内开发来说，会增加开发成本，因为很多类型都需要去约束，但是长期来说，它减少了维护成本，因为你typescrip的约束性，让你可以大展拳脚，并且不用小心翼翼的怕弄坏其他的功能，至少把这种可能性降低了
• 集成到构建工具需要一定的工作量，tsconfig.json是一个不可忽视的文件
• 对于一个库可能结合的不是那么完美

全局安装Ts

npm install typescript -g

image.png

新建index.ts文件

image.png

执行index.ts文件

image.png

编译

tsc index.ts 如果语法出现错误，编译过程中，ts会提示错误信息，但是js文件依然会被编译，想要阻止编译，需要在tsconfig.json中进行配置

image.png

如果报错进制运行脚本

image.png

生成tsconfig.json是必要的，这个可以配置编译生产的语法，生成tsconfig.json需要打开终端输入tsc init即可
配置输出文件目录

image.png

自动编译，打开编辑器，菜单栏点击终端 -> 运行任务 -> 监视tsconfig.json就可以完成自动编译

image.png

自动编译生成index.js的文件，直接引入html文件即可

image.png

编译后的JS文件

image.png