TypeScript(1)

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