这篇内容指南:

          -----类型推论

     -----联合类型

类型推论

第一篇中我们看了TS的基本使用和基本数据类型的使用,知道了变量在使用的时候都得加一个类型,那我们可不可以不加呢,这个嘛,可以也不可以,为啥这木说呢,各位看官我们上眼瞧一下.

首先我们要来先了解一个概念,类型推论:如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型

例子一:

  1. let myFavoriteNumber = 'seven';
  2. myFavoriteNumber = ;
  3.  
  4. // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

看吧,没指定类型报错了吧。因为这样赋值等同于

   let myFavoriteNumber: string = 'seven';

但是我为啥说的是可以也不可以呢,来,我们继续瞧一瞧

例子二:

  1. let myFavoriteNumber;
  2. myFavoriteNumber = 'seven';
  3. myFavoriteNumber = ;

哎,这样咋没报错,其实在定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查

这就是JS的类型推论,是不是美滋滋,这样妈妈就再也不担心我参数类型传的有问题了

联合类型

  我们想想会不会有这个情景,一个变量我们既允许他是string又可以是number,那我们怎么办呢,用any吗?显然是不行的,用any那不是什么类型都能传进去了,那我们怎么做呢,这里就又要亮出一个概念了

   这就是我们要说的联合类型,这个概念一看就知道是把几个类型联合起来,那怎么实现啵,跟概念一样简洁明了

  1. let Adam:string | number
  2. Adam = 'seven';
  3. Adam =
  4.  
  5. let Shstring | number
  6. Sh = true
  7. // index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
  8. // Type 'boolean' is not assignable to type 'number'.

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

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

  1. function getLength(something: string | number): number {
  2. return something.length;
  3. }
  4.  
  5. // index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
  6. // Property 'length' does not exist on type 'number'.

上述例子会报错,是因为length并不是string和number的公共方法

访问 string 和 number 的共有属性是没问题的:

  1. function getString(something: string | number): string {
  2. return something.toString();
  3. }

联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型:

  1. let myFavoriteNumber: string | number;
  2. myFavoriteNumber = 'seven';
  3. console.log(myFavoriteNumber.length); //
  4. myFavoriteNumber = ;
  5. console.log(myFavoriteNumber.length); // 编译时报错
  6.  
  7. // index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

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

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

原文参考自:https://github.com/xcatliu/typescript-tutorial/blob/master/basics/union-types.md

TS学习随笔(二)->类型推论,联合类型的更多相关文章

  1. TS学习随笔(四)->数组的类型

    少侠们,今天我们继续来搞一搞TS 今天我们要来看一看TS中数组的定义是个什么鬼样子 数组的类型: 在 TypeScript 中,数组类型有多种定义方式,比较灵活.下面我们来看看有哪些定义方法 「类型 ...

  2. TS数据类型:类型别名/联合类型/字面量类型/类型推论等纲要

    在学C/C++  Java等强类型语言时,变量类型是唯一的,需要先指定.PHP JavaScript等弱类型语言时,无需指定变量类型 但是,TypeScript里面的联合类型 (Union Type) ...

  3. (C/C++学习笔记) 二十三. 运行时类型识别

    二十三. 运行时类型识别 ● 定义 运行时类型识别(Run-time Type Identification, RTTI) 通过RTTI, 程序能够使用基类的指针或引用来检查(check)这些指针或引 ...

  4. TS学习随笔(五)->函数

    这篇文章我们来看一下TS里面的函数 函数声明 在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expre ...

  5. TS学习随笔(三)->接口

    终于来到了比较重要的知识,接口,有多重要呢,反正是很重要好啵 在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型. 那什么是接口呢,在面向对象语言中,接口(Interf ...

  6. TS学习随笔(六)->断言

    now,我们来看一看TS里面的断言,听起来很上档次啊,其实看完你就发出惊叹,这就是断言啊 类型断言 类型断言(Type Assertion)可以用来手动指定一个值的类型 语法 <类型>值 ...

  7. TS学习随笔(一)->安装和基本数据类型

    去年学过一段时间的TS,但由于在工作中不常用.就生疏了,最近项目要求用TS,那我就再回去搞搞TS,写一篇记录一下自己学习TS的进度以及TS知识点 首先,关于TS的定义我就不在这描述了,想看百度一下你就 ...

  8. JavaSE 第二次学习随笔(二)

    循环结构中的多层嵌套跳出 targeta: for(int i = 0; i < 100; i++){ for (int j = 0; j < 100; j++) { if(i + j = ...

  9. TS学习随笔(七)->声明文件

    now我们来看一看TS怎么声明文件, 在JS里面我们经常会使用各种第三方类库,引入方式也不太相同,常见的就是在HTML中通过script标签引入,然后就可以使用全局变量$或者jQuery了 我们通常这 ...

随机推荐

  1. Spark基础-scala学习(八、隐式转换与隐式参数)

    大纲 隐式转换 使用隐式转换加强现有类型 导入隐式转换函数 隐式转换的发生时机 隐式参数 隐式转换 要实现隐式转换,只要程序可见的范围内定义隐式转换函数即可.Scala会自动使用隐式转换函数.隐式转换 ...

  2. Python - 使用Setuptools进行程序打包

    1- Setuptools简介 通过Setuptools可以更方便的创建和发布Python包,特别是那些对其它包具有依赖性的状况: Python打包用户指南(Python Packaging User ...

  3. NodeJS学习笔记 - Apache反向代理集成实现

    初学,简单的实现,为进行优化. 1. 假设NodeJS服务端监听3000端口 2. Apache反向代理设置 a. 在httpd.conf配置文件中开启代理模块 LoadModule proxy_mo ...

  4. Java多线程之二(Synchronized)

    常用API method 注释 run() run()方法是我们创建线程时必须要实现的方法,但是实际上该方法只是一个普通方法,直接调用并没有开启线程的作用. start() start()方法作用为使 ...

  5. 微信小程序 WXS实现json数据需要做过滤转义(filter)

    前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 v ...

  6. async/await异步处理demo

    async/await异步处理demo 下载地址: async/await异步处理demo

  7. spring面试问题与答案集锦

    我收集了一些spring面试的问题,这些问题可能会在下一次技术面试中遇到.对于其他spring模块,我将单独分享面试问题和答案. 如果你能将在以前面试中碰到的,且你认为这些应该是一个有spring经验 ...

  8. https下 http的会被阻塞 This request has been blocked; the content must be served over HTTPS.

    如何在HTTPS 网页中引入HTTP资源: Mixed Content? https://segmentfault.com/q/1010000005872734/a-1020000005874533 ...

  9. 通过修改hosts解决gist.github.com无法访问的问题

    1.打开mac终端先ping一下 ping 192.30.253.119 如果能ping通的话 ,说明可以访问 2.修改hosts文件,添加如下语句: 192.30.253.118 gist.gith ...

  10. spark之JDBC开发(连接数据库测试)

    spark之JDBC开发(连接数据库测试) 以下操作属于本地模式操作: 1.在Eclipse4.5中建立工程RDDToJDBC,并创建一个文件夹lib用于放置第三方驱动包 [hadoop@CloudD ...