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 条件类型的字句中 ...
随机推荐
- JSP常用Form表单控件
[easyui]--combobox--赋值和获取选中的值 /初始化下拉选框 $('#communityIdDiv').combobox({ url:basepath+"pushContro ...
- Linux 线程调度策略与线程优先级
Linux内核的三种调度策略 SCHED_OTHER 分时调度策略. 它是默认的线程分时调度策略,所有的线程的优先级别都是0,线程的调度是通过分时来完成的.简单地说,如果系统使用这种调度策略,程序将无 ...
- 网络基础 08_NAT
1 NAT的基本概念 为什么需要NAT IPv4地址紧缺 什么是NAT NAT(Network Address Translation) 私有IPv4地址 10.0.0.0 - 10.255.255. ...
- sparksql连接mysql
1.方法1:分别将两张表中的数据加载为DataFrame /* * 方法1:分别将两张表中的数据加载为DataFrame * */ /* Map<String,String> option ...
- 在微信移动端input file拍照或从相册选择照片后会自动刷新页面退回到一开始网站进入的页面
<input type="file" accept="image/*"/> 调用打开摄像头后,聚焦后拍照,点击确认,这时页面会出现刷新动作,然后回退 ...
- 【第2次会议记录_2018.5.27】—— [ 算法原理 ]:手工特征提取的概念问题。(by_wanghao)
1.提取 特征点 .特征描述子 与 提取特征向量 之间的区别: (1).特征点:指的是一张图片上比较有代表性的‘位置’,提取特征点就是把图片中这些有代表性的位置给标出来. (2).特征描述子:当提取出 ...
- springboot项目:Redis缓存使用
保存Redis 第一步:启动类中加入注解 @EnableCaching package com.payease; import org.springframework.boot.SpringAppli ...
- Spring Boot的filter简单使用
过滤器(Filter)的注册方法和 Servlet 一样,有两种方式:代码注册或者注解注册 1.代码注册方式 通过代码方式注入过滤器 @Bean public FilterRegistrati ...
- Android四种跨进程通信
由于android系统中应用程序之间不能共享内存.因此,在不同应用程序之间交互数据(跨进程通讯)就稍微麻烦一些.在android SDK中提供了4种用于跨进程通讯的方式.这4种方式正好对应于andro ...
- 【Qt开发】StyleSheet使用总结
概述 转眼七年过去了,我是一个彻底拥抱过MFC的人,记得老大的一个需求要把按钮做成圆角,并添加背景颜色,做前端html的可能认为很简单,然而放到MFC上那可真的是很...很麻烦的,自定义类继承Butt ...