【Typescript专题】之类型进阶
【Typescript专题】之类型进阶
本篇文章是《Typescript 专题》第一篇,本篇文章主要聊一聊基本类型相关的扩展,毕竟随着文章的加深,我在阅读官方文档的时候经常会见到陌生的声明和“单词”,感觉有必要跟大家分享一下,下一篇文章,我们主要聊一聊Ts的类型断言。
系列文章,收藏不走丢哦
一、类型别名(type)
类型别名用来给一个类型起个新名字。例如:
type isNumber = number;
const num: isNumber = 1;
上面的例子没有任何问题,当然也是一句“废话”,那么类型别名又是为什么创造的呢?来看下面的例子:
type Name = string; // 字符串
type NameResolver = () => string; // 函数
type NameOrResolver = Name | NameResolver; // 联合类型function getName(n: NameOrResolver): Name {if (typeof n === "string") {return n;} else {return n();}
}
别名常用于联合类型,如:
type ID = number | string;
const id1: ID = 123;
const id2: ID = "wpsd";
二、字符串字面量类型
字符串字面量类型用来约束取值只能是某几个字符串中的一个。
type EventNames = "click" | "scroll" | "mousemove";
function handleEvent(ele: Element, event: EventNames) {// do something
}handleEvent(document.getElementById("hello"), "scroll"); // 没问题
handleEvent(document.getElementById("world"), "onmouseout"); // 报错,event 不能为 'onmouseout'
上例中,我们使用 type 定了一个字符串字面量类型 EventNames,它只能取三种字符串中的一种。
在看过第一小节后,你可能会有疑问,字符串字面亮和类型别名非常相似,区别就在于一个是限制的是类型,一个限制的是具体的值。
三、元祖
相信对于大家来说(包括我)都对这个词有些陌生,我们仍然通过具体的例子来形成概念
定义一对值分别为 string 和 number 的元组:
let yuguang1: [string, number] = ["yuguang", 25];let yuguang2!: [string, number];
yuguang2 = ["a", 1];
yuguang2[0] = "yuguang";
yuguang2[1] = 25;
console.log(yuguang2); // ['yuguang', 25]
注意 1: 当直接对元组类型的变量进行初始化或者赋值的时候,需要提供所有元组类型中指定的项。
let yuguang: [string, number];
yuguang = ["yuguang"]; // 不能将类型“[string]”分配给类型“[string, number]”。源具有 1 个元素,但目标需要 2 个
注意 2: 添加的元素需要以元组的每个类型组成的联合类型检查:
let yuguang: [string, number];
yuguang = ["yuguang", 100];
yuguang.push({});
// 类型“{}”的参数不能赋给类型“string | number”的参数。
// 不能将类型“{}”分配给类型“number”
注意 3: 元组和联合类型在校验是是相似的,但两者还是有区别的
四、枚举
枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。这和上一节字面量很想子
枚举使用enum
关键字来定义(新关键词~)
enum Days {Sun,Mon,Tue,Wed,Thu,Fri,Sat,
}
枚举成员会被赋值为从 0 开始递增的数字,同时也会对枚举值到枚举名进行反向映射:
enum Days {Sun,Mon,Tue,Wed,Thu,Fri,Sat,
}console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // trueconsole.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true
如图,上面的例子会被编译为:
真的是从 0 开始递增吗?我们看下面的编译示例:
上图中,未手动赋值的枚举项会接着上一个枚举项递增。而且你会发现,Sun 和 Wed 存储的都是 7,并且没有报错~
enum Days {Sun = 3,Mon = 1,Tue,Wed,Thu,Fri,Sat,
}console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true
上面的例子中,递增到 3 的时候与前面的 Sun 的取值重复了,但是 TypeScript 并没有报错,导致Days[3]
的值先是"Sun",而后又被"Wed"覆盖了。编译的结果是:
var Days;
(function(Days) {Days[(Days["Sun"] = 3)] = "Sun";Days[(Days["Mon"] = 1)] = "Mon";Days[(Days["Tue"] = 2)] = "Tue";Days[(Days["Wed"] = 3)] = "Wed";Days[(Days["Thu"] = 4)] = "Thu";Days[(Days["Fri"] = 5)] = "Fri";Days[(Days["Sat"] = 6)] = "Sat";
})(Days || (Days = {}));
好了,有关枚举我们就了解这么多,其实官方文档上介绍枚举用了很大的篇幅,在未来我们会随着知识的深入一点点的渗透给大家(准确的说就是我还没看懂哈哈~)
写在最后
本篇文章是《Typescript 专题》第一篇,本篇文章主要聊一聊基本类型相关的扩展,毕竟随着文章的加深,我在阅读官方文档的时候经常会见到陌生的声明和“单词”,感觉有必要跟大家分享一下,下一篇文章,我们主要聊一聊Ts的类型断言。
系列文章传送门:
- 【Typescript 入门手册】之基本类型在 TypeScript 中的应用
- 【Typescript 入门手册】之引用类型在 TypeScript 中的应用
- 【Typescript 入门手册】之函数类型在 TypeScript 中的应用
- 本文
关于我
- 花名:余光
- WX:j565017805
- 邮箱:webbj97@163.com
其他沉淀
- Github: Js 版 LeetCode 题解
- 前端进阶笔记
- CSDN 博客汇总
【Typescript专题】之类型进阶相关推荐
- 【TypeScript专题】之类型断言
[TypeScript 专题]之类型断言 断言是编程术语,表示为一些布尔表达.-- 百度百科 系列文章,收藏不走丢哦 类型断言(Type Assertion)可以用来手动指定一个值的类型.就是告诉编译 ...
- 【TypeScript 专题】之 Ts 中的类(class)
在 ES6 中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类.它本质仍然是函数,它让对象原型的写法更加清晰.更像面向对象编程的语法. 在 TypeScript 中,除了实 ...
- typescript利用接口类型声明变量_TypeScript入门指南(基础篇)
戳蓝字「前端技术优选」关注我们哦! 作者:慕晨同学 原文地址:https://github.com/USTB-musion/fee-skills/issues/19 写在前面 ts是拥有类型系统 ...
- Vue3+TypeScript从入门到进阶(六)——TypeScript知识点——附沿途学习案例及项目实战代码
文章目录 一.简介 二.Vue2和Vue3区别 三.Vue知识点学习 四.TypeScript知识点 一.JavaScript和TypeScript 二.TypeScript的安装和使用 1.Type ...
- Vue3+TypeScript从入门到进阶(八)——项目打包和自动化部署——附沿途学习案例及项目实战代码
文章目录 一.简介 二.Vue2和Vue3区别 三.Vue知识点学习 四.TypeScript知识点 五.项目实战 六.项目打包和自动化部署 一. 项目部署和DevOps 1.1. 传统的开发模式 1 ...
- TypeScript Type Innference(类型推断)
在这一节,我们将介绍TypeScript中的类型推断.我们将会讨论类型推断需要在何处用到以及如何推断. 基础 在TypeScript中,在几个没有明确指定类型注释的地方将会使用类型推断来提供类型信息. ...
- TypeScript Type Compatibility 类型兼容性
官方链接 TypeScript 中的类型兼容性基于结构子类型. 结构类型是一种仅基于其成员关联类型的方法.这与 nominal typing 相反.考虑以下代码: interface Pet {nam ...
- TypeScript Type Assertions - 类型断言
有时,您会获得有关 TypeScript 不知道的值类型的信息. 例如,如果你使用 document.getElementById,TypeScript 只知道这会返回某种 HTMLElement,但 ...
- boolean类型_10、typescript的高级类型
所谓高级类型,是typescript为了保证语言的灵活性,所使用的一下语言特性.这些特性有助于我们应对复杂多变的开发场景. 交叉类型 将多个类型合并成一个类型,新的类型将具有所有类型的特性,所以交叉类 ...
最新文章
- 网管日志-06.09.05
- 5加载stm32 keil_「keil」嵌入式STM32开发环境之Keil5的安装(附资源) - 金橙教程网
- Android安卓模拟器中模拟SD卡
- vue-cli目录结构解析
- java 暂停等返回值在执行_java面试技巧(2)
- (四)Linux 安装 jdk
- 效果超某度OCR:文本检测、文本识别(cnn+ctc、crnn+ctc)
- webgl天空盒边界缝隙_WebGL three.js进修笔记 法向量网格材质MeshNormalMaterial的引见和建立360度全景天空盒的要领...
- 谈电子信息系统机房设计规范——访中国电子工程设计院副总工程师钟景华
- php实现最短路径,北京地铁最短路径实现(示例代码)
- 思科交换机关闭服务端口
- html实现文件的下载
- Java面试题目分析
- __virtual__ returned False: cannot import name certs ---saltstack异常解决
- 青年是科学的未来:JGG诚聘青年编委
- 使用python实现固定效应模型
- PKI介绍及搭建Linux私有CA (SSL 示例)
- 【工具】百度网盘视频类资源下载新思路,轻松优雅解决下载限速方法
- 相关系数如何计算,举例说明
- 在线安装gem5和nvmain集成gem5
热门文章
- Mockplus: 让小白产品经理上手就用的原型图设计工具
- Latex去除正文中的章节编号但同时在目标中保留索引
- 使用MultipartFile+ElementUi(el-upload)实现前端向后端传图片
- nginx image_filter模块415问题
- 【2021版】吐血整理_专升本计算机文化基础—Excel2010
- 华为服务器2488H V6的ibmc接口配置
- len函数python_Python len()函数
- cout 输出 uint8_t 整形值
- htc m8什么时候更新Android 6.0,速度够快 港版HTC M8获Android 6.0更新
- DWC的1000M的MAC自环和PHY自环测试寄存器修改方式