新的项目想使用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中一些不理解的概念解释(泛型、断言、解构、枚举)的更多相关文章

  1. 深入理解ES6(二)(解构赋值)

    变量的解构赋值 (1) 数组的解构赋值 1.基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring ). 只要等号两边的模式相同,左边的变量 ...

  2. TypeScript 中函数的理解?与 JavaScript 函数的区别?

    一.是什么 函数是JavaScript 应用程序的基础,帮助我们实现抽象层.模拟类.信息隐藏和模块 在TypeScript 里,虽然已经支持类.命名空间和模块,但函数仍然是主要定义行为的方式,Type ...

  3. JavaScript 和 TypeScript 中的 class

    对于一个前端开发者来说,很少用到 class ,因为在 JavaScript 中更多的是 函数式 编程,抬手就是一个 function,几乎不见 class 或 new 的踪影.所以 设计模式 也是大 ...

  4. 【JS】325- 深度理解ES6中的解构赋值

    点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...

  5. ES6 中变量的解构赋值

    1. 数组的解构赋值 解构: ES6 中允许按照一定的模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构(Destructuring). 1. 基本用法 本质上,这种写法属于"模式匹 ...

  6. ES6中的解构赋值

    在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...

  7. 十分钟教你理解TypeScript中的泛型

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://blog.bitsrc.io/understanding-generics-in-t ...

  8. CNN中feature map、卷积核、卷积核的个数、filter、channel的概念解释

    CNN中feature map.卷积核.卷积核的个数.filter.channel的概念解释 参考链接: https://blog.csdn.net/xys430381_1/article/detai ...

  9. typescript 中的 infer 关键字的理解

    infer 这个关键字,整理记录一下,避免后面忘记了.有点难以理解呢. infer infer 是在 typescript 2.8中新增的关键字. infer 可以在 extends 条件类型的字句中 ...

随机推荐

  1. AssertJ断言系列<一>

    1 - Get AssertJ Core assertions Maven的pom.xml加入如下配置: <dependency> <groupId>org.assertj&l ...

  2. 对drf视图集的理解

    视图集ViewSet 使用视图集ViewSet,可以将一系列逻辑相关的动作放到一个类中: list() 提供一组数据 retrieve() 提供单个数据 create() 创建数据 update() ...

  3. (C/C++) Array 印出所有排列組合

    #include <stdio.h> #include <stdlib.h> #define N 4 , , , }; void swap(int *a, int *b) { ...

  4. flask _bootstrap中使用flash

    在模板中获取flash闪现的那段代码要和内容块放在同一级别上.不然网页上是看不到闪现的内容的. 比如在基模板里定义一个content block ,里面一个是get_flashed_messages代 ...

  5. HDU - 4630 离线处理区间点对问题

    题意:给定\(a[1...n]\),多次询问\([L,R]\)中的任意一对数使得\(gcd(a_i,a_j)\)最大 对于gcd,区间内至少存在两个相同的因子才能作为合法的解,存在两个相同因子且最大就 ...

  6. 搜索引擎原理和SEO

    搜索引擎原理 通常是指收集了万维网上几千万到十几亿网页病对网页的每个词(即关键词)进行索引,建立搜索引擎数据库的全文搜索引擎. 当用户每次查询某个关键词的时候,所有在页面内容包含了该关键词的网页都作为 ...

  7. compact framework windows mobile wm c#代码 创建快捷方式

    已经2018年了,windows mobile已经宣布不维护狠多年了,不要问我为什么还在开发windows mobile的程序,我也不想.公司有一批手持扫描枪设备依然是windows mobile的程 ...

  8. 结合React使用Redux

    前面的两篇文章我们认识了 Redux 的相关知识以及解决了如何使用异步的action,基础知识已经介绍完毕,接下来,我们就可以在React中使用Redux了. 由于Redux只是一个状态管理工具,不针 ...

  9. Java Struts(文件下载)

    1.从注册成功页面跳转至用户详情页面(跳转至UserListAction) 2.UserListAction调用service获得用户列表,并将这些数据传送到UserList.jsp中,UserLis ...

  10. C# OracleHelper

    using System; using System.Configuration; using System.Data; using System.Collections; using Oracle. ...