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类型定义-升级篇

                交流

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

                相关文章
                |
                JavaScript 前端开发 编译器
                TypeScript:熟练掌握TypeScript(四)
                TypeScript:熟练掌握TypeScript(四)
                113 0
                |
                JavaScript 前端开发 Java
                TypeScript:熟练掌握TypeScript(三)
                TypeScript:熟练掌握TypeScript(三)
                167 0
                |
                4月前
                |
                JavaScript 前端开发 安全
                如何学习typescript?
                【7月更文挑战第9天】1. 了解其为JavaScript超集,增加类型系统和ES6特性,提升代码安全性和效率。 2. 安装 TypeScript 全局 (`npm install -g typescript`),用`tsc -v`验证,或尝试在线的TypeScript Playground。 3. 学习类型注解、基础类型(如number、string、boolean等)、any与unknown,接口和类。 4. 探索高级特性,如泛型、模块&命名空间、装饰器。 5. 实践中巩固知识,如做小项目(如用React或Vue),阅读官方文档,参与社区讨论。持续编码和实践是关键。
                37 0
                |
                JavaScript 前端开发 IDE
                TypeScript基础
                TypeScript基础
                109 0
                TypeScript基础
                |
                JavaScript IDE 前端开发
                |
                JavaScript 前端开发
                初识TypeScript -基础一
                初识TypeScript -基础一
                112 0
                |
                JavaScript 索引
                TypeScript:熟练掌握TypeScript(二)
                TypeScript:熟练掌握TypeScript(二)
                123 0
                |
                资源调度 JavaScript 前端开发
                TypeScript:熟练掌握TypeScript(一)
                TypeScript:熟练掌握TypeScript(一)
                96 0
                |
                JavaScript 前端开发
                TypeScript学习(1)
                一、概述 1、什么是Typescript? 官方网站的定义是: TypeScript 是 JS 类型的超集,TypeScript 是一个js的外壳,需要编译成浏览器可识别的javascript才可以运行。
                79 0
                |
                JavaScript
                TypeScript学习(2)
                常量枚举 只需要在枚举前面加const,会内联枚举,提高计算性能
                71 0
                下一篇
                无影云桌面