侧边栏壁纸
博主头像
江子辰博主等级

江子辰,读书人,爱文学,软件工程理工男,IP浙江在职,从业五年。主攻前端方向技术研发,副攻Unity 3D、IOS客户端、Python人工智能等。2021年被评为华为云享专家,阿里云专家博主,前端领域优质创作者等,都是虚名。

  • 累计撰写 159 篇文章
  • 累计创建 3 个标签
  • 累计收到 96 条评论
标签搜索

目 录CONTENT

文章目录

07-联合类型.md

江子辰
2022-03-21 / 0 评论 / 0 点赞 / 420 阅读 / 1,312 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-03-21,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

联合类型

联合类型(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 不是 stringnumber 的共有属性,所以会报错。

访问 stringnumber 的共有属性是没问题的:

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 属性时就报错了。

参考§

0

评论区