这是我写的最近学习的ts的心得
TS的一些基础知识入门以及补充-对象(下)
接口
对象是结构化的，简单来说就是对象有什么属性和方法
对象的类型注解
就是建立一种契约，来约束对象的结构
在类型注解中，是有；进行分隔的，而不是逗号且分号可以省略
// 可以这样进行赋值
let person: {
name: string;
age:number;
} = {
name:"Vixcity",
age:18
}
// 也可以这样进行赋值
let person1: {
name: string;
age:number;
}
person1 = {
name:"Vixcity",
age:18
}
无参数无返回值的函数的类型注解为
let person1: {
name: string;
age:number;
fun: () => void
}
person1 = {
name:'Vixcity',
age:18,
fun:function (){}
}
有参数无返回值的类型注解为
let p2:{
sum:(sum1: number,sum2:number) => void
} = {
sum:function (sum1,sum2){
console.log(sum1,sum2)
}
}
有参数有返回值的类型注解为
let p3:{
sum:(sum1: number,sum2:number) =>
} = {
sum:function (sum1,sum2){
return sum1+sum2
}
}
以上对象的类型注解大家有没有发现有点问题
我这里就直接说了
- 一个是无法复用
- 一个是代码结构不够简洁
这个时候我们就可以使用对象的接口了
那么什么是对象的接口
可以理解为声明对象类型注解的地方
只不过呢这个类型注解是单独拿出来的
用起来更加的简洁
接口语法：
关键词：interface
举个例子：
interface IPersonObj {
name:string,
age:number,
height:number,
weight:number
}
let person11 : IPersonObj = {
name:"Vixcity",
age:18,
weight:60,
height:180
}
let person22 : IPersonObj = {
name:"Vixcity",
age:18,
weight:60,
height:180
}
以上，这样就可以对对象进行约束了
接口名字约定以 I 开头
当然
你不按照 I 开头也没事
思考
对象数组注解声明
// 声明类型注解
interface IPersonObj {
name:string,
age:number,
height:number,
weight:number
}
// 使用类型注解对应的对象数组
let obj :IPersonObj[] = [{
name:"Vixcity",
age:18,
weight:60,
height:180
}]
补充
我们在函数里面
不需要为实参添加类型注解
实参的名称可以和形参的名称不一致
在数组里面some方法用来获取是否满足某个条件的元素
foreach不能被continue和break终止
但是在foreach里面，return相当于continue
数组的find 方法：返回第一个满足条件的元素
用法：
this.data.product_info.find(item => item.value !== undefined)
类型推论
不正确的代码
// 以下发生了类型推论，默认会帮你添加类型，所以就可以省略类型不写
let age = 18
age = '1'
如果没有初始化就单单声明的话，那么是不会发生类型推论的，所以就应该在此时添加类型注解
例如：
// 错误写法
let a
a = 18
a = '18'
// 正确写法
let b : number
b = 18
ts会自动帮你拿到函数return出来的返回值，就不需要在写类型注解了
能省略类型注解的地方就不要写类型注解 ==> 为了提（lan）高（de）效（da）率（zi）
浏览器
浏览器中是无法使用TS代码的，所以我们在浏览器中使用TS应该
先将TS文件转化为JS文件，命令如下
TSC是一个npm包，需要提前安装
tsc index.ts
然后在页面中引入生成的JS文件
但是每次修改文件都需要重新运行命令
可以使用TSC命令的监视模式
命令如下
tsc --watch index.ts
他会自动帮你转化TS，只要你保存你的TS代码就行了
类型断言
类型断言可以手动指定更加具体的类型
使用场景
值 as 更具体的类型
比如：
let img = document.getElementById('#img') as HTMLImageElement
小知识：console.dir(节点对象) ==> 就可以查看到节点的原始形态
在元素的原型里面可以看到对应的元素的标签类型
这就是我，一个爱读书，爱学习，爱生活，爱代码的V同学，大家再见啦
掘金的小伙伴们，希望可以动动你们发财的小手点个赞
如果可以的话，能留下你们的评论就更好啦
在这里先谢过大家啦
爱你们呦，啾咪😂
作者：Vixcity
我的博客：博客地址
