TyepScript的基础学习

1. 一般使用步骤

step1：编写TS代码 ->创建TS文件
step2：编译TS ->JavaScript
step3：运行JS ->将JS文件引入HTML页面中执行

2. TypeScript环境 | 设置自动编译

• 在VSCode中设置自动编译
  step1：运行 tsc --init
  step2：修改tsconfig.json文件，设置文件夹：“OutDir”：“./js/“
  step3：设置vscode监控任务
  

3.TypeScript变量与数据类型 | 变量

3.1 变量

JavaScript

let 变量名 = 值

TypeScript

let 变量名：类型 = 值

例如：let name：string=“xiaohei”

3.2 数据类型

3.2.1 数组

方式1：

let 数组名：类型[]=[value1，value2]
let arr：number[]=[1,2,3]

方式2：

let 数组名：Array<类型>=[1,2,3]

let arr：Array<number>=[1,2,3]

3.2.2 元祖

区别于数组是元祖的元素数量固定，每个元素类型可以不同

• 指定元素个数
• 规定元素类型

let 元祖名[类型1，类型2] = [值1，值2]

let tup[string,number]=['xiaohei',2]

3.2.3 枚举（enum）

enum 枚举名{
//枚举项一般用数字或者英文，枚举值用整数
	枚举项1=枚举值1,
	枚举项2=枚举值2,
	...
}
enum Type{
	type1=1,   // 0
	type2=2,   // 1
	type3=3    // 2
}
//当你不为枚举项赋值时，会有默认值，第一项从0开始

举例：声明性别枚举

enum Gender{
	Boy：1，
	Girl：2，
	UnKnown：3
}

创建枚举类型

let userSex：Gender=Gender.Boy

if(userSex===Gender.Boy){
	console.log(userSex);  //1    
}else{
	console.log(userSex)  // 2 or 3
}

3.2.4 never

用来表示不存在值的类型，通常用来抛出异常或者无限循环

//抛出异常
function test1():never{
	throw new Error('出错了！')
}

//无限循环
function test2():never{
	while(true){
		....
	}
}

let x：never=test()

3.2.5 类型推断

概念：如果变量的声明和初始化是同一行，可以省略掉变量类型的声明

let 变量名=值   等价于  let 变量名：变量类型 = 值

说明：在TypeScript中，会有变量推断，即会自动检测你所定义的类型，举例如下

let age=18；//此时变量age的类型被推断为number
age=‘jack’；报错，因为变量age的类型最初以及被推断为number

4. 函数

4.1 返回值和参数

• 1.返回值类型
  (若没有定义返回值的类型，则默认为void空）

function 函数名():返回值类型{

}
let 变量名：变量类型= 函数名();

• 2.形参类型
  实参和形参的类型要一致
  实参和形参的数量要一致

function 函数名(形参1:类型,形参2:类型){

}
let 变量名:变量类型=函数名(实参1,实参2);

• 3.可选参数

function 函数名(形参？：类型):返回值类型{
	//这里问号就是表示该参数是可选的
	//这个参数可以传值也可以不传
}

//调用如下
不传递参数： 函数名()
传递参数：函数名(实参值)

• 默认值

function 函数名(形参1：类型=默认值,形参2:类型=默认值){
}

//调用如下

不传递实参：函数名()—编译后----- 函数名(默认值1，默认值2)
传一个实数：函数名(实参1)–编译后—函数名(实参1，默认值2)
传两个实参：函数名(实参1，实参2)—编译后— 函数名(实参1，实参2)
只传第二个实参：函数名(undedined，实参2)–编译后— 函数名(默认值1，实参2)

• 剩余参数

function add(形参1:类型,形参2:类型,...形参3:类型[]):void{
	console.log(a+b);
}

//举例如下
function add(x:number,y:number,...restNum:number[]){
  let resNum:number=x+y;
  for(let ele of restNum){
    resNum+=ele;
  }
  console.log(resNum)
}

add(1,2);

add(1,2,3,4);

5. 类

在类中，所定义的属性在构造函数中为其赋值（初始化）

class Person{
	//直接定义的属性：实例属性，需要通过对象的实例访问
	name:string="huangzhizhen";
	age:number=17;
	//若使用static关键字，则可以定义类属性（静态属性），可以直接通过类访问
	static age：number=18
	constructor(name:string,age:number){
		//构造函数，会在对象被创建时调用
		//在实例方法中，this就表示当前对象
		//属性赋值在构造函数中
		this.name=name;
		this.age=age
		console.log(this);
	}
	//成员方法(和属性一样，加static可变成静态方法）
	say(){
	}
}

//创建对象可以看成是调用了该类的构造函数
const per=new Person('xiaohei',4)
const per2=new Person('xiaobai',5)
console.log(per+per2)

• 因此，在使用类创建对象的new后面实质跟的是构造函数，通过new 构造函数来初始化对象的属性，为其赋值

6. localStorage 操作

• localStorage用于在浏览器端 持久化保存 键值对 数据
• localStorage特点：
  1）大小限制：5M，更大数据可以使用浏览器本地数据库（indexDB 或we）bSql
  2）受同源访问限制，不允许跨域访问
  3）在浏览器 隐私模式下无法使用
  4）因为在本地保存，不会发送数据，网络爬虫无法爬取
  5）只能存放在字符串