小鱼的博客 小鱼的博客
首页
  • 《ES6 教程》笔记
  • 《JavaScript教程》笔记
  • 《vue》笔记
  • 《git》学习笔记
  • 《TypeScript》学习笔记
  • 《Java教程》笔记
更多
  • 网站
  • 资源
  • Vue资源
分类
标签
归档
关于
友情链接
GitHub (opens new window)

小鱼

前端界的大佬,后端界的小学生
首页
  • 《ES6 教程》笔记
  • 《JavaScript教程》笔记
  • 《vue》笔记
  • 《git》学习笔记
  • 《TypeScript》学习笔记
  • 《Java教程》笔记
更多
  • 网站
  • 资源
  • Vue资源
分类
标签
归档
关于
友情链接
GitHub (opens new window)
  • 简介

  • 基础

    • 数据类型
    • 类型断言
    • 类型推论
    • 联合类型
    • 类型别名
    • 交叉类型
    • 可辨识联合
    • 类型保护与区分类型
    • TypeScript 函数
    • TypeScript 接口
    • TypeScript 类
    • TypeScript泛型
  • 《TypeScript》学习笔记
  • 基础
小鱼
2021-08-25

联合类型

联合类型与交叉类型很有关联,但是使用上却完全不同。 偶尔你会遇到这种情况,一个代码库希望传入 number或 string类型的参数。 例如下面的函数:

/**
 * Takes a string and adds "padding" to the left.
 * If 'padding' is a string, then 'padding' is appended to the left side.
 * If 'padding' is a number, then that number of spaces is added to the left side.
 */
function padLeft(value: string, padding: any) {
    if (typeof padding === "number") {
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return padding + value;
    }
    throw new Error(`Expected string or number, got '${padding}'.`);
}

padLeft("Hello world", 4); // returns "    Hello world"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

padLeft存在一个问题, padding参数的类型指定成了 any。 这就是说我们可以传入一个既不是 number也不是 string类型的参数,但是TypeScript却不报错。

let indentedString = padLeft("Hello world", true); // 编译阶段通过,运行时报错
1

在传统的面向对象语言里,我们可能会将这两种类型抽象成有层级的类型。 这么做显然是非常清晰的,但同时也存在了过度设计。 padLeft原始版本的好处之一是允许我们传入原始类型。 这样做的话使用起来既简单又方便。 如果我们就是想使用已经存在的函数的话,这种新的方式就不适用了。

代替 any, 我们可以使用 联合类型做为 padding的参数:

/**
 * Takes a string and adds "padding" to the left.
 * If 'padding' is a string, then 'padding' is appended to the left side.
 * If 'padding' is a number, then that number of spaces is added to the left side.
 */
function padLeft(value: string, padding: string | number) {
    // ...
}

let indentedString = padLeft("Hello world", true); // errors during compilation
1
2
3
4
5
6
7
8
9
10

联合类型表示一个值可以是几种类型之一。 我们用竖线(|)分隔每个类型,所以 number | string | boolean表示一个值可以是 number, string,或 boolean。

如果一个值是联合类型,我们只能访问此联合类型的所有类型里共有的成员。

interface Bird {
    fly();
    layEggs();
}

interface Fish {
    swim();
    layEggs();
}

function getSmallPet(): Fish | Bird {
    // ...
}

let pet = getSmallPet();
pet.layEggs(); // okay
pet.swim();    // errors
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这里的联合类型可能有点复杂,但是你很容易就习惯了。 如果一个值的类型是 A | B,我们能够 确定的是它包含了 A 和 B中共有的成员。 这个例子里, Bird具有一个 fly成员。 我们不能确定一个 Bird | Fish类型的变量是否有 fly方法。 如果变量在运行时是 Fish类型,那么调用 pet.fly()就出错了。

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

当 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'.
1
2
3
4
5
6

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

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

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

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

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'.

1
2
3
4
5
6
7
8

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

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

在 GitHub 上编辑此页 ! (opens new window)
#TypeScript
上次更新: 2021/09/02, 04:08:13
类型推论
类型别名

← 类型推论 类型别名→

最近更新
01
TypeScript泛型
08-26
02
TypeScript 类
08-26
03
TypeScript 接口
08-26
更多文章>
Theme by Vdoing | Copyright © 2021-2022 xiaoyu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式