TypeScript基础 2

简介: TypeScript基础

六、任意值

任意值(Any)用来表示允许赋值为任意类型。

1、什么是任意值类型

如果是一个普通类型,在赋值过程中改变类型是不被允许的:

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

但如果是 any 类型,则允许被赋值为任意类型。

    let myFavoriteNumber: any = 'seven';
    myFavoriteNumber = 7;

    2、任意值的属性和方法

    在任意值上访问任何属性都是允许的:

    let anyThing: any = 'hello';console.log(anyThing);
    console.log(anyThing.myName);

    可以认为,声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值。

    3、未声明类型的变量

    变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型:

      let something;
      something = 'seven';
      something = 7;

      七、类型推论

      以下代码虽然没有指定类型,但是会在编译的时候报错:

        let myFavoriteNumber = 'seven';
        myFavoriteNumber = 7;

        事实上,它等价于:

          let myFavoriteNumber: string = 'seven';
          myFavoriteNumber = 7;
          TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论。

          如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查:

            let myFavoriteNumber;
            myFavoriteNumber = 'seven';
            myFavoriteNumber = 7;

            八、联合类型

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

            1、简单例子

            let myFavoriteNumber: string | number;
            myFavoriteNumber = 'seven';
            myFavoriteNumber = 7;
            let myFavoriteNumber: string | number;
            myFavoriteNumber = true;


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

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

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

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

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

            上例中,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); // 编译时报错

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

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

                下一篇文章继续更新TypeScript类型定义-升级篇

                交流

                我是老礼,公众号「进军全栈攻城狮」作者 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

                相关文章
                |
                10月前
                |
                JavaScript 前端开发 编译器
                TypeScript:熟练掌握TypeScript(四)
                TypeScript:熟练掌握TypeScript(四)
                77 0
                |
                10月前
                |
                JavaScript 前端开发 Java
                TypeScript:熟练掌握TypeScript(三)
                TypeScript:熟练掌握TypeScript(三)
                107 0
                |
                4月前
                |
                JavaScript 前端开发 安全
                2020你应该知道的TypeScript学习路线【Typescript基础介绍】
                2020你应该知道的TypeScript学习路线【Typescript基础介绍】
                31 2
                |
                8月前
                |
                JavaScript IDE 前端开发
                |
                9月前
                |
                存储 JavaScript 前端开发
                TypeScript深度剖析: typescript 的数据类型有哪些?
                TypeScript深度剖析: typescript 的数据类型有哪些?
                48 0
                |
                10月前
                |
                JavaScript 前端开发
                初识TypeScript -基础一
                初识TypeScript -基础一
                81 0
                |
                10月前
                |
                JavaScript 前端开发 IDE
                TypeScript基础
                TypeScript基础
                81 0
                TypeScript基础
                |
                10月前
                |
                JavaScript 索引
                TypeScript:熟练掌握TypeScript(二)
                TypeScript:熟练掌握TypeScript(二)
                77 0
                |
                10月前
                |
                资源调度 JavaScript 前端开发
                TypeScript:熟练掌握TypeScript(一)
                TypeScript:熟练掌握TypeScript(一)
                70 0
                |
                10月前
                |
                JavaScript
                TypeScript学习(2)
                常量枚举 只需要在枚举前面加const,会内联枚举,提高计算性能
                54 0

                热门文章

                最新文章