typescript 类型 下篇

12、对象 object

规定变量类型时对象型
他还能规定对象中的类型,规定有哪些属性
对象的属性如果是可选用 ?
如果不确定要添加的属性可以用[]

let a:object; //a只能是对象,至于里面有几个对象、对象属性的类型都不关心

let a1:{name:string,age:number}; //不仅声明了a1是对象并且规定a1对象的的属性有哪些,属性的类型也规范。

let a2:{name:string,age:number,tel?:number}; // ? 添加可选属性tel

let a3:{name:string,age:number,[propName:string]:string | number}; // []不确定还有多少属性,他不能与?可选属性冲突

13、断言 assertion

在未使用前断定这个变量是什么类型
编译器在编译一个变量调用一个属性时,可能由于类型的复杂,无法判断是否能使用某个方法或属性,这时候后用断言来指定变量类型,从而避免了编译报错

用于联合类型中某个类型独有方法调用要用断言
断言的写法 
变量 as 类型  === as 字面量写法
<Strnig>变量  ===断言写法

断言的另一种形式
! 当参数为null或undefined熔断
? 当参数不为null且undefined熔断
常用于dom获取后执行语句的判断
类中声明变量但未定义时,防止报错

let a:string | number; //定义a为联合类型,它既能是字符串也能是数值
function fn(value:string | number):void {
console.log((a as string).length); // 即使参数传入的是字符串,但是由于编译器编译时识别不出来所以要在后面加断言来声明他在这里一定是字符串,从而可以使用length属性
}
fn(“aaa”);

(a).length //这种断言写法也可以

let dom:HTMLElement | null=document.querySelector("#never"); //querySelector可以返回来两种类型
dom!.style.color=“red”; //用这种断言! 来判断如果是null的话进行熔断不再向右解析

class Box{
public names!:string; //在没有被赋值或者构造函数引用时,names类型编译会报错,这时候用!来断言他是string类型
}

14、函数 function

规定变量类型为函数
他还能规定函数的从参数与返回值

let fn:(name:string,age:number) => void=function () {};

function fn(name:string,age:number):void {}

15、数组 array

数组根据元素的类型也分为各种类型数组
数组声明类型后,数组元素的类型被限制,不能传入别的类型的元素
这样存储单一类型的数组,大大提高了数组遍历的效率
数组未定义类型时会根据内部值类型来推论他的类型,如果元素有字符、数组类型那这个数组就是 string|number类型

定义格式
类型[]       ===字面量定义
Array<类型>  ===泛型定义

let arr=[1,2,“aas”,true]; //数组类型被推论为 number|string|boolean
arr.push(true);

let arr:string[]=[]; //声明一个字符串类型数组

let arr2:Array=[]; //声明一个数值类型数组

type userType = {
id:number,
name:string
}

var arr3:userType[]=[]; //规定数组中的元素类型时userType类型

16、元组 tuple

固定长度数组,这个数组元素类型也被定义

定义格式
[类型,类型]

let t:[string,number]; //定义一个元组,他的长度为2,他的第一个元素是一个字符串、第二个参数是一个数值

17、枚举 enum

枚举类型用于取值被限定在一定的范围的场景,比如一周只能有七天,性别只能是男女
枚举可以不设置值,他的值会从0开始递增,如果前面设置了枚举值并且为数值型,下面没设置的会自动递增。设置枚举值不是数值类型会报错,如果在设置值前面有没有设置的枚举名,则这个枚举名会根据他前面的已定义的去设置值
枚举类型的枚举名与枚举值是双向映射的关系 通过枚举值可以得到枚举名、通过枚举名也能得到枚举值

常用于一些固定数量的值,通过存储枚举值去映射枚举名,来找到它的意义,并且在存储时存储数值节省了大量的空间

enum Days {sun=3,ads,asa} //sun的枚举值是3,自动递增
console.log(Days[3]); // 打印为sun
console.log(Days[‘sun’]); // 打印为3

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days[“Sun”] === 0); // true
console.log(Days[“Mon”] === 1); // true
console.log(Days[“Tue”] === 2); // true
console.log(Days[“Sat”] === 6); // true

18、自定义类型 type

运用最多的一种类型
当业务数据无法用已有的类型去限制时用到了自定义类型
自定义类型也可以与接口连用
自定义类型可以进行嵌套

type fnType = { //做函数参数返回值限制
(kw:string,age:number) :void;
}

var fn:fnType = (kw:string,age:number) => {
console.log(kw,age);
}
fn(“aaa”,12);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值