TypeScript 入门教程
  • TypeScript 入门教程
  • 进阶
    • 类与接口
    • 类
    • 声明合并
    • 装饰器
    • 枚举
    • 扩展阅读
    • 泛型
    • 字符串字面量类型
    • 元组
    • 类型别名
  • 基础
    • 任意值
    • 内置对象
    • 声明文件
    • 原始数据类型
    • 类型断言
    • 类型推论
    • 数组的类型
    • 函数的类型
    • 对象的类型——接口
    • 联合类型
  • 工程
    • 编译选项
    • 代码检查
  • 简介
    • 安装 TypeScript
    • Hello TypeScript
    • 什么是 TypeScript
    • why-typescript
  • 感谢
Powered by GitBook
On this page
  • 简单的例子
  • 访问联合类型的属性或方法
  • 参考

Was this helpful?

  1. 基础

联合类型

联合类型(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 属性时就报错了。

参考

Previous对象的类型——接口Next工程

Last updated 4 years ago

Was this helpful?

()

Advanced Types # Union Types
中文版