TypeScript学习笔记1---认识ts与js的异同、ts的所有数据类型详解

前言：去年做过几个vue3+js的项目，当时考虑到时间问题，js更加熟悉，学习成本低一点，所以只去了解了vue3。最近这段时间补了一下ts的知识点，现今终于有空来码文章了，做个学习总结，方便以后复习。（与文章中有表达不妥的地方欢迎指正，一起进步！）

一、TypeScript的基本概念

• TypeScript编程语言是微软推出的一款开源的开发语言
• TypeScript是JavaScript的超集。TypeScript也是基于JavaScript来进行开发的，具备JavaScript所有特性，支持完整的ES6\ES5等等语法。
• 学习TypeScript就相当于在学习JavaScript，更多要学习的TypeScript中编程规范
• 比如TypeScript中我们可以进行数据类型约束，一旦有了约束后我们程序设计会更加规范

二、回顾JavaScript特点

JavaScript是弱类型语言，在js中定义变量无需声明数据类型，数据类型都是根据赋的值来确定的

var i = 10
var k  = "xianzhi"

typeof i ===>number
typeof k ===>string

如果我对i这个变量进行修改，i的数据类型就会随之改变

i = "heiheihei"

typeof i ===>string

 与弱类型语言对应的就是强类型语言，比如Java、C++等

强类型语言一旦在定义变量的时候，确定了数据类型，以后就只能赋值相同数据类型的结果

int i = 10  --->int代表数据类型，整数类型

i = "heiheihei" //程序会报错

所以JavaScript会有一些缺点：我们的代码经常在运行过程中才发生报错，而Typescript正好可以帮助我们，在编写代码的时候就检测到错误。

三、Typescript能帮助我们解决的问题

• TS是JS的超集，完全遵循我们ES5、ES6的标准。写TS代码就是在写JS代码。只是提供了更多的约束。更多规范要求我们写代码必须按照规范来写，否定编译不通过。
• TypeScript代码——-编译——JavaScript
• 这个编译过程会检测你的语法是否正确，如果语法有问题，规范不正确，那就会抛出异常。
• 可以减少代码在运行时报错

四、Typescript的数据类型

1、数字类型：number

var price:number = 20
price = true //报错.必须指定price值为number才能编译通过

2、字符串类型：string

var username:string = "hhhhhh"
username = "jjjjj"

3、布尔类型：boolean

var flag:boolean = true
flag = false

4、数组类型

数组类型语法1  :number[]  :string[]

// 语法一
let array:number[] = []
array.push(1)
array.push(2)

let array2:string[] = []
array2.push("xiaowang")
array2.push("1")

注：定义数组时定下来了里面的数据类型，以后这个数组就只能存放对应的数据类型，放错数据类型就会报错

数组类型语法2  :Array<number>  :Array<string>

let array3:Array<number> = []
array3.push(1)

这里使用到了泛型,Array代表数组类型,<number>数组里面存放的number数据类型

5、 undefined和null

在TS中我们一般用undefined和null来表现我们可能出现的特殊情况.

/**
 * undefined 和 null
 * 在TS中，变量没有赋值之前不能使用
 * a的数据类型要么number，要么undefined
 */
let a: number | undefined;
console.log(a,'赋值前');
a = 66;
console.log(a,'赋值后');

let b: string | null = null;
console.log(b,'赋值前');
b = "heiheihei";
console.log(b,'赋值后');

输出结果： 

6、元组类型

元组类型是数组类型一种衍生,扩展.

数组类型默认只能存放统一数据类型的值.要么全是number\要么全是string类型

如果一个数组要存放多个数据类型,就可以考虑用元组来实现

let point:[number,string,boolean] = [1,"heiheihei",true]

7、枚举类型

这里先说一个场景：比如一条网络攻击，有“攻击失败”、“攻击成功”、“攻击中”等多个状态，如以下代码

//后端传过来的数据
const record = {
    id:1,
    name:"永恒之蓝",
    state:1
}
//前端处理逻辑
if(record.state==1){

}else if(record.state==2){

}

这里的state是后端代表攻击状态的字段，我们需要去猜测1/2/3代表什么意思，就是这里是魔鬼数字，以前处理我们就是给代码加注释，但是ts代码可以这样写一个枚举类型：

// 后端数据
const record = {
    id:1,
    name:"永恒之蓝",
    state:1
}

/**
 * 枚举类型
 */
enum recordState {
    attackSuccess=1,
    attackError=2,
    attackIng=3
}

if(record.state == recordState.attackSuccess){

}else if(record.state == recordState.attackError){

}else if(record.state == recordState.attackIng){

}

注：枚举类型里面状态必须是有限的，一旦写了以后代码就可以直接用枚举中的状态，代码解构会更加清晰

8、any类型

表达任意类型的一个基础类型，主要用于表达哪些无法用准确的数据类型来进行表示的场景

比如我们要获取页面上某个节点，这种情况下我们不好用数据类型来表达，为了满足ts的规范，我们可以使用any来进行类型声明

定义一个数组，这个数组里数据可以有多种类型

let age:any = "xiaowang"
age = 20  //any意义就不大

const element:any =  document.getElementById("app")

let array:any = [1,"xiaowangf",true] //编译没有问题

9、never类型 

• never类型表示哪些永远不存在的值
• never类型的应用场景比较局限，主要表达哪些总会抛出异常或者不会有返回值的函数表达式或者箭头函数。

let others:never;
others = (()=>{
    throw new Error("错误")
})()

10、object类型

在TS开发过程中object类型可以表达三种结果，表示值为{}、也可以[]、还可以是function

/**
 * object数据类型
 */
let obj1:object = {}
let obj2:object = []
let obj3:object = function(){
}
let obj4:object = {id:1}
console.log(obj4.id); //报错，obj4找不到id属性

 这里的obj4.id会报错：

修改成这样就不报错了：

let obj4:{id:number} = {id:1}

 

定义一个对象，要明确告诉TS代码，我的对象里面有哪些东西

let student:{id: number;name: string}
student = {id:1,name:"ddd"}