原文: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. HDU-4460 Friend Chains(BFS&权为1所有最短路的最大值)

    题目: For a group of people, there is an idea that everyone is equals to or less than 6 steps away fro ...

  2. Java基础三(2020.1.15)

    学习内容: 1.Java流程控制之循环结构 2.Java数组 3.Java方法 1.随机数:math.random()得到0-1之间的数     math.random()*10+1得到1-10之间的 ...

  3. Java web之javascript(2020.1.6)

    1.js输出: windows.alert()---警告框 document.write()---写到html文档中 innerHTML---写到HTML元素 console.log()---写到浏览 ...

  4. flask框架-大结局

    flask-script 用于实现类似于django中 python3 manage.py runserver ...类似的命令. 安装 pip3 install flask-script 使用: f ...

  5. STL入门练习

    题目练习地址https://vjudge.net/contest/310054#overview     看病要排队 http://acm.hdu.edu.cn/showproblem.php?pid ...

  6. shell里脚本里写个简单的函数,显示颜色

    如果多次用到颜色显示,还是定义一个函数比较实在,具体什么颜色上网找一下 #!/bin/bash # 定义一个红色显示的函数 function echo_red () { local what=$* e ...

  7. Codeforces1303F Number of Components

    Description link 题意:给一个全\(0\)矩阵,每次支持一个修改,修改不还原(这要是还原了不就成\(A\)题了) 然后询问每一次修改完了当前矩阵的连通块个数 每一个修改的值单调不降 修 ...

  8. linux 信号量sem实现 生产者—消费者(线程间通信)

    #include<pthread.h> #include<stdlib.h> #include<stdio.h> #include<unistd.h> ...

  9. DNA methylation|Transcription factors|PTM|Chromosome conformation|表观遗传学测序技术

    生物医疗大数据-DNA element functions and identification Genetic vs epigenetic GENETICS  遗传学 DNA Code: 64 tr ...

  10. python学习——tuple

    tuple 上次谈到了列表,而这次所谈的元组其实和列表有许多相似的地方,故元组又叫"戴上了枷锁的列表".这是因为元组不能改动内部的元素,所以就不能使用上次谈到的append.ext ...