网站维护和推广方案,怎样做自己可以发布消息的网站,各大招聘网站,义乌市住房和城乡建设局网站前言#xff1a;去年做过几个vue3js的项目#xff0c;当时考虑到时间问题#xff0c;js更加熟悉#xff0c;学习成本低一点#xff0c;所以只去了解了vue3。最近这段时间补了一下ts的知识点#xff0c;现今终于有空来码文章了#xff0c;做个学习总结#xff0c;方便以…前言去年做过几个vue3js的项目当时考虑到时间问题js更加熟悉学习成本低一点所以只去了解了vue3。最近这段时间补了一下ts的知识点现今终于有空来码文章了做个学习总结方便以后复习。与文章中有表达不妥的地方欢迎指正一起进步
一、TypeScript的基本概念
TypeScript编程语言是微软推出的一款开源的开发语言TypeScript是JavaScript的超集。TypeScript也是基于JavaScript来进行开发的具备JavaScript所有特性支持完整的ES6\ES5等等语法。学习TypeScript就相当于在学习JavaScript更多要学习的TypeScript中编程规范比如TypeScript中我们可以进行数据类型约束一旦有了约束后我们程序设计会更加规范
二、回顾JavaScript特点
JavaScript是弱类型语言在js中定义变量无需声明数据类型数据类型都是根据赋的值来确定的
var i 10
var k xianzhitypeof i number
typeof k string
如果我对i这个变量进行修改i的数据类型就会随之改变
i heiheiheitypeof 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 :Arraynumber :Arraystring
let array3:Arraynumber []
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.state1){}else if(record.state2){}
这里的state是后端代表攻击状态的字段我们需要去猜测1/2/3代表什么意思就是这里是魔鬼数字以前处理我们就是给代码加注释但是ts代码可以这样写一个枚举类型
// 后端数据
const record {id:1,name:永恒之蓝,state:1
}/*** 枚举类型*/
enum recordState {attackSuccess1,attackError2,attackIng3
}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}
