美文网首页TypeScript
TS之联合类型

TS之联合类型

作者: 越前君 | 来源:发表于2020-04-07 23:24 被阅读0次

上一篇介绍了类型推论,今儿接着介绍联合类型

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

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

简单例子

// 联合类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

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

let myFavoriteNumber: string | number;
myFavoriteNumber = true;

// Type 'boolean' is not assignable to type 'string | number'.

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

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

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

// 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';             // 被推断成 string
console.log(myFavoriteNumber.length);   // 5
myFavoriteNumber = 7;                   // 被推断成 number
console.log(myFavoriteNumber.length);   // 编译时报错

// Property 'length' does not exist on type 'number'.

上述例子中,第二行的 myFavoriteNumber 被推断成了 string,访问它的 length 属性不会报错。而第四行的 myFavoriteNumber 被推断成了 number,访问它的 length 属性时自然就会报错了。

下一篇介绍对象类型。

The end.

相关文章

  • TS之联合类型

    上一篇介绍了类型推论,今儿接着介绍联合类型。 联合类型(Union Types)表示取值可以为多种类型中的一种。 ...

  • typeScript语法

    ts类型 ts联合类型使用或 ts定义任意类型any ts定义函数返回值的类型 ts中的类定义 interface接口

  • TS 联合类型和交叉类型

    联合类型 通过 | 将变量设置多种类型,赋值时可以根据设置的类型来赋值。举例说明: 联合基础类型 联合对象类型 可...

  • TS基础(四)联合类型

    联合类型表示取值可以参考多种类型中的一种。联合类型使用|来对多种类型进行分割 联合类型在实际的使用中可以使用typ...

  • lesson 4 TS 2021-04-23

    课程标题 路白-TS实战 知识点 基础知识 enum 枚举类型 type interface 联合类型 | 交叉类...

  • TS学习笔记(7)-联合类型

    联合类型 ========= 知识点 联合类型是指可以包含多种数据类型 不推荐使用 联合类型的定义方法 联合类型的...

  • ts中的交叉类型和联合类型

    1.交叉类型将多个类型合并成一个类型,该类型具有所有类型的特性(取他们类型的合集) 2.联合类型相当于取他们类型的...

  • TypeScript学习——类型断言

    类型断言 当我们使用联合类型的时候,只能访问这些类型的共有属性或方法。但在一些场景下,我们需要在不确定类型(指TS...

  • readonly

    测试case template.ts 相关知识点 keyof T获取 T 接口的所有的key(联合类型) in k...

  • Ts 进阶使用指南

    # Ts 使用指南 ## 6、参数类型和返回类型 ```ts // 参数类型和返回类型 function crea...

网友评论

    本文标题:TS之联合类型

    本文链接:https://www.haomeiwen.com/subject/szraphtx.html