Typescript - 联合类型
原文: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 - 联合类型的更多相关文章
- Typescript使用字符串联合类型代替枚举类型
TypeScript宗旨 我觉得Typescript的宗旨是 任何一个 TypeScript 程序,在手动删去类型部分,将后缀改成 .js 后,都应能够正常运行.Typescript是javascri ...
- Typescript基础类型
1.布尔值__boolean 2.数字__number----除了支持十进制和十六进制字面量,Typescript还支持ECMAScript 2015中引入的二进制和八进制字面量. 3.字符串__st ...
- C# vs TypeScript - 高级类型
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - 高级类型
C# vs TypeScript - 高级类型 上一篇讲了基础类型,基本上用基础类型足够开发了,不过如果要更高效的开发,还是要看下高级类型,这篇和C#共同点并不多,只是延用这个主题. 联合类型 可以从 ...
- Typescript高级类型与泛型难点详解
最近做的TS分享,到了高级类型这一块.通过琢磨和实验还是挖掘出了一些深层的东西,在此处做一下记录,也分享给各位热爱前端的小伙伴. 其实在学习TS之前就要明确以下几点: 1. typescrip ...
- TS学习随笔(二)->类型推论,联合类型
这篇内容指南: -----类型推论 -----联合类型 类型推论 第一篇中我们看了TS的基本使用和基本数据类型的使用,知道了变量在使用的时候都得加一个类型,那我们可不可以不加呢,这个嘛 ...
- typescript枚举,类型推论,类型兼容性,高级类型,Symbols(学习笔记非干货)
枚举部分 Enumeration part 使用枚举我们可以定义一些有名字的数字常量. 枚举通过 enum关键字来定义. Using enumerations, we can define some ...
- typescript基础类型(学习笔记非干货)
布尔值 Boolean let isDone:boolean=false; 数字 Number let decLiteral:number=6; let hexLiteral:number=0xf00 ...
- TypeScript 基本类型(一)
1.boolean 布尔值 true/false let isDone: boolean = false; 2.number 数字:和JavaScript 一样,TypeScript 里的所有数字都是 ...
随机推荐
- 纯css隔行显示不同颜色
通过:nth-child(even) 属性来设置背景色可以使table表格偶数行显示不同颜色::nth-child(odd)设置背景色可以使table表格奇数行显示不同颜色:
- 吴裕雄--天生自然 PHP开发学习:函数
<?php function writeName() { echo "Kai Jim Refsnes"; } echo "My name is "; wr ...
- vue执行期间的函数
先放上vue官方给的函数图
- java截取字符串并拼接
一.substirng public static void main(String[] args) { String sendContent = "请查收:www.baidu.com&qu ...
- ZJNU 2135 - 小智的宝可梦
因为成环 所以可以枚举第1只与第n只喂的次数 然后第1只和第2只的次数就固定了,以此类推,则所有宝可梦喂的次数都固定了 最后处理完检查是否全为0,不是则进行下一次枚举,是则直接输出Yes 如果所有枚举 ...
- SLAM资料
当下SLAM方案的总体介绍 http://wwwbuild.net/roboteasy/908066.html slam基础知识 https://www.zhihu.com/question/3518 ...
- Mac 终端实现快速定位命令 自动补全目录
基于macOS oh-my-zsh 切换终端主题 incr.zsh 实现快速定位命令 自动补全目录 效果预览 步骤 1.安装 oh-my-zsh sh -c "$(curl -fsSL ht ...
- iTOP-4418开发板Qt Creator 编译注意事项
用“Qt Creator3.2.2”打开“qt4.7.1”环境下的工程文件可能会提示版本太旧.环境不匹 配导致程序无法编译,解决办法:建立新的工程把测试程序代码粘贴上去即可(界面需要自己 添加). 在 ...
- 上传excel文件,读取内容,增加事务写入数据库
package com.inspur.icpmg.itss.asset.dao.impl; import com.inspur.icpmg.util.DBHelper; import org.apac ...
- Mac中Apache常用命令
Apache常用命令记录,还是记一下吧,总是忘记. Apache常用命令: # sudo apachectl start // 启动Apache服务 # sudo apachectl stop // ...