1.TypeScript概述
1.TypeScript是什么
TypeScript是JavaScript的超集（JS有的TS都有），为JS添加了类型系统
2.TypeScript相比JS的优势
JS的类型系统存在缺陷，绝大部分错误都是类型错误（Uncaught TypeError）
优势一：类型化思维方式，是的开发更加严谨，提前发现错误，减少改Bug时间
优势二：类型系统提高了代码的可读性，并使维护和重构代码更加容易
优势三：补充了接口、枚举等开发大型应用时JS缺失的功能
Vue3源码使用TS重写
Angular默认支持TS；React与TS完美配合，是很多大型项目的首选
2.开发工具
1.Node.js
2.VSCode
3.解析TS的工具包（TSC）
Node.js/浏览器，只认识JS代码，不认识TS代码，需要将TS代码转换为JS
npm i -g typescript
3.第一个TS文件
1.创建第一个ts文件
步骤
创建ts文件 —》写代码 —》 执行代码
1.创建 hello.ts
console.log('hello ts')
2.编译ts代码
打开终端，输入命令
tsc hello.ts
生成同名的js文件
3.运行js代码
打开终端，执行命令
node hello.js
2.简化执行ts的步骤
每次修改代码后，都要重复执行两个命令才能执行TS代码，太繁琐
简化方式：使用ts-node包，直接在Node.js中执行TS代码
npm i -g ts-node
使用方式：ts-node hello.ts
4.注释和输出语句
注释是对代码的解释说明，用来帮助阅读和理解代码
单行注释 // 内容
多行注释 /*内容*/
输出语句：在终端中打印信息
Node.js会执行代码，为了能够知道代码执行的结果，就需要使用输出语句，将结果打印出来
5.变量和数据类型
变量是用来存储数据的容器，并且是可以变化的
1.变量的使用
变量是使用分为两步：
1.声明变量
let age:number
let是ts的关键字，用来声明变量，age是定义的变量名称，：number用来指定变量的类型
2.给变量赋值
age = 18
简化:声明变量的同时就赋值
let age: number = 18
注意：一定要在变量声明的时候指定类型
2.类型注解
类型注解：为变量添加类型约束的形式
约定了什么类型，就只能给变量赋什么类型的值
3.变量的命名规则和规范
变量名称只能出现：数字、字母、下划线_、美元符号$，并且不能以数字开头
let $name
let f_s
变量名称要有意义，顾名思义，推荐使用驼峰命名法
案例：交换两个变量的值
let num1: number = 12
let num2: number = 20
let temp: number
temp = num1
num1 = num2
num2 = temp
console.log(num1, num2)
5.数据类型
TypeScript中的数据类型分为两大类：1.原始类型（基本数据类型） 2.对象类型（复杂数据类型）
常用的基本数据类型： number/string/boolean/undefined/null
数字类型(number)：包含整数值和浮点型（小数）
let age: number = 18
let weight: number = 11.1
字符串类型(string)：由零个或多个字符串联而成，用来表示文本信息
let uname: string = 'zhangsan'
布尔类型（boolean): 用来表示真或假
let isShow: boolean = true
undefined、null:只有一个值，值为类型本身
let isUndefined: undefined = undefined
let isNull: null = null
undefined: 表示声明但未赋值的变量值（找不到值）
null：表示声明了变量并且已经赋值，值为null
这些类型的值，也叫做字面量，也就是从字面上就能看出来它是什么
6.运算符
运算符也称为操作符，用来实现赋值、算术运算、比较等功能的符号
1.算数运算符：加（+）、减（-）、乘（*）、除（/）
+号不仅可以用于加法计算，还能实现字符串拼接
在ts语法中，除加号以外，其他算数运算符之应该跟数字类型一起使用
其他方式：将字符串类型转换为数字类型
console.log(1 - '1') // 报错
console.log(1 - +'1') // 0
+'1’可以表示将 ‘1’(string) => 1(number)
字符串前面添加+号，可以将string转化为number（字符串内容为数字时才有意义）
2.赋值运算符
将符号右边的值赋值给它左边的变量（=）
let age = 1
age = age + 1
console.log(age) // 2
出了等号（=）之外，还包括： 加等(+=)、减等(-=)、乘等(*=)、除等(/=)
age += 1
3.自增、自减运算符
自增（++）运算符是 += 1的简化形式，自减 （–）是-= 1的简化形式
let age = 1
age ++
console.log(age) // 2
age --
console.log(age) // 1
4.比较运算符
用于比较两个数据的值，并返回比较的结果，为布尔类型
大于（>） 大于等于(>=) 小于(<) 小于等于(<=) 等于(=) 不等于(!)
let num1 = 3
let num2 = 4
console.log( num1 > num2) // false
5.逻辑运算符
与（并且）、或（或者）、非（不是）
逻辑运算符通常用于布尔类型的计算，并且结果也是布尔类型
逻辑与（&&）两边同时为true，结果采薇true，否则为false
true && false // false
逻辑或（||）当两边的值只要有一个为true，结果就为true，否则为false
true && false // true
非（!）,表示取反，即ture->false false-> true
!true // false
7.语句
1.条件语句（分支语句）
根据判断条件的结果（真或假），来执行不同的代码，从而实现不同的功能
条件执行时，首先判断条件是否满足，如果条件满足，就做某件事，如果不满足，就做另一件事，即不同的情况执行不同的分支
if语句
在TypeScript中if语句就是实现条件判断的
if(判断条件) {
条件满足时要做的事情
}
判断条件：布尔类型（ture或者false）
let isShow: boolean = true
if(isShow) {
console.log('show')
}
else语句
在TypeScript中else语句必须配合if语句来使用
else语句表示：条件不满足，要做的事情
if(判断条件) {
}else {
条件不满足，要做的事情
}
let isShow: boolean = false
if(isShow) {
console.log('show')
} else {
console.log('is not show')
}
2.三元运算符
根据判断条件的真假，得到不同的结果
结果 = 判断条件 ？ 值1 : 值2
如果判断结果为真，值为1，如果判断条件为假，值为2
let num1: number = 10
let num2: number = 20
let isMoreThen: string = num1 > num2 ? '大于' : '小于'
console.log(isMoreThen) // 小于
3.循环语句
在TypeScript中，要实现重复做某些事情，要用到循环
for循环
组成：
1.初始化语句：声明计数器变量用来记录循环次数（执行一次）
2.判断条件：判断循环次数是否达到目标次数
3.计数器更新：完成一次循环让计数器数量加1
4.循环体：循环的代码，也就是要重复做的事情
for(初始化语句；判断条件；计数器更新) {
循环体
}
for (let i:number = 0;i<=3;i++) {
console.log(i)
}
执行过程: 初始化计数器（只执行一次），判断条件，循环代码，计数器更新，条件不满足，跳出循环
break和continue
break和continue常用在循环语句中，用来改变循环的执行过程
for想你换执行的特点是：连续且不间断
break能够让循环提前结束（终止循环）
for (let i:number = 0;i<=5;i++) {
if(i === 2) {
break
}
console.log(i) // 0, 1
}
continue能够让循环间断执行（跳过本次循环，继续下一次循环）
for (let i:number = 0;i<=5;i++) {
if(i === 2) {
continue
}
console.log(i) // 0, 1, 3, 4, 5
}
4.断点调试
Vs-Code断点调试配置
1.准备要调试的ts文件
2.添加调试配置
打开调试窗口：点击左侧活动栏Debug
生成默认配置:点击DEBUG后面的下拉框，选择添加配置
修改配置内容如下
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "调试ts代码",
// ts-node命令：直接运行ts代码
// 作用 调试时加载ts-node包（在调试时直接运行ts代码）
"runtimerArgs": ["-r", "ts-node/register"],
"args": ["${workspaceFolder}/a.ts"]
}
]
}
3.安装调试用到的包
npm i ts-node typescript
