0
点赞
收藏
分享

微信扫一扫

深度讲解TS:这样学TS,迟早进大厂【07】:联合类型


博主是一个专注于前端开发的程序猿~ 曾经主做于vue,react,小程序,uniapp,RN等各大框架~
现在主攻web安全,数据加密,项目架构,性能优化~ 技术之路,任道重远。未来属于努力奋斗的我们!
有什么关于前端的疑问,可以问博主就好啦,知无不言哦~ 关注公众号:敲代码的小江,获取大厂面试题与视频讲解,了解职业发展前景。

​初学者玩转 TypeScript系列,总计 21 期,点赞、收藏、评论、关注、三连支持!​​​ TS系列地址:​​ 21篇文章带你玩转ts​​

# 联合类型

联合类型(Union Types)表示取值可以为多种类型中的一种。

简单的例子§

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
let myFavoriteNumber: string | number;
myFavoriteNumber = true;

// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
// Type 'boolean' is not assignable to type 'number'.

联合类型使用 ​​|​​ 分隔每个类型。

这里的 ​​let myFavoriteNumber: string | number​​​ 的含义是,允许 ​​myFavoriteNumber​​​ 的类型是 ​​string​​​ 或者 ​​number​​,但是不能是其他类型。

访问联合类型的属性或方法§

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法

function getLength(something: string | number): number {
return something.length;
}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.

上例中,​​length​​​ 不是 ​​string​​​ 和 ​​number​​ 的共有属性,所以会报错。

访问 ​​string​​​ 和 ​​number​​ 的共有属性是没问题的:

function getString(something: string | number): string {
return something.toString();
}

联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型:

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错

// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

上例中,第二行的 ​​myFavoriteNumber​​​ 被推断成了 ​​string​​​,访问它的 ​​length​​ 属性不会报错。

而第四行的 ​​myFavoriteNumber​​​ 被推断成了 ​​number​​​,访问它的 ​​length​​ 属性时就报错了。

参考§

  • ​​Advanced Types # Union Types​​([中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced Types.html#联合类型))


举报

相关推荐

0 条评论