TS是什么？
- TS是一门以JS为基础构建的语言
- TS是一个JS的超集
- TS可以在任何支持JS的平台中执行
- TS扩展了JS，并添加了类型定义
- TS不能被JS解析器直接执行，就是说TS的代码不能在浏览器运行，想要浏览器认识这份代码，就需要安装一个TS的编译器，该编译器可以将TS代码编译转换成浏览器认识的JS
TS增加了什么？
- TS中增加了类型定义
为什么这么说呢？学过JS的都知道，JS原本不就有Number、String、Array、Object、Boolean这些类型，为什么TS也会有一个类型定义？这2者不是一样的吗？
下面这张图就很容帮我理解区分JS和TS的类型定义：
从上图可以知道，JS其实定义的仅仅只是赋值类型，并没有定义变量的类型，而变量的类型既然而然地就需要有TS来定义啦！
那么，现在就很清晰地知道JS中的类型和TS中的类型究竟针对谁了，便是各司其职罢了，赋值定义类型交给JS，变量定义类型交给TS。
此外，TS也增加JS原来没有的类型，例如元组（Tuple），抽象类，枚举，接口(interface)
TS支持ES的新特性
TS中添加了ES不具备的新特性
例如抽象类，接口，装饰器
- TS提供了丰富的配置选项
一份TS代码可以编译成任意版本的JS代码，解决了浏览器的兼容性问题。
- TS提供了强大的开发工具
代码报错提示
JS的缺点，为什么要学习TS
let a = 10
a = 'book'
a = true
a = []
function(a,b){
console.log(a,b)
}
从上面一个demo可以看出，a变量没有进行类型规范，所以导致了这个a变量在js中是动态类型，也就是说a变量是根据赋值来决定自身的，它可以是Number类型、String类、Array类、Boolean类等
换句话说，你给a变量赋值什么类，a就是什么类型，这就是JS的缺陷,而这种缺陷在函数传参中最为明显，而TS的出现就是弥补了JS的缺陷.
在TS比如我指定a变量是一个Number型，那就不能给a变量赋值一个字符串，因为在TS语法中已经定义了a变量属于什么类型。
安装TypeScript
- cmd窗口使用npm安装
npm install -g typescript
- 检测是否安装成功
tsc -V
TS语法使用注意事项
-
文件后缀名为.ts
- ts的文件中如果直接书写js语法的代码，那么在html文件中直接引入ts文件，在谷歌浏览器中是可以直接使用的。
- 如果ts文件中有了ts的语法代码，那么就需要把这个ts文件编译成js文件，在html文件中引入js文件来使用。
- ts文件中的变量使用let进行修饰，编译的js文件中的修饰符就变成var了。
- ts文件中函数中的形参，如果使用了某个类型进行修饰，最终在编译的js文件中是没有这个类型的。
- ts文件编译成js文件:运行 tsc 文件名.ts
demo.ts手动编译成demo.js
html引入使用
ts在vscode中自动编译
-
准备一个项目文件夹
- 终端运行 tsc --init ，生成一个tsconfig.json文件
tsc --init
- 修改tsconfig.js配置
修改输出的编译目录：把ts文件最终编译成js文件放置在./js目录下(outDir默认是被注掉的，需要去掉注释)
"outDir": "./js",
关闭严格模式
"strict": false,
-
终端监视
选中tsconfig.json文件，点击终端，运行任务
点击显示所有任务
选择ts监视
自动编译完成
html引入./js目录下生成的.js文件
类型注解
-
为函数或者变量添加约束
-
智能错误信息提示（当鼠标浮动在红色波浪线时显示）
ts 接口约束
-
接口通过interface关键字定义，是一种约束能力。
TS中类的书写
(()=>{
//定义一个接口
interface IPerson{
firstName: string //姓
lastName: string //名
}
//定义一个class类
class Person {
//定义公共的字段（属性）
firstName: string //姓
lastName: string //名
fullName: string //姓名
//定义一个构造器函数
constructor(firstName: string,lastName: string){
//更新属性数据
this.firstName = firstName
this.lastName = lastName
}
}
//定义函数
function showFullName(person:IPerson) {
return person.firstName + '' + person.lastName
}
//实例化对象
const person = new Person('宋','小画')
console.log();
})()
自动编译成的js
