原文:TypeScript基本知识点整理

零、序言

  联合类型表示一个变量值可以是几种类型之一,我们可以使用 “|” 来分割每个类型;

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

  如果一个值是联合类型,我们只能访问联合类型的所有类型中共有的属性/方法;

let ddd : string | number
ddd = 'nihao'
console.log(ddd.length) //ddd被推断成了 string,访问它的 length 属性不会报错
console.log(`联合类型${ddd}`) ddd = 255
console.log(`联合类型${ddd}`)
console.log(ddd.length)//报错 ddd被推断成了 number,访问它的 length 属性时就报错了 //ddd = false err
//console.log(`联合类型${ddd}`) err

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

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

function f11(name : string, age : string | number) {
console.log(age.length)//报错
}
f11('ljy', '21') 报错:Property 'length' does not exist on type 'string | number'.Property 'length' does not exist on type 'number'.

在上例中,length 不是 string 和 number 的共有属性,故会报错。

function f12(name : string, age : string | number) {
console.log(age.toString())
}
f12('ljy', 21)

toString() 是共有的,故不会报错。

Typescript - 联合类型的更多相关文章

  1. Typescript使用字符串联合类型代替枚举类型

    TypeScript宗旨 我觉得Typescript的宗旨是 任何一个 TypeScript 程序,在手动删去类型部分,将后缀改成 .js 后,都应能够正常运行.Typescript是javascri ...

  2. Typescript基础类型

    1.布尔值__boolean 2.数字__number----除了支持十进制和十六进制字面量,Typescript还支持ECMAScript 2015中引入的二进制和八进制字面量. 3.字符串__st ...

  3. C# vs TypeScript - 高级类型

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  4. 从C#到TypeScript - 高级类型

    C# vs TypeScript - 高级类型 上一篇讲了基础类型,基本上用基础类型足够开发了,不过如果要更高效的开发,还是要看下高级类型,这篇和C#共同点并不多,只是延用这个主题. 联合类型 可以从 ...

  5. Typescript高级类型与泛型难点详解

    最近做的TS分享,到了高级类型这一块.通过琢磨和实验还是挖掘出了一些深层的东西,在此处做一下记录,也分享给各位热爱前端的小伙伴.   其实在学习TS之前就要明确以下几点:   1. typescrip ...

  6. TS学习随笔(二)->类型推论,联合类型

    这篇内容指南:        -----类型推论  -----联合类型 类型推论 第一篇中我们看了TS的基本使用和基本数据类型的使用,知道了变量在使用的时候都得加一个类型,那我们可不可以不加呢,这个嘛 ...

  7. typescript枚举,类型推论,类型兼容性,高级类型,Symbols(学习笔记非干货)

    枚举部分 Enumeration part 使用枚举我们可以定义一些有名字的数字常量. 枚举通过 enum关键字来定义. Using enumerations, we can define some ...

  8. typescript基础类型(学习笔记非干货)

    布尔值 Boolean let isDone:boolean=false; 数字 Number let decLiteral:number=6; let hexLiteral:number=0xf00 ...

  9. TypeScript 基本类型(一)

    1.boolean 布尔值 true/false let isDone: boolean = false; 2.number 数字:和JavaScript 一样,TypeScript 里的所有数字都是 ...

随机推荐

  1. python装饰器类

    from functools import wraps class logit(object): def __init__(self, logger): self.logger = logger de ...

  2. 素小暖讲JVM:Eclipse运行速度调优

    本系列是用来记录<深入理解Java虚拟机>这本书的读书笔记.方便自己查看,也方便大家查阅. 欲速则不达,欲达则欲速! 这两天看了JVM的内存优化,决定尝试一下,对Eclipse进行内存调优 ...

  3. springboot的http监控接口启动器的配置

    基于SpringBoot框架企业级应用系统开发全面实战()->03.07_http监控_recv.mp4 监控接口启动器 自定义监控接口启动器的配置 ====================== ...

  4. tensorflowlite 分类模型从训练到安卓部署

    https://blog.csdn.net/qq_33200967/article/details/82773677

  5. java内存区域与内存溢出异常(2)

    3.本地方法栈 本地方法栈与虚拟机栈作用相同,不同的是虚拟机栈为java方法服务,本地方法栈为native方法服务,本地方法栈会抛出StackOverFlowError和OutOfMemoryErro ...

  6. 893C. Rumor#谣言传播(赋权无向图&搜索)

    题目出处:http://codeforces.com/problemset/problem/893/C 题目大意:一个城中有一些关系圈,圈内会传播谣言,求使每个人都知道谣言的最小花费 #include ...

  7. http跳转http

    server {listen 80;server_name 123.com;root /var/www/web/123;index index.html index.htm index.php;rew ...

  8. Zabbix常用监控项整理

    zabbix常用key:http://blog.51cto.com/ttxsgoto/1771752 linux主机cpu使用率超过90%的时候报警:https://blog.csdn.net/reb ...

  9. Regex of Perl: ?= 指的是如果后面匹配到,则后面的内容不做替换,保留。 ab, s/a?=b/x/,变为xb,即后面匹配到b,b保留不做替换

    Regex of Perl: ?= 指的是如果后面匹配到,则后面的内容不做替换,保留.  ab, s/a?=b/x/,变为xb,即后面匹配到b,b保留不做替换

  10. js几个常用的弹层

    js弹层技术很常见,自己每次用上网找,一找一大堆. 对比了几种,考虑通用性和易用性,这里记录两个. jQueryUI的http://jqueryui.com/dialog/#modal-form ar ...