TS进阶

类型别名:

使用 type 创建为类型创建别名,常用于联合类型

type Name = string;  //为string创建别名Name
type NameResolver = () => string;   //TS中=>左边是参数,右边是返回值,所以类型是一个 返回字符串的函数,且该函数没有参数
type NameOrResolver = Name | NameResolver;  //  为联合类型起别名
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

字符串字面量类型:

用来约束取值只能是某几个字符串中的一个。
注意:类型别名字符串字面量类型都是使用 type 进行定义。

type EventNames = 'click' | 'scroll' | 'mousemove';    //使用 type 定义一个字符串字面量类型 EventNames,它只能取三种字符串中的一种
function handleEvent(ele: Element, event: EventNames) {
    // do something
}
handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dbclick'); // 报错,event 不能为 'dbclick'

元组:

元组是一种类型
类似于数组,数组合并相同类型的对象,而元组(Tuple)合并了不同类型的对象。
元组起源于函数编程语言,在这些语言中频繁使用元组。

//定义一对 值分别为 string 和 number 类型的元组并赋值:
let xcatliu: [string, number] = ['Xcat Liu', 25];
//定义一对值分别为 string 和 number 类型的元组,可以正常对其某一项操作:
let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';
xcatliu[1] = 25;
xcatliu[0].slice(1);
xcatliu[1].toFixed(2);
//定义元组后,也可以只对一个赋值
let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';

注意:当直接对元组类型的变量进行初始化或者赋值的时候,需要提供所有元组类型中指定的项,否则报错:
let xcatliu: [string, number] = ['Xcat Liu'];//报错
let xcatliu: [string, number]; xcatliu = ['Xcat Liu']; //报错

元素越界:

当添加越界的元素时,越界元素的类型会被限制为元组中每个类型组成的联合类型。
越界的元素是指超出类型的数目。如:

let xcatliu: [string, number];
xcatliu = ['Xcat Liu', 25];
xcatliu.push('https://blog.csdn.net/qq_39403733');    //越界,但越界元素是联合类型内的元素
xcatliu.push(true);     //越界,报错,组成的联合类型中没有boolean类型

枚举:

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值