Typescript中一些不理解的概念解释(泛型、断言、解构、枚举)
新的项目想使用typescript,因此又对其概念及使用过一遍,本文主要记录下对之前一些概念不太理解的地方。
1、泛型
定义: 在定义函数、接口或者类的时候,不预先指定具体的类型,而是在使用的时候再指定类型。提高可重用性。
function createArray<T>(length: number, value: T): Array<T>{
let result: T[] = [];
for (let i = 0; i < length; i++){
result[i] = value
}
return result
}
console.log("数字", createArray(3, 1));
console.log("字符串", createArray(3, 'a'));
定义函数
createArray它拥有泛型参数(value),用T表示;该函数同时约定返回一个T类型的数组(Array)。
当value是数字1的时候,返回数字数组;
当value是字符串a的时候,返回字符串数组;

2、解构
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。主要是可以简化代码,更加便于理解。
// 常用1
// 使用
let [a,b,c] = [1,2,3];
// 代替
let a = 1;
let b = 2;
let c = 3;
// 常用2
let obj = {a:1,b:2};
let obj2 = {...obj}
3、断言
当TS不确定一个联合类型的变量是哪个类型的时候,只能访问此联合类型的所有类型的共有属性和方法;但有时候确实需要在不确定类型的时候就访问一个类型的属性或方法。
function getLength(something: string | number): number{
if((<string>something).length){
return (<string>something).length
}else{
return something.toString().length
}
}
用法1:在需要断言的变量前加上
function getLength(something: string | number): number{
if((something as string).length){
return (something as string).length
}else{
return something.toString().length
}
}
4、枚举
使用枚举,可以定义一些带名字的常量。用于清晰地表达意图或创建一组有区别的用例。
数字类型枚举:默认情况下,第一个枚举值是0,后续至依次增1
enum Color {
red,
blue,
yellow
}
let col = Color.blue;
alert(col);
// 1
字符串枚举:
enum ProName {
SUCCESS = 'ok',
ERROR = 'error'
}
alert(ProName.ERROR);
// "error"
Typescript中一些不理解的概念解释(泛型、断言、解构、枚举)的更多相关文章
- 深入理解ES6(二)(解构赋值)
变量的解构赋值 (1) 数组的解构赋值 1.基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring ). 只要等号两边的模式相同,左边的变量 ...
- TypeScript 中函数的理解?与 JavaScript 函数的区别?
一.是什么 函数是JavaScript 应用程序的基础,帮助我们实现抽象层.模拟类.信息隐藏和模块 在TypeScript 里,虽然已经支持类.命名空间和模块,但函数仍然是主要定义行为的方式,Type ...
- JavaScript 和 TypeScript 中的 class
对于一个前端开发者来说,很少用到 class ,因为在 JavaScript 中更多的是 函数式 编程,抬手就是一个 function,几乎不见 class 或 new 的踪影.所以 设计模式 也是大 ...
- 【JS】325- 深度理解ES6中的解构赋值
点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...
- ES6 中变量的解构赋值
1. 数组的解构赋值 解构: ES6 中允许按照一定的模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构(Destructuring). 1. 基本用法 本质上,这种写法属于"模式匹 ...
- ES6中的解构赋值
在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...
- 十分钟教你理解TypeScript中的泛型
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://blog.bitsrc.io/understanding-generics-in-t ...
- CNN中feature map、卷积核、卷积核的个数、filter、channel的概念解释
CNN中feature map.卷积核.卷积核的个数.filter.channel的概念解释 参考链接: https://blog.csdn.net/xys430381_1/article/detai ...
- typescript 中的 infer 关键字的理解
infer 这个关键字,整理记录一下,避免后面忘记了.有点难以理解呢. infer infer 是在 typescript 2.8中新增的关键字. infer 可以在 extends 条件类型的字句中 ...
随机推荐
- 队列的理解和实现(一) ----- 循环队列(java实现)
什么是队列 我们都知道栈是先进后出的一种线性表,与之相反的是,队列是一种先进先出的线性表.它只允许在表的一端进行插入,而在另一端进行删除.举个例子来说,在生活中我们买东西需要进行排队,最先排队的可以最 ...
- 利用atimicInteger cas的特性实现一个锁
利用atimicInteger cas的特性实现一个锁 主要是使用的是 atomicIntegerAPI 的compareAndSet()方法,让线程不在阻塞,获取不到直接失败. 我们先定义一个异常类 ...
- mysql中权限的小知识
参考:https://www.cnblogs.com/apollo1616/articles/10294490.html mysql中user表中host列的值的意义 % 匹配所有主机 localho ...
- vue 在 html 中自定义 tag
v-if,v-for,:key,:style,v-text,@click,:src,:poster,:class,:href
- scrapy框架安装及使用
一.Windows安装 Twisted下载及安装 在https://www.lfd.uci.edu/~gohlke/pythonlibs/ 下载对应的Twisted的版本文件 在命令行进入到Twist ...
- HihoCoder - 1445 后缀自动机 试水题
题意:求子串个数 SAM中每个子串包含于某一个状态中 对于不同的状态\(u,v\),\(sub(u)∩sub(v)=NULL\) 因此答案就是对于所有的状态\(st\),\(ans=\sum_{st} ...
- 实现基于NTP协议的网络校时功能
无论PC端还是移动端系统都自带时间同步功能,基于的都是NTP协议,这里使用C#来实现基于NTP协议的网络校时功能(也就是实现时间同步). 1.NTP原理 NTP[Network Time Protoc ...
- 11.Set 和 Map数据结构
1.set 基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new S ...
- Debugging Ruby in VS Code
原文 https://dev.to/dnamsons/ruby-debugging-in-vscode-3bkj https://github.com/Microsoft/vscode-recipe ...
- json-c开发指南
网上看到的一片关于json-c的文章.收藏一下,忘记了出处,尽请作者谅解. JSON c语言开发指南 1. 引言 本文档是基于json-c 库对数据交换进行开发所编写的开发指南,及详细解释j ...