Skip to content
静心静心
HOME
DoubtfulCases
github icon
  • Typescript基础

    • 原始数据类型
      • 任意值
        • 类型推论
          • 联合类型
            • 简单的例子
              • 访问联合类型的属性或方法
                • 参考
                • 对象的类型——接口
                  • 数组的类型
                    • 函数的类型
                      • 类型断言
                        • 声明文件
                          • 内置对象
                          • Typescript进阶

                            • 类型别名
                              • 字符串字面量类型
                                • 元组
                                  • 枚举
                                    • 类
                                      • 类与接口
                                        • 泛型
                                          • 声明合并
                                            • 扩展阅读

                                            联合类型

                                            author iconYYtimer icon大约 1 分钟

                                            此页内容
                                            • 简单的例子
                                            • 访问联合类型的属性或方法
                                            • 参考

                                            # 联合类型

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

                                            # 简单的例子

                                            let myFavoriteNumber: string | number;
                                            myFavoriteNumber = 'seven';
                                            myFavoriteNumber = 7;
                                            
                                            1
                                            2
                                            3
                                            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'.
                                            
                                            1
                                            2
                                            3
                                            4
                                            5

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

                                            这里的 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'.
                                            
                                            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

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

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

                                            # 参考

                                            • Advanced Types # Union Typesopen in new window(中文版open in new window)
                                            edit icon编辑此页open in new window
                                            上一页
                                            类型推论
                                            下一页
                                            对象的类型——接口
                                            傻瓜都能写出计算机可以理解的代码。唯有能写出人类容易理解的代码的,才是优秀的程序员。
                                            Copyright © 2022 YY

                                            该应用可以安装在您的 PC 或移动设备上。这将使该 Web 应用程序外观和行为与其他应用程序相同。它将在出现在应用程序列表中,并可以固定到主屏幕,开始菜单或任务栏。此 Web 应用程序还将能够与其他应用程序和您的操作系统安全地进行交互。

                                            详情